Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Probllem with Dynamic Column Resizing in Firefox

    Hello everyone. I've been working with this piece of code trying to port it over from IE to Firefox. It's supposed to let you resize an iframe column dynamically. I've followed the guidelines at Mozilla http://developer.mozilla.org/en/docs...rer_to_Mozilla
    but I am still stuck. This is my first real attempt at working with JS so any suggestions will be greatly appreciated. Let me know if I need to attach any other info. Thanks!

    Code:
    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;
    
    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);
    	}
    }
    
    if(window.addEventListener)
    {
    	window.addEventListener("load", TableResize_CreateVBar,0);
    }
    else if(window.attachEvent)
    {
    	window.attachEvent("onload", TableResize_CreateVBar);
    }
    
    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.offsetX >= (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(event.target);
    	
    	if(!oTargetCell)
    		return;
    	
    	if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
    	{
    		oTargetCell = oTargetCell.parentNode;
    	}
    	
    	var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
    	
    	if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == ""))
    	{
    		iStartX = event.screenX;
    		oResizeTarget = oHeaderCell;
    		objTable.setAttribute("Resizing","true");
    		//Set Capture?
    		
    		oVBar.style.left = window.event.clientX + document.body.scrollLeft;
    		oVBar.style.height = objTable.parentNode.clientHeight;
    		oVBar.style.display = "inline";
    	}
    	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;
    }
    Last edited by bgraphics2031; 05-07-2007 at 09:50 PM. Reason: Modified Code

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey can anyone help me please? I don't know how to get this to work correctly in FF. It's supposed to allow you to resize a column via the black vertical bar in the middle of the page.

    Here's the HTML part:
    Code:
    <!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 onload="resize_iframe()"></iframe></th>
    <th><iframe id="right_frame" name="right_frame" src="" frameborder=0 onload="resize_iframe()"></iframe></th>
    </tr>
    
    </table>
    
    </div>
    
    
    
    </body>
    </html>
    Here's the JS part:
    Code:
    /*
    Global constants to store elements that may be resized.
    */
    var sResizableElement = "TH"; //Elements to be resized
    var iResizeThreshold = 8;
    var iEdgeThreshold = 8;
    var iSizeThreshold = 20;
    var sVBarID = "VBar";
    
    /*
    Global variables to store position and distance moved.
    */
    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);
    
    
    /*
    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) //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;
    }
    	
    /*
    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, 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;
    }
    
    /*
    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)
    {
    	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
    }
    
    /*
    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.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;
    }
    
    //Finishes Resize
    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;
    
    }
    Last edited by bgraphics2031; 05-13-2007 at 04:38 PM. Reason: Modified Code


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •