Avoiding Flicker with JQuery Tabs
Posted
by Damon
on Simple Talk
See other posts from Simple Talk
or by Damon
Published on Wed, 07 Apr 2010 14:53:01 GMT
Indexed on
2010/04/07
14:53 UTC
Read the original article
Hit count: 504
I am a huge fan of JQuery because it seems like every time I want to do something it has a plugin that already does it. Adding a tabbed interface to a web page was always quite an annoyance, but JQuery UI offers a pretty descent tabs solution (click here to see it). If you read through the documentation, you'll find that you can create a tabbed interface by calling the tabs() method on an element containing an unordered list. The only problem that I've experienced with the method is that on slower machines you can see the unordered list render out in its original state before being updated into the final tabbed interface. A quick way to fix that issues is to set the CSS display property of the element to none, then call the show() method directly after calling the tabs() method. This keeps the element completely hidden while JQuery sets up the tabs interface and eliminates the flicker.
<SCRIPT type="text/javascript">
$(function()
{
$("#tabs").tabs();
$("#tabs").show();
});
</SCRIPT>
<div id="tabs" style="display:none;">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
<li><a href="#tabs-3">Third Tab</a></li>
</ul>
...
</div>
© Simple Talk or respective owner