5

I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.

The main issue I am seeing is with the JQuery tabs that I am using http://docs.jquery.com/UI/Tabs#source

When the page renders, the tabs show one below the other for a second like this:

One 
Two
Three

and then render properly as tabs

Is there a quick and easy way to fix this. Thanks

Gublooo
  • 2,550
  • 8
  • 54
  • 91
  • This is usually down to a style sheet being loaded too slowly or too late. Can you show the head of your HTML document? – Pekka Jun 19 '10 at 08:05

4 Answers4

10

It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.

You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.

Hope this helps!

EDIT:

For the first option, let's say that this is your div containing the tabs:

<div id="tabs">
  ...stuff...
</div>

In your stylesheet, hide #tabs:

#tabs {
    display:none;
}

Then, modify your jQuery UI call like so:

var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});
Evan Nagle
  • 5,133
  • 1
  • 26
  • 24
  • Thanks ewwwyn - if I want to go with the first option - how do I hide the tabs and how will I know the JQuery UI has completed its magic Thanks – Gublooo Jun 19 '10 at 08:19
  • add 'style="display:none"' to your tabs conatianer. Then use jQuery to show them when 'document ready' – thomasfedb Jun 19 '10 at 08:29
  • Yeah. Set the element to display:none initially. Then jQuery UI has a method called "load", which you can call to display your element. I'll edit my post to explain... – Evan Nagle Jun 19 '10 at 08:35
  • Yes, Javascript is obviously the problem. The best way to fix that is to reduce the amount of Javascript done on_load and use static CSS instead. If the page renders slowly on a powerful computer, think what will happen when someone views the page on a low-end mini laptop or cell phone. – PauliL Jun 19 '10 at 09:24
  • Thanks ewwwyn - that fixed the problem - appreciate it – Gublooo Jun 19 '10 at 18:47
  • there should be create event, not load – kajo May 22 '12 at 17:41
2

weirdlover's response almost worked for me (using jQuery 1.5.2), but I had to hook the create event:

var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});

Thanks!

Ed Ruder
  • 578
  • 6
  • 13
0

Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.

If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.

Janick Bernet
  • 20,544
  • 2
  • 29
  • 55
0

Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.

If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.

Other than that, I don't think there's a way to control how the browser rendering works.

Mathiasdm
  • 1,791
  • 14
  • 26
  • CSS isn't the problem here. It's jQuery UI's javascript magic that causes the delay. – Evan Nagle Jun 19 '10 at 08:17
  • Yes, ewwwyn (that's a lot of w's), it appears the issue is javascript in this case. I also mentioned that in the second paragraph. Your post correctly addresses that issue, good post :) No problem, Gublooo. – Mathiasdm Jun 19 '10 at 08:30