Grow your CSS skills. Land your dream job.

Hide Divs until Page Loads

  • # July 9, 2008 at 7:08 pm

    Hello,

    After seeing Chris’s video on using jQuery (great job BTW), I am using the jquery plugin fadein effect. It is a pretty cool effect for using tabs and can be found here http://stilbuero.de/jquery/tabs_3/. Everything works well. The only catch is that my page is pretty hefty due to the content of the tabs and takes a few seconds to load. While the page is loading users see all content without being listed in nice and neat tabs. So my question is: Is there a way to not load sayTabs 2-5, until Tab 1 is loaded? Essentially hide the Divs until the div before it has been loaded? This would allow my users to at least view tab 1 looking as it should. Then hopefully before they move on to next tab, those would have loaded in the background already.

    I know that jQuery’s opening argument is based off of "when the DOM is ready..", and I believe that is how all JS works. So I think that would rule out jQuery as a solution. Is this something that can be done with a combo CSS/ PHP? If so, how?

    I really appreciate your thoughts.

    Thank you,
    John

    # July 9, 2008 at 8:37 pm

    I am probably not quite skilled enough in jQuery to answer this question, but I’ll just let you know how I would do it if I was faced with this and needed a solution quick…

    Each tab can have a unique ID, so I would bind a click even to that tab which would then go and grab the HTML (from an external HTML file), and fill the corresponding DIV. That way all the tabs (except the first default tab) would be empty on page load and only fill up when the tab is clicked. The relevant jQuery functions being .click and .html

    This isn’t an ideal solution because of a) accessibility with JS off b) search engine indexing c) direct link ability to different tabs. But.. it’s how I would stop-gap the solution until I could figure out a better way.

    I think this is generally referred to as "lazy loading" and I know of some jQuery sliders that offer it, so maybe you can find tabs that do it also…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".