Question

I am trying to modify/optimize this template . Amongst other problems, it first loads all the divs and images associated with the bottom thumbnail scroller. then hides the scroller. On my computer, at least, this has the unpleasant affect of showing all the divs to the viewer before hiding them. If you care to scan the code, what is happening is that it creates around 20 divs for each thmumbnail, then calls

$("#thumbnails_wrapper").stop().delay(2000).fadeTo("fast", 0);

Can someone suggest a rather painless way to initially hide all the elements before loading them? I tried using the hidden/visible property but I get the feeling that does not cascade down through all elements of a div.

Answer 1

Maybe just to display:none on #thumbnails_wrapper in your CSS? Then call it when needed using JS?

In your CSS file:

#thumbnails_wrapper {
 display:none;
}

In your javascript file (obviously only called when needed so you could maybe have it in a function):

jQuery("#thumbnails_wrapper").show();

Or in a function:

function showThumbs()
{
    jQuery("#thumbnails_wrapper").show();
}