Valid CSS!

Valid XHTML 1.0

HTML table frame vs. CSS border Text-Flip
with CSS and JavaScript to flip through panels of text in a web page

Here are examples of techniques to flip text in a box using CSS and JavaScript.

You’ve seen things on the web that look like this before. The difference between these techniques and the conventional one is that here, the text that apparently changes is really text; in the conventional technique, it is an image file.

In these techniques, the text can be searched, selected, copied, or saved. In some browsers, it can be magnified, for easier reading.

These techniques all seem to work in any newer browser that supports CSS and JavaScript. In years before about 2012, browser performance was spotty. Here’s more info on old problems.

The technique here is to completely replace the text in the table cell by setting its JavaScript innerHTML attribute.

Using innerHTML
This is the first page of text

Although changing the text is programmatically natural, this technique suffers from the fact that the hidden text is only in JavaScript, not in the table itself, so if you view it with a text-only browser, you don’t see the hidden text.

The technique here is to put the text of all the pages into the document at once, but set the CSS display attribute to block for only one, and to none for the others.

Using display
This is the first page of text

The technique here is to put the text of all the pages into the document at once, but set the CSS visibility attribute to visible for only one, and to hidden for the others. However, CSS hidden items still take up space, so the position attribute is set to absolute.

Using visibility
This is the first page of text

Setting the position to absolute has unfortunate consequences, though: the text is no longer implicitly constrained to the table cell.

The technique here is to set the CSS position of the text to absolute, and then make the desired text come to the top by giving it the highest z-index.

Using z-index
This is the first page of text
This is the second page of text
This is the third page of text
This is the fourth page of text

problems in older browsers

I have tested them in MSIE, in Netscape, Firefox, Konqueror, Opera, and Chrome, as well as the Dolphin browser and Boat browser on Android.

None of these techniques worked in NS 4. (Which is not to say you can’t achieve the effect in NS4. You had to use those proprietary LAYERS.)

Netscape 4.x couldn’t access named or id’ed HTML elements unless they’re layers or items in a form. This kind of blows it. For one thing, layers are hard to position within a table. Exceptions: It can find named items if they’re absolutely positioned, and somehow on the top level, as in the mover example. If they’re not on the top, say, they’re in a table cell, it still can’t find them.

Even if you arranged for NS 4 to find the element, it wouldn’t be able to set innerHTML or display.

You can achieve something like this effect using form textarea. However, in the browsers that don’t support the present techniques, you can’t turn off the borders and/or scrollbars in the text area. It ends up looking ugly.

Opera 6 JavaScript did’t allow changing the display property. This is fixed in Opera 7+.

Opera always shows a tooltip of the URL on mouseover on anchor elements, whether or not onmouseover is otherwise defined, and whether or not the URL is bogus (#).

iCab 2.5.2 on the PPC Mac successfully flips the text, but doesn’t size the text correctly. iCab on the 68k Mac gets a stack overflow.

IceBrowser 5.0.6 doesn’t flip the text.

MSIE 4 for Mac worked! But the background color of text is always positioned as though the position were relative.

The InnerHTML technique always worked in Firefox, MSIE, Konqueror, and Chrome. It didn’t work in Opera 6, but does work in Opera 7–12.

The 'display' Didn’t work in Opera 6; works in Opera 7–12. In Konqueror 2+, it worked, but had an ugly bug: if you click on items 1–4, then go back to 1, the text of items 1 and 4 get doubled up in the cell. (Fixed in v. 3.0.3i +)

The 'visibility' techique is the only one of these that worked in Opera 6.