CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Dismissile
Dismissile

Reputation: 33071

jQuery UI - Style Delay on Page Load

I'm using the jQuery UI tabs widget to style my page:

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>

    <div id="tab-1">
       ...
    </div>

    <div id="tab-2">
       ...
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('#tabs').tabs();
    });
</script>

The problem I have is when I first load the page for a brief moment, I see the page unstyled before the jquery tabs function has had a chance to run. What i mean is for less than a second I see an unordered list with links for Tab 1, Tab 2, etc.

Is there a way to get rid of this delay? Should I add the classes to my markup that jQuery UI ends up adding in order to get rid of this?

Upvotes: 3

Views: 1368

Answers (2)

Alon Eitan
Alon Eitan

Reputation: 12025

you could hide your tabs by default and display them after you called the tabs function,

in your HTML:

<div id="tabs" style="visibility:hidden;">

in your javascript code

 $(function() {
    $('#tabs').tabs().show();
});

Upvotes: 1

Dustin Laine
Dustin Laine

Reputation: 38503

The DOM is loaded and then your jQuery is executed, which is the second delay you see. You can add style="display: none" to your tabs element, then:

$(function() { $('#tabs').show(); $('#tabs').tabs(); });

Upvotes: 2

Related Questions