Question

I am currently working on creating a tabbed interface that has one tab of rich flash-like content and the rest of the tabs that are full of simple text. Bit of a long one here but I’ve pretty much exhausted my options and want to let you know what I’ve tried. I feel like there should be a solution to my problem that doesn’t feel like a terrible hack but I’m not sure what else to try.

The Trials
To create my tabs I decided to go with jQuery for convenience sake and was happily plugging along making the usual non UI/Tools tabbed structure. That is to say, like this:

<div class="page">
    <div class="tabs">
        <ul class="nav">
            <li href="#tab_1">Tab one</li>
            <li href="#tab_1">Tab one</li>
        </ul>
    </div>
    <div class="content">
        <div id"tab_1">Stuff</div>
        <div id"tab_2">Words</div>
    </div>
</div>

From here I have all the usual CSS and jQuery business to get this going and was happy with the results. That is, until I tried to add the rich content. It loads just fine and I can’t really complain about that, but I was asked to make it so that the rich content does not reload upon leaving to another tab and returning.

This befuddled me for some time, but after reading jQuery’s documentation on the .hide() and .show() functions it became all too clear what was going on. hide() and show() are equivalent to display = “none” display = “block” and so every time I made these calls my content was being destroyed and needed to be reloaded.

For the sake of clarity I will show you what my jQuery looked like:

$(document).ready(function() {
    var tabContainers = $('div.content > div');   
    tabContainers.hide().filter(':first').show();

    $('div.tabs ul.nav a').click(function () {

    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    //selected is a CSS attribute to highlight the tabs
    $('div.tabs ul.nav a').removeClass('selected');
    $(this).addClass('selected');
    return false;
    }).filter(':first').click();
});

At this point I made some changes to the above code and instead of using show() and hide() on the rich content I began setting the visibility. So now my simple content was using .hide() and .show() since it didn’t need to reset and my rich content was using visibility. Unfortunately now it was all disappearing and reappearing nicely but with a big gap from the rich content page since visibility does not physically remove the content from the page, just it’s visibility.

I then researched some more and discovered the .height() call in jQuery and decided to try to employ it. It worked. I was able to call height() to crush down the div and then reexpand it to fit the current content.

I was thrilled to see this work in both FF and Chrome but then I opened it in IE8. Nothing. The giant gap was still there. Crestfallen I once again turned to the internet and discovered that it was because I was lacking the standard DOCTYPE call at the top of my page and so IE was running in Quirks mode. I made the change and bam, it worked.

Now the fun part, this is actually intended to run in Facebook. I already had some HTML in a php file from a test run and I swapped it out for this new code. I opened up Chrome, FF, and IE and lo and behold Chrome and FF both work; IE, on the other hand, has the same old giant gap that I had just gotten rid of.

The Question
At this point I’m not sure what else to attempt. I was hoping that jQuery Tools Tabs or jQuery UI Tabs might be of some use but they both seem to destroy the content and reload it as well. What I would be most happy with would be to create an interface that didn’t require my resizing the divs like this but at this point I just want something functional to work off of.

Is there any way to either make the resizing work or to make the tabs not destroy the content upon switching to one another? If you look at various Facebook games some of them seem to have the tabbed interface behavior I’m looking for but I’m just not sure how to replicate it. Can anyone point me in a new direction or suggest a fix?

Answer 1

This is from jQuery UI:

…my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

There’s an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

And then hide tabs normally.