Hi All
Firstly, apologies if the wording of this post sin’t too clear - it’s 1am in the UK and I’ve been trying to solve this problem since lunchtime so my brain’s in a bit of a mess.
I’m using jQuery along with th UI plugin to create some tabs. I’ve got 4 ‘fragments’ (i.e. 4 tabs).
In FF & Opera everything works 100% fine.
However, in IE (6 and 7) there seems to be a delay between the page content loading, and the script being run. When viewing the page, there is a (very short) ‘flicker’ or time delay - some of the content from other tabs is clearly visible for a fraction of a second before being hidden. Which suggests there’s a time delay between the page loading and the script being run - and hence the content is momentarily visible before the script and CSS kick in to arrange everything into tabs.
I set up a test page and found that if there is minimal content on the page then the problem doesn’t occur - but as soon as some images are put into the page then the flicker is visible. Again this suggests that the bigger page means there’s a bigger delay between the content being displayed and the script kicking in?
I’ve spent hours on Google trying to solve this, and I’ve found quite a few posts about jQuery’s $(document).ready function being a bit too slow - although nothing I’ve read has offered a way of solving the problem, and most of it refers to older versions of jQuery, saying that the problem is ‘due to be fixed in version 1.2’. I’m using the latest version (1.2.6 I think).
I would link to the test page but my client’s quite sensitive about everything being private - will speak to him tomorrow to see if he’s happy with me posting a small test page. In the meantime, here is the code I’m using:
<head>
<!--loading stylesheet-->
<link rel="stylesheet" href="css/flora.css" type="text/css" media="screen" title="Flora (Default)">
<!--loading libraries etc -->
<script src="SITEPOINT WONT LET ME PUBLISH LINKS YET BUT THIS JUST LEADS TO THE LATEST JQUERY LIBRARY"></script>
<script type="text/javascript" src="DITTO - LINK TO LATEST UI CORE PLUGIN JS"></script>
<script type="text/javascript" src="LINK TO UI TABS JS"></script>
<!-- the script -->
<script>
$(document).ready(function(){
$("#example > ul").tabs();
});
</script>
</head>
As you can see, I’ve based the test page around the files used in the jQuery documentation and linked directly to their code (only temporary whilst I try resolve this problem, obvoiusly)
ANY suggestions, thuoghts, advice, ANYTHING would be absolutely great - it seems like this has been a problem for a few people before but I’ve not yet found out how to fix it - I’m going mad!
Thanks in advance
Gavin