title: Dynamic Page/Replacing Content with a twist (wordpress)
body: <p>I'm wondering how hard it would be to dynamically replace content in a wordpress site through the use of JQuery.
  This is the article I'm going off of:
  <a href="http://css-tricks.com/6336-dynamic-page-replacing-content/" rel="nofollow">http://css-tricks.com/6336-dynamic-page-replacing-content/</a></p>
  
  <p>My basic idea was to change the elements referred to in their javascript file to the elements created in wordpress by default. This means changing page-wrap to wrapper, main-content to main-col, and guts to content.</p>
  
  <p><del>I ran into a speed bump when I tried replacing 'guts' though.  For some reason the page doesn't show the content anymore.
  Anyway, after I get that sorted out,
  </del></p>
  
  <p>I figured it out.  I'll insert the code into my wordpress site and hope for the best.</p>
  
  <p>one of the pages:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;&lt;/header&gt;
                &lt;div class="nav"&gt;
                &lt;ul class="sf-menu"&gt;
                    &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/header&gt;
          &lt;section id="main-col"&gt;
              &lt;div id="content"&gt;
              &lt;h2&gt;Home&lt;/h2&gt;
              &lt;p&gt;&lt;/p&gt; 
              &lt;p&gt;&lt;/p&gt; 
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript that is inserted into the header:</p>
  
  <pre><code>/*
   * jQuery hashchange event - v1.2 - 2/11/2010
   * http://benalman.com/projects/jquery-hashchange-plugin/
   * 
   * Copyright (c) 2010 "Cowboy" Ben Alman
   * Dual licensed under the MIT and GPL licenses.
   * http://benalman.com/about/license/
   */
  (function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&amp;&amp;(g===b||g&lt;8),e="on"+d in i&amp;&amp;!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('&lt;iframe src="javascript:0"/&gt;').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&amp;&amp;clearTimeout(r);r=0}};return m})()})(jQuery,this);
  
  $(function() {
  
      var newHash      = "",
          $mainContent = $("#main-col"),
          $pageWrap    = $("#wrapper"),
          baseHeight   = 0,
          $el;
  
      $pageWrap.height($pageWrap.height());
      baseHeight = $pageWrap.height() - $mainContent.height();
  
      $("sf-menu").delegate("a", "click", function() {
          window.location.hash = $(this).attr("href");
          return false;
      });
  
      $(window).bind('hashchange', function(){
  
          newHash = window.location.hash.substring(1);
  
          if (newHash) {
              $mainContent
                  .find("content")
                  .fadeOut(200, function() {
                      $mainContent.hide().load(newHash + "#content", function() {
                          $mainContent.fadeIn(200, function() {
                              $pageWrap.animate({
                                  height: baseHeight + $mainContent.height() + "px"
                              });
                          });
                          $("sf-menu a").removeClass("current");
                          $("sf-menu a[href="+newHash+"]").addClass("current");
                      });
                  });
          };
  
      });
  
      $(window).trigger('hashchange');
  
  });
  </code></pre>