Question

I am trying to do a slow reveal on a particular div with an id of ‘contentblock’ on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I’m a complete newbie to this and surprisingly google hasn’t been a whole lot of help.

<script type='text/javascript'>

$(window).onload(function(){
   $('#contentblock').slideDown('slow');
    return false;
 });


</script>

before that I also had the following instead of the window onload line above:

$(document).ready(function(){

But that didn’t have any success either. Can someone help a jQuery newbie out?

Answer 1

First, you’ll need to make sure the element is hidden (or it won’t be shown, since it’s already visible). You can do this in either CSS or JavaScript/jQuery:

#contentblock {
    display: none;
}

Or:

$('#contentblock').hide();

If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user’s browser. If you use JavaScript there’s the problem that the element will likely flicker as it’s first shown and then hidden.

And then call:

$(window).load(function(){
   $('#contentblock').slideDown('slow');
 });

I’ve made two amendments to your jQuery, first I’ve changed onload to load and I’ve also removed the return false, since the load() method doesn’t expect any value to be returned it serves no purpose herein.

For the above jQuery you can use instead:

$(document).ready(function(){
   $('#contentblock').slideDown('slow');
 });