title: Formstone asap.js proper usage in wordpress
body: <p>I am trying to use an asap.js (docs: <a href="http://formstone.it/components/asap/" rel="nofollow">http://formstone.it/components/asap/</a>) component on my wordpress site. This plugin is provided with formstone set of useful scripts. However I can't figure out how to properly address my wordpress content using this script.</p>
  
  <p>I tried this code but it doesn;t seem to work nor I have any errors in chrome's console. Can anyone provide me a simple example, something I can start with?</p>
  
  <pre><code>jQuery(document).ready(function ($) {
  var $content,
      $deferred;
  
  $(document).ready(function() {
      // Bind ASAP events
      $(window).on("request.asap", pageRequested)
          .on("progress.asap", pageLoadProgress)
          .on("load.asap", pageLoaded)
          .on("render.asap", pageRendered)
          .on("error.asap", pageLoadError);
  
      $content = $(".myPageWrapper");
  
      // Init ASAP
      $.asap({
          cache: false,
          selector: "a:not(.no-asap)",
          transitionOut: function() {
              if ($deferred) {
                  $deferred.reject();
              }
  
              $deferred = $.Deferred();
  
              $content.animate({ opacity: 0 }, 1000, function() {
                  console.log("Animate complete");
  
                  $deferred.resolve();
              });
  
              return $deferred;
          }
      });
  
      // Remember to init first page
      pageRendered();
  });
  
  function pageRequested(e) {
      // update state to reflect loading
      console.log("Request new page");
  }
  
  function pageLoadProgress(e, percent) {
      // update progress to reflect loading
      console.log("New page load progress", percent);
  }
  
  function pageLoaded(e) {
      // unbind old events and remove plugins
      console.log("Destroy old page");
  }
  
  function pageRendered(e) {
      // bind new events and initialize plugins
      console.log("Render new page");
  
      $content.animate({ opacity: 1 }, 1000);
  }
  
  function pageLoadError(e, error) {
      // watch for load errors
      console.warn("Error loading page: ", error);
  }
  
  
  
  });
  </code></pre>
  
  <p>The class="myPageWrapper" is used in my wordpress theme file <strong>content-page.php</strong>:</p>
  
  <pre><code>&lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
  
  &lt;article class="myPageWrapper"&gt;
    &lt;?php the_content(); ?&gt;
   &lt;/article&gt;
  &lt;?php endwhile; endif; ?&gt;
  </code></pre>