jQuery tabs flash (FOUC) when page loads

Question

I have the following website:

http://cassidoo.public.iastate.edu/

I am using JQuery UI Tabs for my menu. When you load the page, there is a flash of the content in the tabs.

I've tried everything from the ui-tabs-hide trick to hiding things in Javascript. Is there a trick I'm missing? What should I do?

Thank you for your help!

Answer 1

I ran into a similar situation and here's how I addressed the issue:

(1.) define a css class called "hide" and set it to "display:none"

(2.) in each div with class "contentpanel", add "hide" right next to it in your markup. this will ensure the page loads with display
none, rather than waiting for javascript to handle it.

(3.) when you create the jquery.ui.tabs selector, use the "tabscreate" method to remove the class "hide" from your content panels. so your selector would look something like this:

  //define tabs instance 
   $( "#tabs" ).tabs({

        create: function( event, ui ) {
           //when tabs are created, remove your class .hide from each content panel
           //so jquery tabs will control when panel content will surface
           $(your contentpanel selector).removeClass(hide);
        }
     //whatever else you need to do
     ....
     ...
     ..
    }); 

To find out more about jQuery UI tabs internal methods, read this:

http://api.jqueryui.com/tabs/

and read

create( event, ui )

Hope this helps.

Chris