View Full Version : Tabbed Content Problem

03-13-2009, 10:17 PM
I am using easytabs (http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange/) for a simple tabbed content box on the front of a site of mine.

I've been testing it out, and there seems to be a brief moment as the page loads at the start where you can see all 4 tabbed boxes on display, before the page renders correctly and only 1 box is shown.

Problem page: http://www.rouletteplanet.com/pokerbanknew/

As you can see, as you load the page or refresh it, all 4 tabbed boxes are visible for a brief moment. The easytabs javascript can be foudn here:


Is there any way around this, so that the other tabbed content does not appear as the page loads?

03-14-2009, 12:57 AM
Would it be possible to delay the loading of a few DIV boxes to prevent them from immediately showing up?

What would be the best way to delay a DIV from loading?

03-14-2009, 09:03 AM
It's actually easy to hide all other divs when the page loads, by setting a display:none; to them and then setting a display:block to the default div, like

#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4 {/*screen.css (line 77)*/

But, it may cause an accessibility issue for those users who have no javascript support in their browser. Thus they are using a progressive enhancement (http://en.wikipedia.org/wiki/Progressive_Enhancement) approach. In the original page, the reason for not getting any such trouble might be due to the lesser contents in those tabs.

You may see the advantage of the above approach, by loading the page after blocking javascript in your browser.