Question

I’m trying to have a new layer appear above existing content on my site when a link/button is clicked. I am using jquery – but the code I have doesn’t seem to work as expected.

Here is what I have:

 $(document).ready(function(){   $('#button').click(function () {   $('#showme').insertAfter('#bodytag')   $('#showme').fadeIn(2000); }); 

});

The effect I’m after is to have <div id='showme'>...</div> appear directly after the #bodytag. <div id='showme'>...</div> has a z-index higher than anything else on the site, so it should just appear above the content directly after the #bodytag.

Thanks for the assistance.

Answer 1

It would appear to me that to get the desired effect, the div you are inserting #showme into needs to be position: relative, and #showme should be position: absolute. Absolute positioning will take the element out of the document flow, allowing it to sit above the content.

Also, two tips – $() is a shortcut for $(document), and you can chain jQuery commands:

$().ready(function(){   $('#button').click(function () {     $('#showme').insertAfter('#bodytag').fadeIn(2000);   }); });