title: jQuery Slider PHP/HTML Problems
body: <p>I came across some code provided by a helpful individual online today that is perfect for something I am trying to add to my website. I have all of the relevant code that this individual provided, but I can't quite figure out how to implement it correctly into my Wordpress powered website. </p>
  
  <p>Demo page showing correct use -> <a href="http://www.akshitsethi.me/labs/slidepanel/" rel="nofollow">http://www.akshitsethi.me/labs/slidepanel/</a></p>
  
  <p>Essentially, what I've done is copy their CSS EXACTLY onto the end of my CSS file (I'll edit it to my liking later). I've copied the script code EXACTLY into my header.php file, except for manually editing the links in the script code to point exactly to .js files that I uploaded to my theme's folder. I've taken the HTML code concerning the DIV and placed it into a slider.php file which I've told my header.php file to include...</p>
  
  <p>What I really need help with, is figuring out why this isn't working. In summary, CSS is EXACT, the SCRIPT code is copied into my header.php and the HTML is copied into a slider.php - except for the a href="#panel", which I was going to stick onto a page somewhere. Am I doing something wrong?</p>
  
  <p>I'd really appreciate if someone can help me figure out how to get this working on my website. My test website I'm using this on is <a href="http://test.vtisvc.com" rel="nofollow">http://test.vtisvc.com</a>. The "MENU" link right there in the content area of the homepage is what should, theoretically, be opening and closing the panel. Obviously, the header is screwed up, thanks to the inclusion of the panel DIV in slider.php, I believe</p>
  
  <p><strong>HTML in slider.php</strong></p>
  
  <pre><code>&lt;div id="panel" class="hide"&gt;
  &lt;h4&gt;MENU&lt;/h4&gt;
      &lt;ul class="menu"&gt;
      &lt;li&gt;
                  &lt;a href="#"&gt;News Feed&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Friends&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Nearby&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Messages&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Events&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
              &lt;a href="#"&gt;Photos&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Notes&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Pokes&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>HTML in header.php, before the close of the HEAD tag</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.pageslide.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(".open").pageslide({ direction: "right", modal: true });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML in header.php, after the opening BODY tag</strong></p>
  
  <pre><code>&lt;?php
  include ('slider/slider.php');
  ?&gt;
  </code></pre>
  
  <p><strong>HTML on home page</strong></p>
  
  <pre><code>&lt;a href="#panel" class="open highlight strong"&gt;Menu&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#pageslide {
    /*
    * Required. Do not modify these.
    */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
  
    /*
    * Optional. You can tweak these as per your preference.
    */
    width: 200px;
    padding: 20px;
    background-color: #fafafa;
    color: #666;
    -webkit-box-shadow: 0 0 3px 3px #efefef;
    -moz-shadow: 0 0 3px 3px #efefef;
    box-shadow: 0 0 3px 3px #efefef;
  }
  </code></pre>