JQuery Tabs - Styling issue on page content load

Question

First tab on my page has a lot of content, including text and pictures.

This probably causes visual issue:

Once user loads the page, for a second, he will see regular html list instead of styled tabs with background.

Something like this:

Tab One
Tab Two
Tab Three

All javascripts and css are loaded on top of the page in head section.

Does anyone know any solution to this issue?

Thanks in advance!

<script src="/js/jquery.ui/jquery-1.3.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/ui.tabs.css" type="text/css">

<script src="/js/jquery.ui/ui/ui.core.js" type="text/javascript"></script>
<script src="/js/jquery.ui/ui/ui.tabs.js" type="text/javascript"></script>

        <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>Tab One</span></a></li>
                <li><a href="#fragment-2"><span>Tab Two</span></a></li>
                <li><a href="#fragment-3"><span>Tab Three</span></a></li>
            </ul>
            <div id="fragment-1">

              !!!!!! A lot of html code and pictures here !!!!!!

            </div>
            <div id="fragment-2">
               some text 2
            </div>
            <div id="fragment-3">
               some text 3
            </div>

        </div>

Have you set in your css for your ul to have list-style-type : none; ? — Ali Habibzadeh
– Ali Habibzadeh, Commented May 3, 2010 at 19:13
if you have alot of html specially loaded with ajax you wont have much of a choice except to try the to style things similar to how it would look after the js has done its work. its always best to put the css first and after that link the scripts. whatever you do, don't hide things with css and make them appear with JS unless you are sure no one with any disability will view your page. or that you do not want to support people with no js — Ali Habibzadeh
– Ali Habibzadeh, Commented May 3, 2010 at 19:17
No XGreen, I didn't set list-style-type : none, since I need list items to look like tabs right away. I will use the idea to apply inline css for list items. Thanks! — Kelvin
– Kelvin, Commented May 3, 2010 at 19:46

Christian Studer · Accepted Answer · 2010-05-03 19:25:02Z

1

Don't load all the content at once. The jQuery UI tabs have the capability of loading additional content by AJAX.

Alternative hide the content first, and display it by jQuery later.

answered May 3, 2010 at 19:25

Christian Studer

25.6k6 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kelvin Over a year ago

Thanks for the comment Christian. The idea was no to use AJAX to load content, but to load it all at once. Otherwise your suggestion would work too.

Tomalak · Accepted Answer · 2010-05-03 19:18:17Z

0

The second the user sees a regular list is the amount of time jQuery and the tabs plugin need to initialize themselves. You will not be able to do much about that time.

However, you can style the <li> elements yourself in a way that makes them look good right from the start.

Open a browser window and wait until the tabs appear correctly. Now open developer tools and find out which CSS classes are assigned by the tabs extension to the <ul>/<li>/<div> elements.

Assign these classes right in the base HTML. Done.

answered May 3, 2010 at 19:18

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Comments

RDK · Accepted Answer · 2012-09-24 09:53:17Z

0

Try it:

$(function() {
  $("#container-1").tabs();
});

answered Sep 24, 2012 at 9:53

RDK

4,5702 gold badges23 silver badges29 bronze badges

1 Comment

Fad Over a year ago

Don't just post code as an answer. Try to give some explanation too.

Collectives™ on Stack Overflow

JQuery Tabs - Styling issue on page content load

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related