How to be able to preload jquery contents into hidden tabs for ie browser

Question

The problems im facing is when I use something like jcarousellite inside tabs. It works fine in browsers other than ie. In ie, the carousel loads fine in the active tab, but in the inactive ones it doesnt preload. Basically when you click on a previously inactive tab, it displays nothing until you click outside the tab.

I have narrowed down the problem to this: My tabs use a css style where the inactive tabs set the display to none. This somehow in ie causes whatever jquery that is contained within not to load before hand. If I remove this display: none property, all my carousels show fine, but ofcourse so do all the tabs (i.e. they are no longer hidden when inactive, instead all are shown as overlapping blocks on the page). How can I overcome this issue?

Answer 1

display: hidden

This display property makes the elements render, but makes them 'invisible' to the user.

Answer 2

I have found the solution to this and this may come in handy for anyone who wants to use tabs (with display: none property) where the content requires initialization at page load.

Simply change your hidden tab style in the css as follows:

.tabhide { position: absolute; top: -5000px;

}

I have tried other things such as visibility: hidden or even bottom: -5000px, but this seemed to be best solution to render it properly in ie browsers