Help with Dynamic Column Resizing in Firefox

[bgraphics2031]

I'm trying to get this iframe to dynamically resize by dragging a vertical bar, but it's not working in Mozilla (It originally worked in IE but I've been trying to port it over). Any help will be appreciated.

Here's the 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;
 
function TableResize_CreateVBar() //Creates VBar on load
{
    var objItem = document.getElementById(sVBarID);
    //alert(objItem);
 
    if(!objItem)
    {
        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) //gets the TH
{
    var oElement = objReference;
    while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY")
    {
        if(oElement.tagName.toUpperCase() == sResizeableElement)
        {
            return oElement; //print alert?
        }
 
        oElement = oElement.parentNode;
        //alert(oElement);
    }
 
    return null;
}
 
function TableResize_GetFirstColumnCell(objTable, iCellIndex)
{
    var oHeaderCell = objTable.rows[0].cells[iCellIndex];
    //alert(oHeaderCell);
    return oHeaderCell; //alert?
 
}
 
function TableResize_CleanUp()
{
    var oVBar = document.getElementById(sVBarID);
 
 
    if(oVBar)
    {
        oVBar.style.display = "none";
    }
 
    iEndX = null;
    iSizeX = null;
    iStartX = null;
    oResizeTarget = null;
    oAdjacentCell = null;
 
    //alert(oVBar);
    return true;
}
 
function TableResize_OnMouseMove(objTable, event)
{
    var objTH = null;
 
    objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
    //alert(objTH);
 
    if(!objTH)
        return;
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
 
    if (!oVBar)
        return;
 
    var oAdjacentCell = objTH.nextSibling;
 
 
    if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
    {
        objTH.style.cursor = "e-resize"; //find correct property
    }
    else
    {
        if(objTH.style.cursor)
        {
            objTH.style.cursor = objTH.style.cursor;
        }
        else
        {
            objTH.style.cursor = "e-resize";
        }
    }
 
    if(oVBar.style.display == "inline")
    {
        oVBar.style.left = window.event.clientX + document.body.scrollLeft;
        document.selection.empty(); //window.event?
    }
return true
}
 
function TableResize_OnMouseDown(objTable, event)
{
    var oTargetCell = event.target;
    //alert(oTargetCell);
 
    if(!oTargetCell)
        return;
 
    if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
    {
        oTargetCell = oTargetCell.parentNode;
 
    }
    //alert(objTable);
    var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    //alert(oHeaderCell);
 
    if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == "e-resize"))
    {
        iStartX = event.screenX;
        oResizeTarget = oHeaderCell;
        objTable.setAttribute("Resizing","true");
        //Set Capture?
 
        oVBar.style.left = event.clientX + document.body.scrollLeft;
        oVBar.style.top = objTable.parentNode.offsetTop + objTable.offsetTop;
        oVBar.style.height = objTable.parentNode.offsetHeight;
        oVBar.style.display = "inline";
    }
    //alert(objTable.offsetTop);
    return true;
}
 
