Help with dynamic table resizing code

**pbmods** · Jun 26 '07, 01:51 AM

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** · Jun 26 '07, 06:26 PM

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:

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** · Jun 26 '07, 07:03 PM

Heya, dli07.

Originally posted by 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 removeEventList ener() calls in there. How does your script know when you're done dragging the bar? Are you using a global variable?

**dli07** · Jun 26 '07, 08:27 PM

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 removeEventList ener("mouseup", TableResize_OnM ouseUp, false) at the end of my TableResize_OnM ouseUp code after TableResize_Cle anup? (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** · Jun 26 '07, 08:55 PM

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::makeDr aggable() 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:[code=javascript]delete someVar;[/code] 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:[code=javascript]
function doSomething() {
delete doSomething;
}
[/code]

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** · Jun 27 '07, 03:13 AM

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.

Attached Files

LB_DragAndDrop.txt (7.1 KB, 463 views)

**dli07** · Jun 27 '07, 03:38 AM

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_OnM ouseDown, but I also added the listener for mousemove in TableResize_OnM ouseDown so I don't know if they're interefering with each other?

[CODE="javascrip t"]
function TableResize_OnM ouseMoveBefore (objTable, event) {
//document.getEle mentById('debug ').value += 'Entered OnMouseMoveBefo re\n';
var objTH = TableResize_Get OwnerHeader(eve nt.target); if(!objTH) return;

//document.getEle mentById('coord s').value += "event.clie ntX " + event.clientX + "\n";
//document.getEle mentById('coord s').value += "event.laye rX " + event.layerX + "\n";
//document.getEle mentById('coord s').value += "offsetWidt h " + objTH.offsetWid th+ "\n";
if (event.layerX >= (objTH.offsetWi dth - iEdgeThreshold) ) {
objTH.style.cur sor = "e-resize";
}
else {
objTH.style.cur sor = "";
}
document.getEle mentById("table 1").addEventLis tener("mousedow n", TableResize_OnM ouseDown, false);
event.stopPropa gation();
}

function TableResize_OnM ouseDown(event) {
document.getEle mentById('debug ').value += 'Entered OnMouseDown\n';
var objTable = this;
var objTH = TableResize_Get OwnerHeader(eve nt.target); if (!objTH) return;
var oVBar = document.getEle mentById(sVBarI D); if(!oVBar) return;
var oTargetCell = event.target; if(!oTargetCell ) return; // event.currentTa rget
var oHeaderCell = TableResize_Get FirstColumnCell (objTable, oTargetCell.cel lIndex);
// var oAdjacentCell = objTH.nextSibli ng.nextSibling;
// alert(objTH.inn erHTML);
// alert(oAdjacent Cell.innerHTML) ;

if ((oHeaderCell.t agName.toUpperC ase() == sResizableEleme nt) && (oTargetCell.st yle.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.setAtt ribute("Resizin g","true");
//objTable.setCap ture(); // THIS IS NOT SUPPORTED IN NETSCAPE

oVBar.style.lef t = event.clientX + window.pageXOff set;
//alert("clientX: " + oVBar.style.lef t);
//document.getEle mentById('coord s').value += 'clientX: ' + oVBar.style.lef t + '\n';
oVBar.style.top = objTable.parent Node.offsetTop + window.pageYOff set;
//alert("offsetTo p: " + oVBar.style.top );
//document.getEle mentById('coord s').value += 'offsetTop: ' + oVBar.style.top + '\n';
oVBar.style.hei ght = objTable.parent Node.offsetHeig ht;
//alert("offsetHe ight: " + oVBar.style.hei ght);
//document.getEle mentById('coord s').value += 'offsetHeight: ' + oVBar.style.hei ght + '\n';
oVBar.style.dis play = "inline"; // THIS IS CRUCIAL
document.getEle mentById("table 1").addEventLis tener("mouseup" , TableResize_OnM ouseUp, true);
document.getEle mentById("table 1").addEventLis tener("mousemov e", TableResize_OnM ouseMoveAfter, true);
event.stopPropa gation();
}
}

function TableResize_OnM ouseMoveAfter(e vent) {
document.getEle mentById('debug ').value += 'Entered OnMouseMoveAfte r\n';
var objTH = TableResize_Get OwnerHeader(eve nt.target); if (!objTH) return;
var oVBar = document.getEle mentById(sVBarI D); if (!oVBar) return;

if (oVBar.style.di splay == "inline") {
oVBar.style.lef t = event.clientX + window.pageXOff set;
document.getEle mentById("coord s").value += oVBar.style.lef t + "\n";
//document.body.f ocus(); // WHAT DOES THIS DO?????
}
event.stopPropa gation();
}

function TableResize_OnM ouseUp(event) {
document.getEle mentById('debug ').value += 'Entered OnMouseUp\n';
// Resize the column and its adjacent sibling if position and size are within threshold values
//var oAdjacentCell = null;
var iAdjCellOldWidt h = 0;
var iResizeOldWidth = 0;
var objTable = this;
var oVBar = document.getEle mentById(sVBarI D); //if (!oVBar) return;
oVBar.style.dis play == "none";

alert(oResizeTa rget);
var oAdjacentCell = oResizeTarget.n extSibling.next Sibling;
alert(oAdjacent Cell);

//alert(oResizeTa rget);
/*
if(iStartX != null && oResizeTarget != null) {
iEndX = event.clientX;
//alert(event.cli entX);
iSizeX = iEndX - iStartX;

// Mark the table with the resize attribute for not resizing
objTable.Resizi ng = false;
if ((oResizeTarget .offsetWidth + iSizeX) >= iSizeThreshold)
{
if (Math.abs(iSize X) >= iResizeThreshol d)
{
if (oResizeTarget. nextSibling != null)
{
oAdjacentCell = oResizeTarget.n extSibling;
iAdjCellOldWidt h = (oAdjacentCell. offsetWidth);
} else {
oAdjacentCell = null;
}
iResizeOldWidth = (oResizeTarget. offsetWidth);
oResizeTarget.s tyle.width = iResizeOldWidth + iSizeX;
if ((oAdjacentCell != null) && (oAdjacentCell. tagName.toUpper Case() == sResizableEleme nt))
{
oAdjacentCell.s tyle.width = (((iAdjacentCel lOldWidth - iSizeX) >= iSizeThreshold) ? (iAdjCellOldWid th - iSizeX):(oAdjac entCell.style.w idth = iSizeThreshold) )
}
}
} else {
oResizeTarget.s tyle.width = iSizeThreshold;
}
}*/
TableResize_Cle anUp();
document.getEle mentById("table 1").removeEvent Listener("mouse move", TableResize_OnM ouseMoveAfter, true);
document.getEle mentById("table 1").removeEvent Listener("mouse up", TableResize_OnM ouseUp, true);
event.stopPropa gation();
}
[/CODE]

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

**dli07** · Jun 27 '07, 05:24 AM

Apparently, if I delete the oVBar.style.hei ght 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** · Jun 28 '07, 06:04 PM

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)

[CODE=javascript]
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_Cre aterBar() {
var objItem = document.getEle mentById(rBarID );
if(!objItem) {
objItem = document.create Element("DIV");
objItem.id = rBarID;
objItem.style.p osition = "absolute";
objItem.style.t op = "0px";
objItem.style.l eft = "0px";
objItem.style.h eight = "100px";
objItem.style.b order = "1px solid black";
objItem.style.d isplay = "none";
document.body.a ppendChild(objI tem);
}
}
window.addEvent Listener("load" , TableResize_Cre aterBar,0);

function TableResize_Get Header(objRefer ence) {
var oElement = objReference;
if(oElement.tag Name.toUpperCas e() == resizeElement) {
return oElement; //print alert?
}
return null;
}

function TableResize_Cle anUp() {
//document.getEle mentById('debug ').value += 'Entered CleanUp\n';
var rBar = document.getEle mentById(rBarID );
if(rBar) {
rBar.style.disp lay = "none";
}
iEndX = null;
iSizeX = null;
iStartX = null;
resizeTarget = null;
adjacentCell = null;
return true;
}

function TableResize_OnM ouseMoveBefore (objTable, event) {
//document.getEle mentById('debug ').value += 'Entered OnMouseMoveBefo re\n';
var objTH = TableResize_Get Header(event.ta rget); if (!objTH ) return;

//document.getEle mentById('coord s').value += "event.clie ntX " + event.clientX + "\n";
//document.getEle mentById('coord s').value += "event.laye rX " + event.layerX + "\n";
//document.getEle mentById('coord s').value += "offsetWidt h " + objTH.offsetWid th+ "\n";
if (event.layerX >= (objTH.offsetWi dth - edgeThreshold)) {
objTH.style.cur sor = "e-resize";
}
else {
objTH.style.cur sor = "";
}
return true;
}

///// HERE"S THE IMPORTANT CODE
// In order to use layerX, each TH must have style="position : relative";

function TableResize_OnM ouseDown(objTab le, event) {
//document.getEle mentById('debug ').value += 'Entered OnMouseDown\n';
var objTH = TableResize_Get Header(event.ta rget); if (!objTH) return;
var rBar = document.getEle mentById(rBarID ); if(!rBar) return;
// adjacentCell = objTH.nextSibli ng.nextSibling;
// alert(objTH.inn erHTML);
// alert(adjacentC ell.innerHTML);

if ((objTH.tagName .toUpperCase() == resizeElement) && (objTH.style.cu rsor == "e-resize")) {
iStartX = event.clientX;
resizeTarget = objTH;

rBar.style.left = event.clientX + window.pageXOff set;
rBar.style.top = objTable.parent Node.offsetTop + window.pageYOff set;
rBar.style.heig ht = objTable.parent Node.clientHeig ht;
rBar.style.disp lay = "inline"; // THIS IS CRUCIAL
}
document.getEle mentById("tabul ated_data").add EventListener(" mousemove", TableResize_OnM ouseMoveAfter, true);
document.getEle mentById("tabul ated_data").add EventListener(" mouseup", TableResize_Hea derProblem, true); //this handles a problem with clickling on the header and then not exiting OnMouseMoveAfte r
document.getEle mentById(rBarID ).addEventListe ner("mouseup", TableResize_OnM ouseUp, true);
}

function TableResize_Hea derProblem (event) {
//document.getEle mentById('debug ').value += 'Entered HeaderProblem\n ';
document.getEle mentById("tabul ated_data").rem oveEventListene r("mousemove" , TableResize_OnM ouseMoveAfter, true);
}

// doesn't seem like I ever enter OnMouseAfter

function TableResize_OnM ouseMoveAfter(e vent) {
//document.getEle mentById('debug ').value += 'Entered OnMouseMoveAfte r\n';
rBar.style.left = event.clientX + window.pageXOff set;
//document.getEle mentById("coord s").value += rBar.style.left + "\n";
event.stopPropa gation();
}

function TableResize_OnM ouseUp(event) {
//document.getEle mentById('debug ').value += 'Entered OnMouseUp\n';
var iAdjCellOldWidt h = 0;
var iResizeOldWidth = 0;
var objTable = this;
var rBar = document.getEle mentById(rBarID );

//resize target is already defined in onmousedown
var adjacentCell = resizeTarget.ne xtSibling.nextS ibling;
//alert(adjacentC ell);

//--------------------------------------
// 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.of fsetWidth;
//document.getEle mentById("coord s").value += "iStartX " + iStartX + "\n";
//document.getEle mentById("coord s").value += "iEndX " + iEndX + "\n";
//document.getEle mentById("coord s").value += "oldCellWid th " + oldCellWidth + "\n"
resizeTarget.st yle.width = oldCellWidth + distanceMoved;
//document.getEle mentById("coord s").value += "newCellWid th " + newCellWidth + "\n";

//-------------------------------------
// set the width on oAdjacent Cell
// the distance that the adjacentCell moves is
var oldAdjacentWidt h = adjacentCell.of fsetWidth;
adjacentCell.st yle.width = oldAdjacentWidt h - distanceMoved;

document.getEle mentById("tabul ated_data").rem oveEventListene r("mousemove" , TableResize_OnM ouseMoveAfter, true);
document.getEle mentById(rBarID ).removeEventLi stener("mouseup ", TableResize_OnM ouseUp, true);
event.stopPropa gation();
TableResize_Cle anUp();
}
[/CODE]

[CODE=html4stric t]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Table Test</title>


<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="tableresiz e4.js">

</script>

</head>

<body>

<div class="tablecon tainer" >
<table id="tabulated_d ata" border="0" cellspacing="0" cellpadding="0" class="mytable"
onmousemove="Ta bleResize_OnMou seMoveBefore(th is, event);"
onmousedown="Ta bleResize_OnMou seDown(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>
[/CODE]

Help with dynamic table resizing code

Help with dynamic table resizing code

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment