Help with dynamic table resizing code

Hello,

I'm trying to convert a piece of code that creates a dynamic vertical resizing bar in a table from internet explorer to firefox. It's based on a post from http://blogs.crankygoblin.com/blogs/geoff.appleby/pages/50712.aspx. The main problem I am having is that the layerX and layerY event properties don't work. They're supposed to return the position of the mouse event with respect to the enclosing element. I've set the div element to be "position: absolute" in the css stylesheet so I don't know why this isn't working. I set up a textarea in the code that outputs the layerX value when you move over a table header to illustrate the problem.

Any help would be greatly appreciated.

My javascript code is as follows:

/-----
//resize.js
var sResizableElement = "TH"; //Elements to be resized
var iResizeThreshold = 8;
var iEdgeThreshold = 8;
var iSizeThreshold = 20;
var sVBarID = "VBar";

var oResizeTarget = null; //position and distance moved
var iStartX = null;
var iEndX = null;
var iSizeX = null;
var oAdjacentCell = null;

//Creates VBar on load
function TableResize_CreateVBar() {
var objItem = document.getElementById(sVBarID);
if(!objItem) {
alert("VBar created");
objItem = document.createElement("SPAN");
objItem.id = sVBarID;
objItem.style.position = "absolute";
objItem.style.top = "0px";
objItem.style.left = "0px";
objItem.style.height = "0px";
objItem.style.width = "2px";
objItem.style.background = "silver";
objItem.style.borderleft = "1px solid black";
objItem.style.display = "none";
document.body.appendChild(objItem);
//alert(objItem);
}
}
window.addEventListener("load", TableResize_CreateVBar,0);

function TableResize_GetOwnerHeader(objReference) {
var oElement = objReference;
if(oElement.tagName.toUpperCase() == sResizableElement) {
return oElement; //print alert?
}
return null;
}

function TableResize_GetFirstColumnCell(objTable, iCellIndex) {
var oHeaderCell = objTable.rows[0].cells[iCellIndex];
return oHeaderCell;
}

function TableResize_CleanUp() {
var oVBar = document.getElementById(sVBarID);
if(oVBar) {
oVBar.style.display = "none";
}
iEndX = null;
iSizeX = null;
iStartX = null;
oResizeTarget = null;
oAdjacentCell = null;
return true;
}

function TableResize_OnMouseMove(objTable, event) {
document.getElementById('debug').value += 'Entered OnMouseMove\n';
var objTH = TableResize_GetOwnerHeader(event.target);
//var objTH = objTable.createTHead(objTable, event);
if(!objTH) return;
document.getElementById('debug').value += '\tPASSED objTH\n';
var oVBar = document.getElementById(sVBarID);
if (!oVBar) return;
document.getElementById('debug').value += '\tPASSED oVBar\n';
var oAdjacentCell = objTH.nextSibling;

alert("Testing movement");

document.getElementById('coords').value += "Event.clientX " + event.clientX + "\n";
document.getElementById('coords').value += "Event.layerX " + event.layerX+ "\n";
document.getElementById('coords').value += "offsetWidth " + objTH.offsetWidth+ "\n";
//alert(event.clientX);
//alert(event.layerX);
//alert(objTH.innerHTML);
//alert(objTH.offsetWidth);
// Show the resize cursor if we are within the edge threshold. // && (oAdjacentCell != null)
if(event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) {
objTH.style.cursor = "e-resize";
} else {
document.body.style.cursor = "pointer"; // Change this to ""
}
// We want to keep the right cursor if resizing and
// don't want resizing to select any text elements
if(oVBar.style.display == "inline") {
//oVBar.style.left = event.clientX + document.body.scrollLeft - document.body.clientLeft;
// We have to add the body.scrollLeft in case the table is wider than the view window
// where the table is entirely within the screen this value should be zero...
oVBar.style.left = event.clientX + window.pageXOffset;
document.body.focus(); //window.event?
}
return true;
}

