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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resizable Dom Grid

    I wrote this for an HTA, it only work on IE?5/6+ (not sure (tested on IE6)) for windows, and perhaps mac? (again not sure).

    This is a resizeable grid similar to ones found on windows OP, the xml version also has a sort function, but thats not posted here.

    Note: a few thing could be done better (or different), but for times sake lets just say it works without error.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Sort Grid</title>
    
    <style type="text/css"><!--
    	body{margin:0px;}
    
    	/* GRID STYLES */
    
    	#grid tbody td,#grid tfoot td
    	{
    		border-color: white ThreedHighlight ThreedHighlight white;
    		border-width: 0px 1px 1px 0px; border-style: solid;
    		padding: 0px 0px 0px 0px;
    		font-size: 14px;
    		cursor:default;
    	}
    	#grid tfoot td
    	{/* If used. */
    		border-color: white ThreedHighlight ThreedHighlight ThreedHighlight;
    		border-width: 0px 1px 1px 1px; 
    	}
    	#grid tbody .FCol
    	{
    		border-left-color: ThreedHighlight;
    		border-left-width: 1px;
    	}
    	#grid .grabberH,#grid .grabberHF,#grid .grabberHE,#grid .grabberL,#grid .grabberR   /* t r b L */
    	{
    		background-color:ButtonFace;border:outset;line-height:16px;
    	}
    	#grid .grabberHF
    	{
    		border-width: 1px 0px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
    	}
    	#grid .grabberH
    	{
    		border-width: 1px 0px 0px 0px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
    	}
    	#grid .grabberHE
    	{
    		border-width: 1px 2px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;
    	}
    	#grid .grabberL
    	{
    		border-width: 1px 0px 0px 1px;
    	}
    	#grid .grabberR
    	{
    		border-width: 1px 2px 0px 0px;
    	}
    	#grid .grabberL,#grid .grabberR
    	{
    		cursor:col-resize;padding:0px;
    	}
    	#grid .ender
    	{
    		width:0px;
    	}
    	#grid span
    	{
    		padding: 0px 3px 0px 3px;
    	}
    	#grid .grabberH span
    	{
    		padding: 0px 0px 0px 0px;
    	}
    	#grid .grabberHF span
    	{
    		padding: 0px 0px 0px 3px;
    	}
    	-->
    </style>
    	
    <script language="JavaScript"><!--
    /*RESIZABLE DOM GRID - (C) COPYRIGHTED DON WATSON 2003 ALL RIGHT RESERVED - DONWATS@USA.COM*/
    function mouseevent(elm, _event, _function)
    {
    	elm.attachEvent(_event, _function)
    }
    
    function mousedetach(elm, _event, _function)
    {
    	elm.detachEvent(_event, _function)
    }
    
    function resizeGrid()
    {
    	var srcElem = event.srcElement;
    	
    	if(srcElem.tagName !=="TD")
    	{
    		try{
    			while(srcElem.tagName !=="TD")
    			{
    				srcElem = srcElem.parentNode
    			}
    		}
    		catch(e)
    		{
    			return
    		}
    	}
    
    	if(srcElem.className != "grabberL")
    	{
    		if(srcElem.className != "grabberR")
    		{
    			return
    		}
    	}
    	
    	var expandingTDTemp = srcElem;
    	
    	try{
    		while( expandingTDTemp.className !="grabberH" && expandingTDTemp.className !="grabberHF" )
    		{
    			expandingTDTemp = expandingTDTemp.previousSibling;
    		}
    	}
    	catch(e)
    	{
    		return
    	}
    	
    	expandingTD = expandingTDTemp;
    
    	/*lets get the rule (css)*/
    	ruleNum = expandingTD.firstChild.className; /*assume its the span*/
    	ruleNum = ruleNum.substr(ruleNum.length-1,1);/*strip the num off the end*/
    
    	lastrack = event.x; 
    	finalW = expandingTD.offsetWidth;
    	createBar();grabElm(srcElem);
    }
    
    var grabberElm, finalW, expandingTD, lastrack, ruleNum;
    
    function grabElm(srcElem)
    {
    		grabberElm = srcElem; 
    		grabberElm.setCapture(false);
    		mouseevent(grabberElm, "onmouseup", letGo); 
    		mouseevent(grabberElm, "onlosecapture", dubbleCheck);
    		mouseevent(document, "onmousemove", resizeT);
    }
    function dubbleCheck()
    {
    	window.setTimeout(letGo, 200, "JavaScript")
    }
    function letGo()
    {
    	if(!document.getElementById("resizebar"))
    	{
    		window.clearTimeout();
    		return
    	}
    	grabberElm.releaseCapture();
    	mousedetach(grabberElm, "onmouseup", letGo);
    	mousedetach(grabberElm, "onlosecapture", dubbleCheck);
    	mousedetach(document, "onmousemove", resizeT);
    	document.styleSheets.rowspans.rules[ruleNum].style.width = 0;
    	finalW<0?finalW=1:0;expandingTD.width=finalW;
    	document.styleSheets.rowspans.rules[ruleNum].style.width = expandingTD.offsetWidth;
    	destroyBar();
    }
    function resizeT()
    {
    	currentrack = event.x;
    
    		if( currentrack > lastrack )
    		{
    			finalW += currentrack - lastrack
    		}
    		else if( currentrack < lastrack )
    		{
    			finalW -= lastrack - currentrack
    		}
    	document.getElementById('resizebar').style.left = [ currentrack + document.body.scrollLeft - document.body.clientLeft ];
    	lastrack = currentrack;
    }
    function createBar(){
    	var _body = document.getElementsByTagName('body').item(0);
    		bar = document.createElement("DIV");
    		bar.id = "resizebar";
    		bar.style.backgroundColor="silver";
    		bar.style.width=3;
    		bar.style.height=document.body.clientHeight;
    		bar.style.position= "absolute";
    		bar.style.top=document.body.scrollTop;
    		bar.style.left= [ event.x + document.body.scrollLeft - document.body.clientLeft ];
    		_body.appendChild(bar);
    }
    function destroyBar(){
    	var _body = document.getElementsByTagName('body').item(0);
    		bar  = document.getElementById('resizebar');
    		if(bar) _body.removeChild(bar);
    }
    //-->
    </script>
    
    </head>
    <body>
    
    <table id="grid" width="100%" border="0" cellspacing="0" cellpadding="0">
    	<thead>
    		<tr onMouseDown="resizeGrid()">
    			<td width="140px" nowrap class="grabberHF"><span class="col0">Artist</span></td>
    			<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
    			<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
    			<td width="250px" nowrap class="grabberH"><span class="col1">Venue</span></td>
    			<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
    			<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
    			<td width="120px" nowrap class="grabberH"><span class="col2">Title</span></td>
    			<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
    			<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
    			<td width="45px" nowrap class="grabberH" align="center"><span class="col3">Media</span></td>
    			<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
    			<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
    			<td width="100px" nowrap class="grabberH" align="right"><span class="col4">Date</span></td>
    			<td width="5px" nowrap class="grabberR"><div class="ender"/></td>
    			<td width="100%" class="grabberHE"><div class="ender"/></td>
    		</tr>
    	<thead>
    	<tfoot>
    		<tr><td nowarp colspan="15"><!--footer not needed--></td></tr>
    	</tfoot>
    	<tbody>
    		<tr>
    			<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
    			<td colspan="3"><span class="col1">Column 2</span></td>
    			<td colspan="3"><span class="col2">Column 3</span></td>
    			<td colspan="3" align="center"><span class="col3">SHN</span></td>
    			<td colspan="3" align="right"><span class="col4">04-19-1998</span></td>
    			<td><div class="ender"/></td>
    		</tr>
    		</tr>
    			<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
    			<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
    			<td colspan="3"><span class="col2">Column 3</span></td>
    			<td colspan="3" align="center"><span class="col3">MP3</span></td>
    			<td colspan="3" align="right"><span class="col4">09-16-1983</span></td>
    			<td><div class="ender"/></td>
    		</tr>
    		<tr>
    			<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
    			<td colspan="3"><span class="col1">Column 2</span></td>
    			<td colspan="3"><span class="col2">Column 3</span></td>
    			<td colspan="3" align="center"><span class="col3">SHN</span></td>
    			<td colspan="3" align="right"><span class="col4">03-01-1969</span></td>
    			<td><div class="ender"/></td>
    		</tr>
    		</tr>
    			<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
    			<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
    			<td colspan="3"><span class="col2">Column 3</span></td>
    			<td colspan="3" align="center"><span class="col3">MP3</span></td>
    			<td colspan="3" align="right"><span class="col4">01-20-2001</span></td>
    			<td><div class="ender"/></td>
    		</tr>
    		<tr>
    			<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
    			<td colspan="3"><span class="col1">Column 2</span></td>
    			<td colspan="3"><span class="col2">Column 3</span></td>
    			<td colspan="3" align="center"><span class="col3">SHN</span></td>
    			<td colspan="3" align="right"><span class="col4">10-29-1988</span></td>
    			<td><div class="ender"/></td>
    		</tr>
    	</tbody>
    </table>
    
    <script language="JavaScript"><!--
    
    function setStyles(){
    
    	var _head = document.getElementsByTagName('head').item(0);
    	
    		var dss = document.createElement("STYLE");
    			dss.id = "rowspans";
    			_head.appendChild(dss);
    
    		var _table = document.getElementById("grid");
    		var _tr    = _table.getElementsByTagName("TR")[0];
    		var _td    = _tr.getElementsByTagName("TD");
    		var colnum = 0;
    		
    		for(i = 0; i < _td.length; i++)
    		{
    			if(_td[i].className != "grabberL")
    			{
    				if(_td[i].className != "grabberR")
    				{
    						document.styleSheets.rowspans.addRule(".col"+colnum+"","width:"+ _td[i].width +"");
    						colnum += 1;
    				}
    			}
    		}
    		document.styleSheets.rowspans.addRule("#grid span","overflow: hidden;text-overflow: ellipsis;white-space: nowrap;");
    		//alert(document.styleSheets.rowspans.cssText);
    }
    
    setStyles(); /* After resize grid, or onload event. */
    
    //--></script>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doesn't work in Mac IE
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    New Coder
    Join Date
    Oct 2002
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doesn't work in Mac IE
    Could be a number of things, im guessing 1 issue could be the px thing.

    such as here

    document.styleSheets.rowspans.rules[ruleNum].style.width = 0;

    should be

    document.styleSheets.rowspans.rules[ruleNum].style.width = 0+"px";

    or

    var px ="px"

    document.styleSheets.rowspans.rules[ruleNum].style.width = 0+px;


    but I dont have a mac to test it on

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Cincinnati, OH
    Posts
    545
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have always wondered how that could be done. Nice script.

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's what it looked like on my mac:
    http://www.dotfive.com/iegrid.gif
    http://www.dotfive.com/mozgrid.gif

    It looks the same in IE as Moz... pretty much
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    New Coder
    Join Date
    Oct 2002
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like some css issues on mac, as for moz it just cant work unless you clip or trim - text-overflow ellipsis along with setCapture is what makes this script possible. Keep in mind it was designed for an HTA and just thought Id share it for what it is.

    But if any mac coders tweak it plz let me know.


  •  

    Posting Permissions

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