Databases
StackOverflow2013
Postsdbo
POJumping Onload jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJumping Onload jQuery
    text
    copied!<p>Basically I have a div at the very top of my site that I want to hide and when you click a button it pushes the whole site down and reveals its contents. Very similar to this <a href="http://nd.edu" rel="nofollow noreferrer">nd.edu</a> (click help center or poplar sites on the right side of the header). I am using jquery to accomplish this. This script works but it is jumpy, since the content in the div has to be accessible if JS is turned off, it has to get the height and then hide it. I'm just looking for a way to make the "drawer" not open than shut when the page is loaded, rather it appears that there is nothing there till you click the link (just like nd.edu). Any help would be great.</p> <p><code>// Quick Links Slider Effect// Define Vars</code> <code>var $links = $('#quick_links');</code> <code>var height = $links.height();</code></p> <p><code>// Set the height of #quick_links to 0 $links.hide().css({height: 0});</code></p> <pre><code>// When slide is click kick of the function $(".slide").click(function(){ // If its visible aniamate to 0 if($links.is(":visible")){ $links.animate({height: "0"}, {duration: 300, complete: function(){ $links.hide(); } }); } // Else animate the height down else { $links.show().animate({height : height}, {duration: 300}); } return false; }); </code></pre> <p>Here is my html and css </p> <pre><code> #quick_links{background:url(../images/drawer_shadow.jpg) bottom left repeat-x #F6F8F7;width:100%; padding-bottom:20px; position:relative; z-index:1;} #quick_links ul{float:left !important;margin:0 20px 0 20px;} #quick_links_button{float:right;background:url(../images/umflint-sprite.png) -430px -132px no-repeat;height:24px;width:101px;text-indent:-9999px;} &lt;div id="quick_links"&gt; &lt;div class="wrapper"&gt; &lt;h3&gt; Quicklinks &lt;/h3&gt; &lt;ul&gt; &lt;li&gt;Stuff Goes Here&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- End Wrapper --&gt; &lt;/div&gt;&lt;!-- End QuickLinks --&gt; &lt;a href="#quick_links" class="slide" id="quick_links_button" name="quick_links_button"&gt;Quick Links&lt;/a&gt; &lt;div id="content"&gt; blah blah blah &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload