How to Display Tabular Data - A New Perspective | 2

[previous][next]

Combining all HTML code together and removing embedded style information:

<style>
    .table-input {
        border:0px solid;
        background-color:transparent;
    }
</style>

<table id="myTable" border="1" width="100%">
<tr>
  <td>name</td>
  <td>age</td>
  <td>comments</td>
</tr>
<tr>
  <td style="width:25%">
    <input colwidth="25" readonly class="table-input" value="Rafael">
  </td>
  <td style="width:25%">
    <input colwidth="25" readonly class="table-input" value="39">
  </td>
  <td style="width:50%">
    <input colwidth="50" readonly class="table-input" value="Comments are very big, we have to scroll 
to see them all. Comments are very big, we have to scroll to see them all. Comments are very big, 
we have to scroll to see them all.">
  </td>
</tr>
</table>

Arrow Keys Scrolling

Firefox has a nice feature that allows setting the cursor in an input control (in spite of being read-only) and moves forward and backwards with left and right arrow keys. Unfortunately, neither IE nor Opera have this feature. A risky alternative would be leaving the input control as a regular one without the readonly property. Risky because regular input controls are meant to type text on them, in contrast to readonly input controls that prevents any typing. This alternative, will force you to code onkeypress or onkeydown events to block any non desirable keys typed by the user, and allow any keys that permit cursor movement, such as left arrow, right arrow, home and end keys. Moreover, making this alternative cross-browser needs extra coding like onpaste event for IE and oninput event for mozilla based browsers.

Mouse Scrolling

If you want to get rid of the problem mentioned above, an easier technique consists of showing arrow images every time the mouse is over table cells, and uses these arrows to scroll the text forwards and backwards. However, if the text fits entirely in the table cell, arrow images shouldnt appear because scrolling is not needed.

How do we determine the length of the displayed text? String length is not equal to length in pixels. (I know you already know this. :)

There is a property called boundingWidth that retrieves the width of the rectangle that bounds the text contained in the input control but it only works in IE.

To know the width of any String, a SPAN element is created and its innerHTML property is set equal to the text of the table cell. Until the browser renders that element, offsetWidth property is always 0. Therefore, the span element is appended to the document body and after getting its width, the span is removed:

var b=getElementsByTagName('body')[0];
var span = document.createElement('span');
span.innerHTML=o.value;
b.appendChild(span);
var len=span.offsetWidth;
b.removeChild(span);

After getting the text width, we can compare it to the input width, and if the text width is shorter than the input width, scroll arrows are not shown.

Text scrolling is straightforward and you might find lots of examples on the Internet. In our case, two images are hidden in the document and repositioned every time the mouse goes over the desired input control.

<img id="left" style="display:none;position:absolute;" src="img_scroll_left.gif" border="0">
<img id="right" style="display:none;position:absolute;" src="img_scroll_right.gif" border="0">

These arrow images are repositioned using getX and getY functions:

 
function getX(o) {
	var lpos = 0;
	if (o.offsetParent) {
		while (o.offsetParent) {
			lpos += o.offsetLeft
			o = o.offsetParent;
		}
	} else if (o.x) {
		lpos += o.x;
	}
	return lpos;
}
function getY(o) {
	var tpos = 0;
	if (o.offsetParent) {
		while (o.offsetParent) {
			tpos += o.offsetTop
			o = o.offsetParent;
		}
	} else if (o.y) {
		tpos += o.y;
	}
	return tpos;
}

 

[previous][next]

Created: June 20, 2006
Revised: August 3, 2006

URL: https://webreference.com/programming/javascript/ne/1