Jquery tabs, unformatted list flashing up after an jQuery HTML reload in Firefox

Question

I am using the latest jQuery Tabs, and all of my tabs (and other content above them) are within a containing Div. There is a form in one of the tabs, and when the form is submitted, it is processed via AJAX, and then the returned HTML replaces the entire containing Div. This returning HTML includes the tabs again.

After the HTML is replaced, I rebind the jQuery functionality to the list:

$('#tabs').tabs( { fx: { opacity: 'toggle' } } );

Having read other questions, I am using class="ui-tabs" on the UL and class="ui-tabs-hide" on the LI, to hide everything before it's formatted.

In IE8, and Chrome this is working fine. However in Firefox, the unformatted list is showing briefly between the HTML refresh and the tabs being formatted (it does very briefly on the first load too).

Any ideas how to avoid this please?

Answer 1

From jQueryUI docs:

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that > this will not degrade gracefully with JavaScript being disabled:

<div id="example" class="ui-tabs">

<div id="a-tab-panel" class="ui-tabs-hide"> </div>

</div>

The class="ui-tabs-hide" should go on each panel, not the tab list items.

This won't necessarily fix the list being unstyled; If you're implementing the above properly and still getting the FOUC, you should hide the list's parent element until you have loaded the new content and tabify'd the list. You could use the $().hide() and .show() methods to do this.

Answer 2

I just had a similar problem, another solution I found that worked for the tabbed navigation is to add the "ui-tabs-nav" class to the <ul> tag in the tab nav, (i.e. <ul class = "ui-tabs-nav"> ), which looks as follows:

<div id="tabs" class="ui-tabs">

<ul class = "ui-tabs-nav">
    <li><a href="x.html" title="ajax_content">Menu item A </a></li>
    <li><a href="x.html" title="ajax_content">Menu item B.</a></li>
    <li><a href="x.html" title="ajax_content">Menu item C</a></li>
    <li><a href="x.html" title="ajax_content">Menu item D</a></li>  

</ul>

The Jquery tab script adds the "ui-tabs-nav" class to the <ul> automatically when the script fires, but by putting it in yourself manually into the html, the relevant css for your tab menu will be inserted, even when there is a delay in the tab script being loaded. Hope this helps!