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 I wrote 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.

I have tested them in MSIE 4–7, in NS 7, Firefox 1–3, Konqueror 2.2.1, 3.1.1 and 3.5, Opera 6-10, and Chrome. None of these techniques will work in NS 4. (Which is not to say you can’t achieve the effect in NS4. You may have to use those proprietary LAYERS.) Here’s more info on problems.

---

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

Works in NS 6–7, Firefox, MSIE, Konqueror, and Chrome. Doesn’t work in Opera 6, but does work in Opera 7–10.

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 used 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.

Works in NS6–7, Firefox, MSIE, and Chrome. Doesn’t work in Opera 6; works in Opera 7–10.

In Konqueror 2+, it works, but has 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 technique used 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.

This is the only one of these techniques I’ve seen working in Opera 6. Works in all the other modern CSS/JavaScript browsers.

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

---

The technique used 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.

I haven’t got this one working in any browser. Perhaps there are restrictions on the order in which the z-index can be altered.

---

More on problems

Netscape 4.x can’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 arrange for NS 4 to find the element, it won’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 doesn’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 works! But the background color of text is always positioned as though the position were relative.