These lines were inspired by the "DIV without line breaks" posted by
Johnny Two Dogs on June 22.
I know it is an old issue, but I want to share a few remarks that could
be of interest for many members of this group.
A brief summary is given below. However, you may want to take a look
back at the original posting before continuing.
The problem was the replacement of some-text with some-other-text. Each
piece of text was wrapped in its own div, each pair of divs being
hosted in a column of a three column table. The replacement should
occur at a mouse click on an additional anchor. The replacement itself
would be carried out by hiding or revealing the appropriate div via a
javascript function. A simplified representation of the problem is
given below:
<td><div>some-text</div><div>some-other-text</div></td>
<br>
<a onclick="do-the-swapping">click-here-to-do-the-swap</a>
I am not going to explain the difference between visibility and display
that prompted Johnny's question - there were 12 posts about this at the
time (which makes mine the 13th Yuck!).
Instead I want to question if that complicated structure was really
needed. Let me explain this a little.
If you think of the innerText property that just about any html element
holding text exposes, then that heavy html structure can be reduced to:
<td>some-text<td>
The swap routine's duty would thus be to check if td.innerText equals
or not some-text and replace it with some-other-text accordingly (see
code snippet below).
As far as I know, both Internet Explorer and Netscape do support the
innerText property. For the browsers that do not support it, but at
least support the DOM (why bother if they don't?), one more step is
required.
From DOM perspective (hierarchy), the element holding data (td in this
case) is a node. To capture the text content of the node, one could use
this scheme:
1. get a reference to the node
some-node = document.getElementById('id-of-td-element').firstChild;
2. compare text content of the node with some-text and swap it
accordingly
if some-node.data = some-text then some-node.data = some-other-text
else some-node.data = some-text
The use of the anchors (links) to trigger the swapping action, is a
matter of taste, perhaps a project requirement, and I only want to show
that, if desired, one could get rid of them too, making the html even
lighter.
First, we must provide the user with a clue that something is clickable
in our table. Nothing easier. We could use the onMouseOver event with
some code like this:
<td id="td1"
onMouseOver="javascript:this.style.cursor='hand';" >some-text</td>
But why clutter our html with such mile-long javascript code, when we
could use a very simple css rule instead:
..clickMe {cursor: hand;}
<td id="td1" class="clickMe">some-text</td>
Finally, the triggering of the swapping process itself can be done
using the onClick event:
<td id="td1" onclick="javascript:swap-them();">some-text</td>
These said, here's what I think to be a light solution to Johnny's
problem (doctype and other stuff omitted):
<html>
<head>
<style>
td {cursor: hand;} /* assume only one table in the html file */
</style>
<script>
function swapEm(elem, newValue, oldValue)
{elem.innerText = ( oldValue == elem.innerText )? newValue : oldValue;}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td id="cell1" onclick="javascript:swapEm(this,'Changed 1','Original
1');">Original 1</td>
<td id="cell2" onclick="javascript:swapEm(this,'Changed 2','Original
2');">Original 2</td>
<td id="cell3" onclick="javascript:swapEm(this,'Changed 3','Original
3');">Original 3</td>
</tr>
</table>
</body>
</html>
In the event your boss insists to keep that complicated structure, css
might also help make things easier. Using the className property, one
could create css rules similar with these:
..concealed {display: none;}
..revealed {display: block; visibility: visible;}
<td><div class="revealed">some-text</div><div
class="concealed">some-other-text</div>
and then use the className in the comparison routine. Of course, here
we deal with multiple objects and thus the comparison routine should
look something similar to that posted by RobG, using td.className
instead of div.style.display (this is really a matter of taste,
whichever better suits you).
These said, I hope I gave you something interesting to think about and
wish everybody Happy HTML Programming!
