Question

I have a div that I am trying to make hidden by default, and then shown with a button click. My code works fine as long as the div is not set to style=”display:none;” As soon as I set this the DIV doesn’t load the style sheet correctly. I think I need some code to initialize the page load when the button is clicked. Here is the jQuery I am using:

jQuery(document).ready(function(){
    jQuery('#overlayHide').live('click', function(event) {        
         jQuery('#overlay').toggle('show');
    });
});

Again, this code works fine as long as I allow the div to load when the page loads. As soon as I try set display:none the CSS looks messed up when I load.

Here is my code:

<div id="overlay" style="display:none;"><iframe  id="contactIframe"  frameborder="0"  vspace="0"  hspace="0"  marginwidth="0"  marginheight="0" width="500"  height="500" scrolling="np"  height="400"  src="http://foobar.com/contact/demo.php">
</iframe></div>


jQuery(document).ready(function(){
    jQuery('#overlayHide').click(function(event) {        
         jQuery('#overlay').toggle('slow');
    });
});

It works fine as long as I don’t set display:hidden, but I need the div to be hidden on page load.

Answer 1

I managed to fix this by displaying the iframe in a separate file, and then using AXAJ to load the separate file into a DIV… Weird.