JavaScript not beign executed due to parent div being hidden on page load?

Question

Hi,

I'm using the jQuery GalleryView plugin. I've use the plugin on one page and contained it in a div with the appropriate code which sends the div's id to the external GalleryView .js file.

I'm also using jQuery to hide the div on document ready, so the users can toggle the visibility, but for some reason when the div is hidden innitially, the gallery does not load correctly. I believe this may be because the script inside the code is not being called due to it's hidden status.

I hope I have explained this clearly enough. Does anyone have any ideas?

The plugin home page can be found here or I believ the jQuery page is more up to date but not as well documented.

Answer 1

http://docs.jquery.com/Plugins/livequery

Answer 2

The problem is that js does not "see" the content of elements with display: none;

The easiest solution: use position hiding instead of display: none;

Html:

<div class="hidden">...</div>

Css:

.hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

And in js .addClass('hidden') and .removeClass('hidden') to hide or show the element

In this case this element will be "visible" for js and images to load, but hidden from user.