JQuery popup bookmarks (FOUC) on page load

Question

I have the following website:

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

I am using jQuery UI Tabs for my menu. When you load a page, the tabs have a flash of content.

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

Thank you for your help!

Answer 1

I came across a similar situation, and here is how I solved the problem:

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

(2.) In each div with the "contentpanel" class, add a "hide" next to this in your markup. this will ensure the loading of the display page
none, and not wait for javascript to process it.

(3.) when you create the jquery.ui.tabs selector, use the tabscreate method to remove the hide class from your panel contents. so your selector will 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 learn more about jQuery UI internal methods, read the following:

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

and read

create (event, ui)

Hope this helps.

Chris