Help with dynamic table resizing code

[dli07]

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/...ges/50712.aspx. I've also read the post on this topic by bggraphics, but he doesn't arrive at a final result. 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 code is as follows:

/-----

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:

/------

[HTML]<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>
[/HTML]/-----

[pbmods]

Heya, dli07.

I don't generally like to rely on layerX and layerY. What I would do is get the mouse coordinates relative to the top-left corner of the document, then subtract the top-left corner of your target element.

Since the top-left corner of the div is not likely to change, you can reliably save these values to a variable to save some CPU cycles.

[dli07]

Thanks so much for your advice pbmods. I actually found an alternative solution which is to set style="position:relative" for each of the th elements. This gets layerX to work for some reason.

Now I when I click on a th border I can see the e-resize bar and I can move it, but the new bar position is not recorded when I release my mouse. I have to click elsewhere in order to get the change to appear and even then, the resizing isn't correct. Apparently, there is some problem with onmouseup. I'm not sure if the onmousedown event is overriding the onmouseup event or if I am doing something else wrong with the firefox event model. Here's my code:

 
// 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);
 
/*
Returns a valid resizable element, even if it contains another element
which was actually clicked otherwise it returns the top body element.
*/
/* function TableResize_GetOwnerHeader(objReference) {
    var oElement = objReference;
    while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
        if(oElement.tagName.toUpperCase() == sResizableElement) {
            return oElement; //print alert?
        }
        oElement = oElement.parentNode;
    }
    return null;
}  */
 
function TableResize_GetOwnerHeader(objReference) {
    var oElement = objReference;
    if(oElement.tagName.toUpperCase() == sResizableElement) {
        return oElement; //print alert?
    }
    return null;
} 
 
/*
Find cell at column iCellIndex in the first row of the table
needed because you can only resize a column from the first row.
by using this, we can resize from any cell in the table if we want to.
*/
function TableResize_GetFirstColumnCell(objTable, iCellIndex) {
    //alert("Entered getFirstColumnCell");
    //alert(iCellIndex);
    //alert(objTable.rows[0])
    //alert(objTable.rows[0].cells[iCellIndex]);
    var oHeaderCell = objTable.rows[0].cells[iCellIndex];
    //alert(oHeaderCell.innerHTML);
    return oHeaderCell;
}
 
function TableResize_CleanUp() {
    document.getElementById('debug').value += 'Entered CleanUp\n';
    var oVBar = document.getElementById(sVBarID);
    if(oVBar) {
        oVBar.style.display = "none";
    }
    iEndX = null;
    iSizeX = null;
    iStartX = null;
    oResizeTarget = null;
    oAdjacentCell = null;
    return true;
}
 
/*
MouseMove event.
On resizable table This checks if you are in an allowable 'resize start' position.
It also puts the vertical bar (visual feedback) directly under the mouse cursor.
The vertical bar may NOT be currently visible, that depnds on if you're resizing.
*/
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;
 
    //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)
    // This is the main thing that checks for whether the mousemoves will be recorded
    if(event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) {
        objTH.style.cursor = "e-resize"; 
    } else {
        document.body.style.cursor = "";  // 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(); // WHAT DOES THIS DO?????
    }
    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) {
    document.getElementById('debug').value += 'Entered OnMouseDown\n';
    var oTargetCell = event.target; 
    //alert(oTargetCell.tagName);
    //alert(oTargetCell.innerHTML);
    if(!oTargetCell) return; // event.currentTarget
    var oVBar = document.getElementById(sVBarID); 
    if(!oVBar) return;
 
/*     if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement) {
        oTargetCell = oTargetCell.parentNode;
    } */
 
    var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    //alert(oHeaderCell);
    //alert(oHeaderCell.innerHTML);
    //alert(oTargetCell.style.cursor);
    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;
        //alert("clientX: " + oVBar.style.left);
        document.getElementById('coords').value += 'clientX: ' + oVBar.style.left + '\n';
        oVBar.style.top = objTable.parentNode.offsetTop + window.pageYOffset;
        //alert("offsetTop: " + oVBar.style.top);
        document.getElementById('coords').value += 'offsetTop: ' + oVBar.style.top + '\n';
        oVBar.style.height = objTable.parentNode.offsetHeight;
        //alert("offsetHeight: " + oVBar.style.height);
        document.getElementById('coords').value += 'offsetHeight: ' + oVBar.style.height + '\n';
        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;
}

Also, out of curiosity, how do I set my code to be javascript instead of text in the CODE tags? Someone else fixed this for me in my first post.

[pbmods]

Heya, dli07.

Also, out of curiosity, how do I set my code to be javascript instead of text in the CODE tags? Someone else fixed this for me in my first post.

Use [code=javascript]. http://www.thescripts.com/forum/faq....ask_a_question

-----

I don't see any removeEventListener() calls in there. How does your script know when you're done dragging the bar? Are you using a global variable?

[dli07]

Hey pbmods,

I'm trying to convert this code from IE so I'm still figuring out how it works: http://blogs.crankygoblin.com/blogs/...ges/50712.aspx. I'm also new to javascript.

Do you mean that I should call removeEventListener("mouseup", TableResize_OnMouseUp, false) at the end of my TableResize_OnMouseUp code after TableResize_Cleanup? (this seems like an illegal call of a function within itself). If I remove the event listener, isn't it true that I won't be able to detect future mouseup events when I want to resize again?

In IE, the coder used releaseCapture and setCapture. I deleted these in the firefox version since I don't know their equivalent. These two functions are probably the source of the problems. I tested it out using alert statements and in the firefox version, the mouseup event is somehow triggered right after the mousedown event, while in the IE version, this is not the case. What do you suggest I do?

/------- A little while later

I think I see what you mean. The original code is too specific for the IE. I'll try to make some drastic changes for firefox.

[pbmods]

Heya, dli07.

I don't have a particularly long leg to stand on because the drag-and-drop library I wrote only works in Firefox. But, here's sort of the general flow of things:

• Call Element::makeDraggable() to assign a mousedown event handler:
  • Clone the element and use a global variable to store it.
  • Hide the original element.
  • Attach a mousemove event handler to window:
    • Change the cloned element's position relative to the mouse cursor.
  • Attach a mouseup event to window:
    • Set original element's position.
    • Destroy cloned element and set global variable to null.
    • Remove window mousemove event handler.
    • Remove window mouseup event handler.

The idea is to remove event handlers whenever possible to avoid slowing down and/or confusing the browser.

Removing an event handler is not the same thing as deleting a function. When you remove the event handler, you are detaching the function from that object, but you can still attach the function to other objects (or even the object you just detached it from).

For an explanation of why this works, check out this article.

Incidentally, you can delete a function from within the function because of the way JavaScript handles variables. When you do this:

delete someVar;

you're not actually *deleting* the variable so much as deleting a reference to that variable.

The variable does get eventually deleted because the JavaScript engine will run 'garbage collection' and free up memory that nobody's using.

Keeping in mind that functions are also variables (objects) in JavaScript, you can do this:

function doSomething() {
    delete doSomething;
}
 

When you call doSomething(), it will delete the variable ('reference') named doSomething (which happens to hold the function that's currently being evaluated). Note that we're not actually deleting the function; we're deleting the reference to that function. The function is still there until the JavaScript garbage collection process runs (which it won't do until the function is finished running).

[pbmods]

Here's a copy of my drag and drop library. It's not really finished, nor is it anywhere near what I want it to be, but I'm much more of a PHP guy than a JavaScript guy these days, so it will have to do.

Note that LB_DragAndDrop.js relies on LB_Core.js to function, which I am not releasing just yet (sorry; there's a piece of it available here, though). So it's not technically functional as is.

But maybe you'll find it useful.

[dli07]

Hey pbmods,

Thanks for the advice. I've rewritten the code, but now I'm having problems with the mouseup event. The mousedown and mousemove events are recorded. But after I release the mouse, nothing happens; it seems that the mouseup event isn't recorded until after I click somewhere in the table. Does this have something to do with the way I'm adding the event listener? I added the listener for mouseup in TableResize_OnMouseDown, but I also added the listener for mousemove in TableResize_OnMouseDown so I don't know if they're interefering with each other?

function TableResize_OnMouseMoveBefore (objTable, event) {
    //document.getElementById('debug').value += 'Entered OnMouseMoveBefore\n';
    var objTH = TableResize_GetOwnerHeader(event.target); if(!objTH) return;  
 
    //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";
    if (event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) {
        objTH.style.cursor = "e-resize"; 
    }
    else {
        objTH.style.cursor = "";
    }
    document.getElementById("table1").addEventListener("mousedown", TableResize_OnMouseDown, false);
    event.stopPropagation();
}
 
function TableResize_OnMouseDown(event) {
    document.getElementById('debug').value += 'Entered OnMouseDown\n';
    var objTable = this;
    var objTH = TableResize_GetOwnerHeader(event.target); if (!objTH) return;
    var oVBar = document.getElementById(sVBarID); if(!oVBar) return;
    var oTargetCell = event.target; if(!oTargetCell) return; // event.currentTarget
    var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    // var oAdjacentCell = objTH.nextSibling.nextSibling;
    // alert(objTH.innerHTML);
    // alert(oAdjacentCell.innerHTML);
 
    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
 
        oVBar.style.left = event.clientX + window.pageXOffset;
        //alert("clientX: " + oVBar.style.left);
        //document.getElementById('coords').value += 'clientX: ' + oVBar.style.left + '\n';
        oVBar.style.top = objTable.parentNode.offsetTop + window.pageYOffset;
        //alert("offsetTop: " + oVBar.style.top);
        //document.getElementById('coords').value += 'offsetTop: ' + oVBar.style.top + '\n';
        oVBar.style.height = objTable.parentNode.offsetHeight;
        //alert("offsetHeight: " + oVBar.style.height);
        //document.getElementById('coords').value += 'offsetHeight: ' + oVBar.style.height + '\n';
        oVBar.style.display = "inline"; // THIS IS CRUCIAL
        document.getElementById("table1").addEventListener("mouseup", TableResize_OnMouseUp, true);
        document.getElementById("table1").addEventListener("mousemove", TableResize_OnMouseMoveAfter, true);  
        event.stopPropagation();
    }
}
 
 
function TableResize_OnMouseMoveAfter(event) {
    document.getElementById('debug').value += 'Entered OnMouseMoveAfter\n';
    var objTH = TableResize_GetOwnerHeader(event.target); if (!objTH) return;
    var oVBar = document.getElementById(sVBarID); if (!oVBar) return;   
 
    if (oVBar.style.display == "inline") {
        oVBar.style.left = event.clientX + window.pageXOffset;
        document.getElementById("coords").value += oVBar.style.left + "\n";
        //document.body.focus(); // WHAT DOES THIS DO?????
    }
    event.stopPropagation();
}
 
