title: sliding panel for website pages
body: <p>Thanks for viewing my question, I will try to explain as good as possible what I need.</p>
  
  <p>This is my site <a href="http://hoveralls.design-way.ro/" rel="nofollow">http://hoveralls.design-way.ro/</a> - I want to make all pages to slide down pretty much like here <a href="http://example.design-way.ro/" rel="nofollow">http://example.design-way.ro/</a> - to make this work I used Hoveralls Jquery plugin which you can find on code canyon. </p>
  
  <p>Well... I have 2 problems:</p>
  
  <ol>
  <li><p>First and the most important is that Parallax plugin that I used for the animation in the middle works with jQuery 1.2.6 and Hoveralls with 1.7.1. If I change the jQuery version animation stops working and hoveralls does not work on 1.2.6</p></li>
  <li><p>In the example I gave before you can see that the pages slide down but I need them to close when another page is open. </p></li>
  </ol>
  
  <p>Before I posted I searched for an answer and I found this <a href="http://jsfiddle.net/fE8ks/26/" rel="nofollow">jsfiddle.net/fE8ks/26/</a>. I think this would work if I can somehow close all divs when HOME button is clicked and the default state will be hidden.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li><p>Is there a way to do this with plain old javascript(no jQuery)? I will need to controll the height and a text speed effect will be nice.</p></li>
  <li><p>Will my website load slowly since this is basically one page?Pages will be mostly simple, I will only use JS for some tabs and for the gallery.</p></li>
  </ol>
  
  <p>I emailed the developer of hoveralls asking for some help and he gave me this code: </p>
  
  <pre><code>// 1. HTML
     a div with id "portfolio_slider"
  
  // GIVE YOUR PORTFOLIO BUTTON AN ID
  &lt;a id="porfolio_button"&gt;Slide Open Portfolio&lt;/a&gt;
  
  // 2. CSS
  #portfolio_slider {
       display:none;
       position:absolute;
       width:100%;
       height:auto; // may need to play with this 
       border-bottom:3px solid #CCC;
       top:0px;
       left:0px;
       z-index:99999;
  }
  
  
  // 3. JAVASCRIPT :) 
  A. Make sure you load jQuery library
  B. Place this after the jQuery library (at the end of the head tag on your index.html)
  
  &lt;script type="text/javascript"&gt;
       // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
      $(window).load({   
  
  
           // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
          $('#portfolio_button').bind('click',function(e){   
  
                   // GET THE CURRENT CSS TOP POSITION OF THE PANEL AS AN NUMBER
                   var SliderPos=parseInt( $('#portfolio_slider').css('top'),10);      
  
                  // IF THE PANEL IS OPEN (DOWN)
                 if ( SliderPos &gt; 0 ){
  
                         // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                         // NOTE: IF YOU HAVE JQUERY UI OR THE EASING PLUGIN, YOU CAN CHANGE SWING 
                         $('#portfolio_slider').animate({'top' : '0px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});
  
  
                // IF THE PANEL IS CLOSED (UP)
                 }else{
  
                         // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                         // NOTE: THE TOP POSITION WILL BE EQUAL TO THE HEIGHT OF #PORTFOLIO SLIDER
                         $('#portfolio_slider').animate({'top' : '500px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});
                 };         
  
  
         // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
          e.preventDefault();  
          return false;
      });
  });
  &lt;/script&gt;
  
  
  // ALTERNATIVELY
  jQuery makes this stuff easy. Instead of the JS section above, you can alternatively use the following (less control over the animation)
  &lt;script type="text/javascript"&gt;
  
       // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
      $(window).load({   
           // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
          $('#portfolio_button').bind('click',function(e){   
              // SLIDE TOGGLE THE DIV
               $('#portfolio_slider').slideToggle(500);           
         // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
          e.preventDefault();  
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  however it does not seem to work.</p>
  
  <p>Thanks for reading!</p>