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

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?

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.

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!

A variation to HeyPops' use of the visibility property, but in your CSS stylesheet: leverage the classes that get added after .tabs() is initialized, such as the .ui-tabs class. Example CSS:

.tab-this { visibility: hidden; }
.tab-this.ui-tabs { visibility: visible; }

And then just add that class (tab-this) to the div that you tab-ify, and any other tabbed content throughout your site.

This does not seem to work all the time. I recommend to use Kelso.b answer rather than the jQuery docs solution. Here is an example.

/* to hide flash styles on tabs pages - in this example customtabs is the parent element */
.customtabs {
  display: none;
}

Then later in jQuery tabs add the show method.

$(function() {
  $( "#tabs" ).tabs({

  });
  $( ".customtabs" ).css("display","inline");
});

This workaround operates much cleaner from what I can see as it also prevents the UL from appearing. Add style="visibility:hidden" to the DIV which contains the UL and all tab panes, like this:

<div id="tabs" style="visibility:hidden">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div>
    <div id="#tab1"></div>
    <div id="#tab2"></div>
    <div id="#tab3"></div>
  </div>
</div>

then when you tab-ify the DIV, make it visible after it's been formatted, like:

$('#tabs').tabs({ options }).css('visibility','visible');

Using visibility:hidden rather than display:none means all the elements inside the tab DIV will have size and position which is not the case with display:none.