Stylesheets - using display or visibility to implement tabs

Author

using display or visibility to implement tabs

Summercool

2007-10-26, 6:16 am

it seems that we can actually use "display" or "visibility" to
implement tabs. i just wonder if there are pros and cons?

it seems that if we use "display", the browser may need to shrink the
1st tab first, and then redisplay the second and re-flow the things on
the screen, thus causing a time delay.

with visibility, there probably is not such delay...

so is this how you make the big tabs content div's:

<div id="tab1" style="height: 800px">
content 1
</div>

<div id="tab2" style="positive: relative; top: -800px">
content 2
</div>

tab3, tab4 the same way as tab2...

and then just use javascript to toggle the visibility.

thanks.

Ben C

2007-10-26, 6:16 am

On 2007-10-26, Summercool <Summercoolness@XXXXXXXXXX> wrote:
>
> it seems that we can actually use "display" or "visibility" to
> implement tabs. i just wonder if there are pros and cons?
>
> it seems that if we use "display", the browser may need to shrink the
> 1st tab first, and then redisplay the second and re-flow the things on
> the screen, thus causing a time delay.

That sounds about right.

> with visibility, there probably is not such delay...

Exactly, a visibility change will never move anything on the screen so
the browser can avoid a reflow.

> so is this how you make the big tabs content div's:
>
><div id="tab1" style="height: 800px">
> content 1
></div>
>
><div id="tab2" style="positive: relative; top: -800px">
> content 2
></div>
>
> tab3, tab4 the same way as tab2...
>
> and then just use javascript to toggle the visibility.

Something broadly along those lines should be fine. Of course there's
no such property as positive: relative.

2007-10-26, 6:19 pm

"Summercool" <Summercoolness@XXXXXXXXXX> wrote in message
news:1193388088.039266.303790@i13g2000prf.googlegroups.com...
>
> it seems that we can actually use "display" or "visibility" to
> implement tabs. i just wonder if there are pros and cons?

There certainly are.

> it seems that if we use "display", the browser may need to shrink the
> 1st tab first, and then redisplay the second and re-flow the things on
> the screen, thus causing a time delay.

How much delay. A few milliseconds? In my experience (gained from picking up
my browser border and resizing it) my browsers can re-layout a page in about
20 milliseconds.

> with visibility, there probably is not such delay...

How much. Slightly less than a few milliseconds?

> so is this how you make the big tabs content div's:
>
> <div id="tab1" style="height: 800px">

You cannot gaurantee at all that the content of that div will be exactly 800
pixels high.

> content 1
> </div>
>
> <div id="tab2" style="positive: relative; top: -800px">
> content 2
> </div>

So all of your tabs, that is all of the content in each tab, is going to be
exactly 800 pixels high? What if I change my font size?

> tab3, tab4 the same way as tab2...
>
> and then just use javascript to toggle the visibility.

Without javascript (10% or so of your viewers) we will get either a blank
viewport or one with every tab stacked one upon the other.

Why not just make the tabs links like everybody else does, causing a new
page to be retrieved from the server?

--
Richard.