function TableResize_OnMouseUp(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;
    var objTable = this;
    var oVBar = document.getElementById(sVBarID); //if (!oVBar) return; 
    oVBar.style.display == "none";
 
    alert(oResizeTarget);
    var oAdjacentCell = oResizeTarget.nextSibling.nextSibling;
    alert(oAdjacentCell);
 
 
    //alert(oResizeTarget);
    /*
    if(iStartX != null && oResizeTarget != null) {
        iEndX = event.clientX;
        //alert(event.clientX);
        iSizeX = iEndX - iStartX;
 
        // Mark the table with the resize attribute for not resizing
        objTable.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();
    document.getElementById("table1").removeEventListener("mousemove", TableResize_OnMouseMoveAfter, true);
    document.getElementById("table1").removeEventListener("mouseup", TableResize_OnMouseUp, true);
    event.stopPropagation();
}
 

I wrote this problem rather hastily, so if you have any questions about what I mean, then please respond.

[dli07]

Apparently, if I delete the oVBar.style.height variable value, then everything works. It's just that I can't see the bar anymore, but at least the code stops.

If I set the default height in createVBar to something else, I still get the same problem. However, in this case, I have to click outside the height of the bar in order to get it to call mouseup. This is very odd.

[dli07]

I've gotten a crude version of the table resizing firefox code to work. The problem is that each reset adds a little to the entire table width. I'm posting it so that other people can look at it and use it in their code or make suggestions or improvements. **** (email removed)

var resizeElement = "TH"; //Elements to be resized
var edgeThreshold = 2;
var rBarID = "rBar";
 
var resizeTarget = null; //position and distance moved
var iStartX = null;
var iEndX = null;
var iSizeX = null;
var adjacentCell = null;
 
//Creates rBar on load 
function TableResize_CreaterBar() {
    var objItem = document.getElementById(rBarID);
    if(!objItem) {
        objItem = document.createElement("DIV");
        objItem.id = rBarID;
        objItem.style.position = "absolute";
        objItem.style.top = "0px";
        objItem.style.left = "0px";
        objItem.style.height = "100px";
        objItem.style.border = "1px solid black";
        objItem.style.display = "none";
        document.body.appendChild(objItem);
    }
}
window.addEventListener("load", TableResize_CreaterBar,0);
 
function TableResize_GetHeader(objReference) {
    var oElement = objReference;
    if(oElement.tagName.toUpperCase() == resizeElement) {
        return oElement; //print alert?
    }
    return null;
}
 
function TableResize_CleanUp() {
    //document.getElementById('debug').value += 'Entered CleanUp\n';
    var rBar = document.getElementById(rBarID);
    if(rBar) {
        rBar.style.display = "none";
    }
    iEndX = null;
    iSizeX = null;
    iStartX = null;
    resizeTarget = null;
    adjacentCell = null;
    return true;
}
 
function TableResize_OnMouseMoveBefore (objTable, event) {
    //document.getElementById('debug').value += 'Entered OnMouseMoveBefore\n';
    var objTH = TableResize_GetHeader(event.target); if (!objTH ) return;
 
    //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";
    if (event.layerX >= (objTH.offsetWidth - edgeThreshold)) {
        objTH.style.cursor = "e-resize";
    }
    else {
        objTH.style.cursor = "";
    }
    return true;
}
 
///// HERE"S THE IMPORTANT CODE
// In order to use layerX, each TH must have style="position: relative";
 
function TableResize_OnMouseDown(objTable, event) {
    //document.getElementById('debug').value += 'Entered OnMouseDown\n';
    var objTH = TableResize_GetHeader(event.target); if (!objTH) return;
    var rBar = document.getElementById(rBarID); if(!rBar) return;
    // adjacentCell = objTH.nextSibling.nextSibling;
    // alert(objTH.innerHTML);
    // alert(adjacentCell.innerHTML);
 
    if ((objTH.tagName.toUpperCase() == resizeElement) && (objTH.style.cursor == "e-resize")) { 
        iStartX = event.clientX;
        resizeTarget = objTH;
 
        rBar.style.left = event.clientX + window.pageXOffset;
        rBar.style.top = objTable.parentNode.offsetTop + window.pageYOffset;
        rBar.style.height = objTable.parentNode.clientHeight;
        rBar.style.display = "inline"; // THIS IS CRUCIAL
    }
    document.getElementById("tabulated_data").addEventListener("mousemove", TableResize_OnMouseMoveAfter, true);  
    document.getElementById("tabulated_data").addEventListener("mouseup", TableResize_HeaderProblem, true); //this handles a problem with clickling on the header and then not exiting OnMouseMoveAfter
    document.getElementById(rBarID).addEventListener("mouseup", TableResize_OnMouseUp, true);
}
 
function TableResize_HeaderProblem (event) {
    //document.getElementById('debug').value += 'Entered HeaderProblem\n';
    document.getElementById("tabulated_data").removeEventListener("mousemove", TableResize_OnMouseMoveAfter, true);
}
 
// doesn't seem like I ever enter OnMouseAfter
 
function TableResize_OnMouseMoveAfter(event) {
    //document.getElementById('debug').value += 'Entered OnMouseMoveAfter\n';
    rBar.style.left = event.clientX + window.pageXOffset;
    //document.getElementById("coords").value += rBar.style.left + "\n"; 
    event.stopPropagation();
}
 
function TableResize_OnMouseUp(event) {
    //document.getElementById('debug').value += 'Entered OnMouseUp\n';
    var iAdjCellOldWidth = 0;
    var iResizeOldWidth = 0;
    var objTable = this;
    var rBar = document.getElementById(rBarID); 
 
    //resize target is already defined in onmousedown
    var adjacentCell = resizeTarget.nextSibling.nextSibling;
    //alert(adjacentCell);
 
    //--------------------------------------
    // set the width on resizeTarget
    // the distance that resizeTarget moves is iStartX+iEndX
    var iEndX = event.clientX;
    // iStartX is already defined
    var distanceMoved = iEndX - iStartX;
    var newPosition = iStartX + distanceMoved;
    var oldCellWidth = resizeTarget.offsetWidth;
    //document.getElementById("coords").value += "iStartX " + iStartX + "\n";
    //document.getElementById("coords").value += "iEndX " + iEndX + "\n";
    //document.getElementById("coords").value += "oldCellWidth " + oldCellWidth + "\n"
    resizeTarget.style.width = oldCellWidth + distanceMoved;
    //document.getElementById("coords").value += "newCellWidth " + newCellWidth + "\n"; 
 
    //-------------------------------------
    // set the width on oAdjacent Cell
    // the distance that the adjacentCell moves is 
    var oldAdjacentWidth = adjacentCell.offsetWidth;
    adjacentCell.style.width = oldAdjacentWidth - distanceMoved;
 
    document.getElementById("tabulated_data").removeEventListener("mousemove", TableResize_OnMouseMoveAfter, true);
    document.getElementById(rBarID).removeEventListener("mouseup", TableResize_OnMouseUp, true);
    event.stopPropagation();
    TableResize_CleanUp();
}
 

 
<!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
 
<head>
 
<title>Table Test</title>
 
<!-- <link rel="stylesheet" type="text/css" href="tabletest.css" />  -->
<style type="text/css">
.tablecontainer
{
    position: absolute;
    width: 100%;
    display: block; 
}
 
.mytable
{
    table-layout: fixed; 
    width: 100%;    
}
 
.mytable TD, .mytable TH
{
    position: relative;
    border: solid 1px black;
    width: 120px;
}
 
.mytable TH
{
    background-color: #e0e0e0;   
}
</style>
 
<script type="text/javascript" src="tableresize4.js">
 
</script>
 
</head>
 
<body>
 
<div class="tablecontainer" > 
    <table id="tabulated_data" border="0" cellspacing="0" cellpadding="0" class="mytable"
    onmousemove="TableResize_OnMouseMoveBefore(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="30"> </TEXTAREA>
    <TEXTAREA ID="coords" rows="20" cols="30"> </TEXTAREA>
</div>
 
</body>
 
</html>