function TableResize_OnMouseUp(objTable, event)
{
    var oAdjacentCell = null;
    var iAdjCellOldWidth = 0;
    var iResizeOldWidth = 0;
 
    if(iStartX != null && oResizeTarget != null)
    {
        iEndX = event.screenX;
        iSizeX = iEndX - iStartX;
 
        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's the HTML:

<!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" />
<script type="text/javascript" src="libs/tableresize.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><iframe id="left_frame" name="left_frame" src=""  frameborder=0 ></iframe></th>
<th><iframe id="right_frame" name="right_frame" src="" frameborder=0 ></iframe></th>
</tr>
 
</table>
</div>
 
</body>
</html>
 
 

[pbmods]

Heya, bgraphics2031. Welcome to TSDN!

I'm trying to get this iframe to dynamically resize by dragging a vertical bar, but it's not working in Mozilla (It originally worked in IE but I've been trying to port it over). Any help will be appreciated.

What's not working about it?

I've had problems building a drag & drop library that centered around attaching the mousemove event to the window (works) rather than the dragged element (not work so well). Without knowing more about why it's not working, that's about the best I can offer.

[bgraphics2031]

Hi! Thanks for your response. Sorry for not being more specific. In Mozilla (Firefox) I cannot resize the column. It created the vertical bar (VBar) but it doesn't seem to recognize the event that I want to drag the bar? I'm new to JS and looked it up extensively but come to a dead end. Thanks!

[pbmods]

It doesn't seem to recognize the event that I want to drag the bar? I'm new to JS and looked it up extensively but come to a dead end.

Here's what I would do:
- Create a textarea somewhere on your page and give it some kind of ID. For the purposes of this example, we'll call it 'debug'.
- In each of your event handlers, call

document.getElementById('debug').value += 'MOUSEMOVE\n';
 

Or whatnot, depending on which function that line is in.

Then run your script, and you should be able to get an idea of where it stops working based on the text in your textarea.

[bgraphics2031]

Okay, is this what you mean?

<!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" />
<script type="text/javascript" src="libs/libdetect.js"></script>
<script type="text/javascript" src="libs/resize_iframe.js"></script>
<script type="text/javascript" src="libs/tableresize.js"></script>
 
 
</head>
 
<body>
 
 
<div class="tablecontainer">
<table border="0" cellspacing="0" cellpadding="0" class="mytable"
onmousemove="TableResize_OnMouseMove(this, event);document.getElementById('debug').value += 'MOUSEMOVE\n';"
onmouseup="TableResize_OnMouseUp(this, event);document.getElementById('debug').value += 'MOUSEMOVE\n';"
onmousedown="TableResize_OnMouseDown(this, event);document.getElementById('debug').value += 'MOUSEMOVE\n';">
 
<tr>
<th><iframe id="left_frame" name="left_frame" src=""  frameborder=0 onload="resize_iframe()"></iframe></th>
<th><iframe id="right_frame" name="right_frame" src="" frameborder=0 onload="resize_iframe()"></iframe></th>
</tr>
 
</table>
<TEXTAREA NAME="debug" ROWS="10" COLS="40">
Displayed Text
</TEXTAREA>
</div>
 
 
 
</body>
</html>

I just want to make sure I understand correctly what you're saying =)

[pbmods]

I just want to make sure I understand correctly what you're saying =)

That looks about right.

When I was debugging my drag-and-drop script, I got:

MOUSEDOWN
MOUSEMOVE
MOUSEUP

I.e., only caught mousemove once, even though it should be firing a few hundred times a second.

If you got a whole buncha MOUSEMOVEs, though, then the problem would probably be either getting the correct coordinates of the mouse event (very much a pain in IE, so should be no problem in FireFox) or setting the position/size of the target elements.

[bgraphics2031]

Yeah, I'm getting a buncha MOUSEMOVEs in the textarea everytime I click on the resizing bar.

I guess this is where I have to drill down and figure out what's not working correctly.

function TableResize_OnMouseMove(objTable, event)
{
    var objTH = null;
 
    objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
    //alert(objTH);
 
    if(!objTH)
        return;
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
 
    if (!oVBar)
        return;
 
    var oAdjacentCell = objTH.nextSibling;
    //alert(oAdjacentCell);
 
 
    if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
    {
        document.body.style.cursor = "e-resize"; //find correct property
    }
    else
    {
        if(document.body.style.cursor)
        {
            document.body.style.cursor = document.body.style.cursor;
        }
        else
        {
            document.body.style.cursor = "e-resize";
        }
    }
 
    if(oVBar.style.display == "inline")
    {
         oVBar.style.left = event.clientX + document.body.scrollLeft;
        document.selection.empty(); //window.event?
    }
 
return true
}

[pbmods]

if(document.body.style.cursor)
        {
            document.body.style.cursor = document.body.style.cursor;
        }
 

Alright. I give. What's this code do?

        document.selection.empty(); //window.event?
 

In Firefox / other browsers, use document.body.focus().

oVBar.style.left = event.clientX + document.body.scrollLeft;
 

Check out this guy:

mousePosition: function() {
        var x, y;
        if(this.pageX) {
                x = this.pageX;
                y = this.pageY;
        } else {
 
            /****************
            //
            //    IE uses clientX, which represents the cursor's position relative to the top-left corner of the browser view... but doesn't take into account how far down the page the User may have scrolled.  Since all other aspects of moving stuff around uses the position from the top left corner of the document OBJECT, this is quite possibly the most useless implementation of mouse event I've ever come across.
            //
            //    But really, I'm not bitter.
            */
            x = this.clientX + document.body.scrollLeft - document.body.clientLeft;
            y = this.clientY + document.body.scrollTop - document.body.clientTop;
        }
.
.
.
 

[EDIT: This function extends an Event object (incidentally, similarly to the way prototype.js does it). You can't modify the Event prototype in some browsers, however, so we have to do it on a per-event basis. But that's why there's a bunch of {this}s and no event argument, if you were curious.]

There's more to this particular function; it then checks for an align property and optionally returns a value relative to a given corner or center of the target element.

But this is the basic code that I use that seems to work in every browser so far.

And yes, I have a LOT of comments like that in my code :)

[bgraphics2031]

If I haven't said, "Thank you pbmods" yet, where are my manners =X You're the only one who's taken an interest in helping me figure this out.

I'm still working out the code trying to make it work in Mozilla, and this is what i have so far with your suggestions:

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;
 
function TableResize_CreateVBar() //Creates VBar on load
{
    var objItem = document.getElementById(sVBarID);
    //alert(objItem);
 
    if(!objItem)
    {
        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) //gets the TH
{
    var oElement = objReference;
    while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY")
    {
        if(oElement.tagName.toUpperCase() == sResizableElement)
        {
            return oElement; //print alert?
        }
 
        oElement = oElement.parentNode;
 
    }
    //alert(oElement);
    return null;
}
 
function TableResize_GetFirstColumnCell(objTable, iCellIndex)
{
    var oHeaderCell = objTable.rows[0].cells[iCellIndex];
    //alert(objTable.rows[0].cells[iCellIndex]);
    return oHeaderCell; //alert?
 
}
 
function TableResize_CleanUp()
{
    var oVBar = document.getElementById(sVBarID);
 
 
    if(oVBar)
    {
        oVBar.style.display = "none";
    }
 
    iEndX = null;
    iSizeX = null;
    iStartX = null;
    oResizeTarget = null;
    oAdjacentCell = null;
 
    //alert(oVBar.style.display);
    return true;
}
 
function TableResize_OnMouseMove(objTable, event)
{
    var objTH = null;
 
    objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
    //alert(objTH);
 
    if(!objTH)
        return;
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
 
    if (!oVBar)
        return;
 
    var oAdjacentCell = objTH.nextSibling;
    //alert(objTH.clientWidth);
 
 
    if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
    {
        document.body.style.cursor = "e-resize"; //find correct property
    }
    else
    {
 
        document.body.style.cursor = "pointer";
    }
 
    if(oVBar.style.display == "inline")
    {
         oVBar.style.left = event.clientX + document.body.scrollLeft;
        document.body.focus();
    }
//alert(event.clientX + document.body.scrollLeft);
return true
}
 
function TableResize_OnMouseDown(objTable, event)
{
    var oTargetCell = event.currentTarget;
    //alert(oTargetCell);
 
    if(!oTargetCell)
        return;
 
    if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
    {
        oTargetCell = oTargetCell.parentNode;
 
    }
    //alert(oTargetCell);
    var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    //alert(oHeaderCell);
 
    if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == "e-resize"))
    {
        iStartX = event.screenX;
        oResizeTarget = oHeaderCell;
        objTable.setAttribute("Resizing","true");
        //Set Capture?
 
        document.getElementById(sVBarID).style.left = document.body.scrollLeft - document.body.clientLeft;
        document.getElementById(sVBarID).style.top = objTable.parentNode.offsetTop + objTable.offsetTop;
        document.getElementById(sVBarID).style.height = objTable.parentNode.offsetHeight;
        document.getElementById(sVBarID).style.display = "inline";
    }
    //alert(document.getElementById(sVBarID).style.display);
    return true;
}
 
function TableResize_OnMouseUp(objTable, event)
{
    var oAdjacentCell = null;
    var iAdjCellOldWidth = 0;
    var iResizeOldWidth = 0;
 
    if(iStartX != null && oResizeTarget != null)
    {
        iEndX = event.screenX;
        iSizeX = iEndX - iStartX;
 
        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;
 
}

I have more to change, but just wanted to show you that I'm listening to you.

[bgraphics2031]

pbmods here what i've modified since the last post. Can you please take a look at it and tell me if you see anything wrong? It still doesn't work I don't know how it make it work ='(

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;
 
function TableResize_CreateVBar() //Creates VBar on load
{
    var objItem = document.getElementById(sVBarID);
    //alert(objItem);
 
    if(!objItem)
    {
        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) //gets the TH
{
    var oElement = objReference;
    while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY")
    {
        if(oElement.tagName.toUpperCase() == sResizableElement)
        {
            return oElement; //print alert?
        }
 
        oElement = oElement.parentNode;
        //alert(oElement);
 
    }
    //alert(oElement);
    return null;
}
 
function TableResize_GetFirstColumnCell(objTable, cellIndex)
{
    var oHeaderCell = document.body.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('*')[0];
    //var oHeaderCell = objTable.rows[0].cells[0];
    //alert(objTable.cells[cellIndex]);
    //var cellIndex = objTable.rows[0].cells[0];
    //alert(cellIndex);
    return oHeaderCell; //alert?
 
}
 
function TableResize_CleanUp()
{
    var oVBar = document.getElementById(sVBarID);
 
 
    if(oVBar)
    {
        oVBar.style.display = "none";
    }
 
    iEndX = null;
    iSizeX = null;
    iStartX = null;
    oResizeTarget = null;
    oAdjacentCell = null;
 
    //alert(oVBar.style.display);
    return true;
}
 
function TableResize_OnMouseMove(objTable, event)
{
    var objTH = null;
 
    //objTH = TableResize_GetOwnerHeader(objTable, event);
    objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
    //alert(objTH);
 
    if(!objTH)
        return;
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
 
    if (!oVBar)
        return;
 
    var oAdjacentCell = objTH.nextSibling;
    //alert(objTH.clientWidth);
 
 
    if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
    {
        document.body.style.cursor = "e-resize"; //find correct property
    }
    else
    {
 
        document.body.style.cursor = "pointer";
    }
 
    if(oVBar.style.display == "inline")
    {
         oVBar.style.left = event.clientX + document.body.scrollLeft - document.body.clientLeft;
        document.body.focus();
    }
//alert(event.clientX + document.body.scrollLeft);
return true
}
 
function TableResize_OnMouseDown(objTable, event)
{
    var oTargetCell = event.currentTarget;
    //alert(oTargetCell);
 
    if(!oTargetCell)
        return;
 
    if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
    {
        oTargetCell = oTargetCell.parentNode;
 
    }
    //alert(oTargetCell);
    var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    alert(oTargetCell.cellIndex);
 
    if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == "e-resize"))
    {
        iStartX = event.screenX;
        oResizeTarget = oHeaderCell;
        objTable.setAttribute("Resizing","true");
        //Set Capture?
 
        oVBar.style.left = document.body.scrollLeft - document.body.clientLeft;
        oVBar.style.top = objTable.parentNode.offsetTop + objTable.offsetTop;
        oVBar.style.height = objTable.parentNode.offsetHeight;
        oVBar.style.display = "inline";
    }
    //alert(document.body.scrollLeft - document.body.clientLeft);
    return true;
}
 
function TableResize_OnMouseUp(objTable, event)
{
    var oAdjacentCell = null;
    var iAdjCellOldWidth = 0;
    var iResizeOldWidth = 0;
 
    if(iStartX != null && oResizeTarget != null)
    {
        iEndX = event.screenX;
        iSizeX = iEndX - iStartX;
 
        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;
 
}

[pbmods]

Since your debug textarea was showing events properly, the problem must be something about your onmousemove handler.

function TableResize_OnMouseMove(objTable, event)
{
    var objTH = null;
 
    //objTH = TableResize_GetOwnerHeader(objTable, event);
    objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
    //alert(objTH);
 
    if(!objTH)
        return;
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
 
    if (!oVBar)
        return;
 
    var oAdjacentCell = objTH.nextSibling;
    //alert(objTH.clientWidth);
 
 
    if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
    {
        document.body.style.cursor = "e-resize"; //find correct property
    }
    else
    {
 
        document.body.style.cursor = "pointer";
    }
 
    if(oVBar.style.display == "inline")
    {
         oVBar.style.left = event.clientX + document.body.scrollLeft - document.body.clientLeft;
        document.body.focus();
    }
//alert(event.clientX + document.body.scrollLeft);
return true
}

Since you're not getting an error, your function must either be returning prematurely, or else it's not changing anything visible.

What I would do to debug this is to continue using that textbox, but output more specific information:

    
    if(!objTH)
        return;
 
    document.getElementById('debug').value += '\tPASSED objTH\n';
 
    var oVBar = document.getElementById(sVBarID);
    //alert(oVBar);
    
    .
    .
    .
    
    if (!oVBar)
        return;
 
    document.getElementById('debug').value += '\tPASSED oVBar\n';
 
    var oAdjacentCell = objTH.nextSibling;
    //alert(objTH.clientWidth);
    
    .
    .
    .
    {
 
        document.body.style.cursor = "pointer";
    }
 
    var origDisp = oVBar.style.display;
    var origLeft = oVBar.style.left;
 
    if(oVBar.style.display == "inline")
    {
        oVBar.style.left = event.clientX + document.body.scrollLeft - document.body.clientLeft;
        document.body.focus();
    }
 
    document.getElementById('debug').value += '\toVBar is ' + origDisp + '\nLeft was ' + origLeft + ', now ' + oVBar.style.left + '\n';
 
 //alert(event.clientX + document.body.scrollLeft);
return true;
}
 

Now all that's to do is to check what shows up in the debug textarea and figure out where your script isn't doing what it's supposed to.

[bgraphics2031]

Since your debug textarea was showing events properly, the problem must be something about your onmousemove handler.



Since you're not getting an error, your function must either be returning prematurely, or else it's not changing anything visible.

What I would do to debug this is to continue using that textbox, but output more specific information:

Now all that's to do is to check what shows up in the debug textarea and figure out where your script isn't doing what it's supposed to.

Thanks a lot pbmods! I think I have it working now, just some minor tweaks are needed. You were a great help to a js newbie like me.

[leenadiwan]

Thanks a lot pbmods! I think I have it working now, just some minor tweaks are needed. You were a great help to a js newbie like me.

bgraphics2031, can you please share the code that works in FF as well?
I checked your site and http://blogs.crankygoblin.com/blogs/geoff.appleby/archive/2005/02/09/50712.aspx and it may help me if it works in FF too.

[dli07]

bgraphics2031, can you please share the code that works in FF as well?
I checked your site and http://blogs.crankygoblin.com/blogs/geoff.appleby/archive/2005/02/09/50712.aspx and it may help me if it works in FF too.

Yeah, bgraphics2031, it would be great if you could share the final working code. I'm working on a similar project, and this would be very helpful.