/*
MouseDown event.
This fills the globals with tracking information, and displays the
vertical bar. This is only done if you are allowed to start resizing.
*/
function TableResize_OnMouseDown(objTable, event) {
var oTargetCell = event.target;
if(!oTargetCell) return; // event.currentTarget
var oVBar = document.getElementById(sVBarID);
if(!oVBar) return;

var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
if ((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == "e-resize")) {
iStartX = event.screenX;
oResizeTarget = oHeaderCell;

// Mark the table with the resize attribute and show the resizer VBar.
// We also capture all events on the table we are resizing because Internet
// Explorer sometimes forgets to bubble some events up.
// Now all events will be fired on the table we are resizing.
objTable.setAttribute("Resizing","true");
//objTable.setCapture(); // THIS IS NOT SUPPORTED IN NETSCAPE

// We have to add the body.scrollLeft in case the table is wider than the view window
// where the table is entriely within the screen this value should be zero...
oVBar.style.left = event.clientX + window.pageXOffset;
oVBar.style.top = objTable.parentNode.offsetTop + window.pageYOffset;
oVBar.style.height = objTable.parentNode.offsetHeight;
oVBar.style.display = "inline"; //This is crucial
}
return true;
}

/*
MouseUp event.
This finishes the resize.
*/
function TableResize_OnMouseUp(objTable, event) {
//document.getElementById('debug').value += 'Entered OnMouseUp\n';
// Resize the column and its adjacent sibling if position and size are within threshold values
var oAdjacentCell = null;
var iAdjCellOldWidth = 0;
var iResizeOldWidth = 0;
if(iStartX != null && oResizeTarget != null) {
iEndX = event.screenX;
iSizeX = iEndX - iStartX;

// Mark the table with the resize attribute for not resizing
objTable.setAttribute("Resizing", "false");
if ((oResizeTarget.offsetWidth + iSizeX) >= iSizeThreshold) {
if (Math.abs(iSizeX) >= iResizeThreshold) {
if (oResizeTarget.nextSibling != null) {
oAdjacentCell = oResizeTarget.nextSibling;
iAdjCellOldWidth = (oAdjacentCell.offsetWidth);
} else {
oAdjacentCell = null;
}
iResizeOldWidth = (oResizeTarget.offsetWidth);
oResizeTarget.style.width = iResizeOldWidth + iSizeX;
if ((oAdjacentCell != null) && (oAdjacentCell.tagName.toUpperCase() == sResizableElement)) {
oAdjacentCell.style.width = (((iAdjacentCellOldWidth - iSizeX) >= iSizeThreshold) ? (iAdjCellOldWidth - iSizeX)oAdjacentCell.style.width = iSizeThreshold))
}
}
} else {
oResizeTarget.style.width = iSizeThreshold;
}
}
TableResize_CleanUp();
return true;
}
/------

Here is the HTML file:

/------

<head>

<title>Table Test</title>

<!--<link rel="stylesheet" type="text/css" href="tabletest.css" /> -->
<style type="text/css">
.tablecontainer
{
position: absolute;
}

.mytable
{
table-layout: fixed;
}

.mytable TD, .mytable TH
{
border: solid 1px black;
width: 120px;
}

.mytable TH
{
background-color: #e0e0e0;
}
</style>

<script type="text/javascript" src="tableresize2.js"></script>

</head>

<body>

<div class="tablecontainer">

<table border="0" cellspacing="0" cellpadding="0" class="mytable"
onmousemove="TableResize_OnMouseMove(this,event)"
onmouseup="TableResize_OnMouseUp(this,event)"
onmousedown="TableResize_OnMouseDown(this,event)">
<tr>
<th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
</table>
<TEXTAREA ID="debug" rows="20" cols="20"> Debug text </TEXTAREA>
<TEXTAREA ID="coords" rows="20" cols="20"> Coords </TEXTAREA>
</div>
/-----