Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

resize columns in a table

Newbie
  
Join Date: Jan 2007
Posts: 5
#1: Jan 11 '07
I have a problem kaking the columns of a table resizeable by the user on the browser.can some1 help me out with this.
Is it a property in the css that i need to add?

regards and thanks in advance

b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171
#2: Jan 12 '07

re: resize columns in a table

Quote:

Originally Posted by srinivd1

Hi,
I have a problem kaking the columns of a table resizeable by the user on the browser.can some1 help me out with this.
Is it a property in the css that i need to add?

regards and thanks in advance

HTML tables aren't resizable the way you see tables in microsoft apps. There's isn't a single property you can change to do it. You're going to have to write a bunch of DHTML/JS in order to do that.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#3: Jan 12 '07

re: resize columns in a table

Yes, you will need DHTML to obtain this functionality.

Check this link for a cross-browser table as opposed to one limited to IE only. It offers amongst other things resizing.

See how you get along with that.
Newbie
  
Join Date: Jan 2007
Posts: 5
#4: Jan 15 '07

re: resize columns in a table

Quote:

Originally Posted by acoder

Yes, you will need DHTML to obtain this functionality.

Check this link for a cross-browser table as opposed to one limited to IE only. It offers amongst other things resizing.

See how you get along with that.

thanks for the link, have tried that one doesnt seeme xactly like excel resize but should do good.Thanks :)
Newbie
  
Join Date: Feb 2007
Posts: 2
#5: Feb 1 '07

re: resize columns in a table

COPY AND PASTE
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <style>
  4. h1, h2{
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6.  font-size:13px;
  7.  
  8. }
  9. .move
  10. {
  11.  width:100%;
  12.  background-color:#99CCFF;
  13.  border-bottom:1px solid blue;
  14.  font-size:14px;
  15.  font-family:vardana;
  16.  font-color:"#33CCAA";
  17.  text-align:center;
  18. }
  19.  
  20. .info
  21. {
  22.  width:100%;
  23.  background-color:#99CCFF;
  24.  border-top:1px solid blue;
  25.  font-size:13px;
  26.  font-family:vardana;
  27.  font-color:"#33CCAA";
  28. }
  29.  
  30. .panel2{
  31.  width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
  32.  
  33. .panel{
  34.  width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
  35. .panel a:visited{color:blue;}
  36. .panel a{text-decoration:none;color:blue}
  37. .panel a:hover{text-decoration:none;}
  38.  
  39. #panel a.visited{
  40. text-decoration:none;
  41. }
  42.  
  43. .menu
  44. {
  45.  width:100%;
  46.  background-color:lightyellow;
  47.  font-size:13px;
  48.  font-family:vardana;
  49. }
  50. </style>
  51.  
  52. <SCRIPT LANGUAGE="JavaScript">
  53. /// DEVELPED BY SYED NAVED ULLAH SHAH
  54. // /********
  55. ///    CATALYST IT SOLUTIONS(PVT) LTD
  56. ///CATALYST.PK
  57. //
  58.  
  59. function getSize(name)
  60. {
  61.     op=document.getElementById(name).style.width;
  62. alert(op);    
  63. //return value;
  64. }
  65. N = (document.all) ? 0 : 1;
  66. var ob;
  67. var over = false;
  68. var over_id ="";
  69.  
  70. function MD(e) {
  71. MOUSTSTART_X=event.clientX;
  72. MOUSTSTART_Y=event.clientY;
  73.         if (over)
  74.         {        
  75.         //alert(N)
  76.             if (N) {
  77.             ob = document.getElementById(over_id);
  78.             X=e.layerX;
  79.             Y=e.layerY;
  80.             return false;
  81.             }
  82.  
  83.             else{
  84.             ob = document.getElementById(over_id);
  85.             ob = ob.style;
  86.             ob2 = document.getElementById("MAINTABLE");
  87.             ob2 = ob2.style;
  88.             obwidth=parseInt(ob.width);
  89.             obwidth2=parseInt(ob2.width);
  90.             X=event.offsetX;
  91.             Y=event.offsetY;
  92.             }
  93.         }
  94. }
  95.  
  96. function MM(e) {
  97.  
  98.     if (ob) {
  99.             if (N) {
  100.                     ob.style.top = e.pageY-Y;
  101.                     ob.style.left = e.pageX-X;
  102.                     }
  103.                 else{
  104.                         st=event.clientX-MOUSTSTART_X+obwidth;
  105.                         st2=event.clientX-MOUSTSTART_X+obwidth2;
  106.  
  107.                         if(st>=30)
  108.                         {
  109.                         ob.width=st;
  110.                         ob2.width=st2;
  111.                         document.getElementById("status").innerHTML=st;
  112.                         }
  113.                         return false;
  114.                      }
  115.             }
  116. }
  117.  
  118. function MU() {
  119.  
  120.     ob = null;
  121.             }
  122.  
  123. if (N) {
  124. document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  125. }
  126.  
  127. document.onmousedown = MD;
  128. document.onmousemove = MM;
  129. document.onmouseup = MU;
  130.  
  131. </script>
  132.  
  133. </HEAD>
  134.  
  135. <BODY>
  136. <!-- 
  137. YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
  138. IT RETURNS .. ERROR..
  139.  -->
  140. <H1>RESIZABLE TABLE COLUMN</H1>
  141. <TABLE border="1" STYLE="width:500px; overflow:hidden" ID="MAINTABLE">
  142.  
  143.  
  144. <TR>
  145.  
  146. <TH id="panel0"  class='move' onmouseover="over=true;over_id='panel0'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO0</TH>
  147.  
  148. <TH id="panel1"  class='move' onmouseover="over=true;over_id='panel1'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO1</TH>
  149.  
  150. <TH id="panel2"  class='move' onmouseover="over=true;over_id='panel2'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO2</TH>
  151.  
  152. <TH id="panel3"  class='move' onmouseover="over=true;over_id='panel3'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO3</TH>
  153.  
  154. <TH id="panel4"  class='move' onmouseover="over=true;over_id='panel4'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO4</TH>
  155.  
  156. </TR>
  157.  
  158. <TR>
  159. <TD>1_0</TD>
  160. <TD>1_1</TD>
  161. <TD>1_2</TD>
  162. <TD>1_3</TD>
  163. <TD>1_4</TD>
  164. </TR>
  165.  
  166. <TR>
  167. <TD>2_0</TD>
  168. <TD>2_1</TD>
  169. <TD>2_2</TD>
  170. <TD>2_3</TD>
  171. <TD>2_4</TD>
  172. </TR>
  173.  
  174. <TR>
  175. <TD>3_0</TD>
  176. <TD>3_1</TD>
  177. <TD>3_2</TD>
  178. <TD>3_3</TD>
  179. <TD>3_4</TD>
  180. </TR>
  181.  
  182. <TR>
  183. <TD>4_0</TD>
  184. <TD>4_1</TD>
  185. <TD>4_2</TD>
  186. <TD>4_3</TD>
  187. <TD>4_4</TD>
  188. </TR>
  189. </table>
  190. <div id="status"></div>
  191. <h2>Developed By Syed Naved Ullah Shah </h2>
  192. *****<BR>
  193. Karachi, Pakistan
  194. </HTML>
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#6: Feb 1 '07

re: resize columns in a table

Welcome to TheScripts.

Thanks for sharing your code.

Just one or two things I'd like to point out. Never display your email, it will get spammed, so I've removed it from your post. Secondly, post code using code tags.

I haven't tested your code, but it seems like old code if it's using document.all. All browsers after 1998 use the standard document.getElementById.
Newbie
  
Join Date: Mar 2007
Posts: 2
#7: Mar 14 '07

re: resize columns in a table

Based in the past one but works in mozilla and less code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. <script language="javascript">
  8. var firefox = document.getElementById&&!document.all;
  9. var isdrag = false;
  10. var x0 = 0,y0=0,tx=0,ty=0;
  11. var anchoc=0;anchot=0;
  12. var objon = null;tabla = null;
  13. getTopPos = function(inputObj)
  14. {        
  15.     var returnValue = inputObj.offsetTop;
  16.     while((inputObj = inputObj.offsetParent) != null){
  17.         if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  18.     }
  19.     return returnValue;
  20. }    
  21. getLeftPos = function(inputObj)
  22. {
  23.     var returnValue = inputObj.offsetLeft;
  24.     while((inputObj = inputObj.offsetParent) != null){
  25.         if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  26.     }
  27.     return returnValue;
  28. }
  29. function comienza(e){
  30.     if(!firefox)e = event;
  31.     objon = (!firefox)?e.srcElement:e.target;
  32.     if(objon.className == "arrastrable"){
  33.         isdrag = true;
  34.         tabla = document.getElementById("arrastrablet");
  35.         x0 = e.clientX; y0 = e.clientY;
  36.         tx = getLeftPos(objon); ty = getTopPos(objon);
  37.         anchoc = objon.offsetWidth;
  38.         anchot = tabla.offsetWidth;
  39.     }
  40. }
  41. function moviendo(e){
  42.     if(!firefox)e = event;
  43.     if(isdrag){
  44.         ic=e.clientX-x0+anchoc;
  45.         it=e.clientX-x0+anchot;
  46.         objon.style.width = ic + "px";
  47.         tabla.style.width = it + "px";
  48.         window.status = ic + "-" + it;
  49.     }
  50. }
  51. function termina(e){
  52.     isdrag = false;
  53. }
  54. document.onmouseup = termina;
  55. document.onmousemove = moviendo;
  56. document.onmousedown=comienza;
  57. </script>
  58. <style type="text/css">
  59. <!--
  60. .style1 {color: #FFFFFF}
  61. -->
  62. </style>
  63. </head>
  64.  
  65. <body>
  66. <table width="100%"  border="1" cellspacing="1" cellpadding="1" id="arrastrablet">
  67.   <tr bgcolor="#0000FF">
  68.     <td class="arrastrable"><span class="style1">Arrastra 1</span></td>
  69.     <td class="arrastrable"><span class="style1">Arrastra 2</span></td>
  70.     <td class="arrastrable"><span class="style1">Arrastra 3</span></td>
  71.     <td class="arrastrable"><span class="style1">Arrastra 4</span></td>
  72.   </tr>
  73.   <tr>
  74.     <td>coor (0,0)</td>
  75.     <td>coor (1,0)</td>
  76.     <td>coor (2,0)</td>
  77.     <td>coor (3,0)</td>
  78.   </tr>
  79.   <tr>
  80.     <td>coor (0,1)</td>
  81.     <td>coor (1,1)</td>
  82.     <td>coor (2,1)</td>
  83.     <td>coor (3,1)</td>
  84.   </tr>
  85. </table>
  86. </body>
  87. </html>
  88.  
Newbie
  
Join Date: Mar 2007
Posts: 2
#8: Mar 14 '07

re: resize columns in a table

Small correction
Based in the past one but works in mozilla and less code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. <script language="javascript">
  8. var firefox = document.getElementById&&!document.all;
  9. var isdrag = false;
  10. var x0 = 0,y0=0,tx=0,ty=0;
  11. var anchoc=0;anchot=0;
  12. var objon = null;tabla = null;
  13. getTopPos = function(inputObj)
  14. {        
  15.     var returnValue = inputObj.offsetTop;
  16.     while((inputObj = inputObj.offsetParent) != null){
  17.         if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  18.     }
  19.     return returnValue;
  20. }    
  21. getLeftPos = function(inputObj)
  22. {
  23.     var returnValue = inputObj.offsetLeft;
  24.     while((inputObj = inputObj.offsetParent) != null){
  25.         if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  26.     }
  27.     return returnValue;
  28. }
  29. function comienza(e){
  30.     if(!firefox)e = event;
  31.     objon = (!firefox)?e.srcElement:e.target;
  32.     if(objon.className == "arrastrable"){
  33.         isdrag = true;
  34.         tabla = document.getElementById("arrastrablet");
  35.         x0 = e.clientX; y0 = e.clientY;
  36.         tx = getLeftPos(objon); ty = getTopPos(objon);
  37.         anchoc = objon.offsetWidth;
  38.         anchot = tabla.offsetWidth;
  39.     }
  40. }
  41. function moviendo(e){
  42.     if(!firefox)e = event;
  43.     if(isdrag){
  44.         ic=e.clientX-x0+anchoc;
  45.         it=e.clientX-x0+anchot;
  46.         if(ic >= 5){
  47.             objon.style.width = ic + "px";
  48.             window.status = ic + "-" + it;
  49.             tabla.style.width = it + "px";
  50.         }else{
  51.  
  52.         }
  53.     }
  54. }
  55. function termina(e){
  56.     isdrag = false;
  57. }
  58. document.onmouseup = termina;
  59. document.onmousemove = moviendo;
  60. document.onmousedown=comienza;
  61. </script>
  62. <style type="text/css">
  63. <!--
  64. .style1 {color: #FFFFFF}
  65. .arrastrable{
  66. width:100px;
  67. overflow:hidden;
  68. }
  69. -->
  70. </style>
  71. </head>
  72.  
  73. <body>
  74. <table border="1" cellspacing="1" cellpadding="1" id="arrastrablet">
  75.   <tr bgcolor="#0000FF">
  76.     <td class="arrastrable"><span class="style1">Arrastra 1</span></td>
  77.     <td class="arrastrable"><span class="style1">Arrastra 2</span></td>
  78.     <td class="arrastrable"><span class="style1">Arrastra 3</span></td>
  79.     <td class="arrastrable"><span class="style1">Arrastra 4</span></td>
  80.   </tr>
  81.   <tr>
  82.     <td>coor (0,0)</td>
  83.     <td>coor (1,0)</td>
  84.     <td>coor (2,0)</td>
  85.     <td>coor (3,0)</td>
  86.   </tr>
  87.   <tr>
  88.     <td>coor (0,1)</td>
  89.     <td>coor (1,1)</td>
  90.     <td>coor (2,1)</td>
  91.     <td>coor (3,1)</td>
  92.   </tr>
  93. </table>
  94. </body>
  95. </html>
  96.  
  97.  
Newbie
  
Join Date: May 2007
Posts: 14
#9: Nov 12 '07

re: resize columns in a table

I have modified the original script to be a little bit more user-friendly. The "move" cursor is now only displayed on the edge of the colums. I have also made the demo table scrollable and sortable.
My question is ..
How do I in IE prevent the onclick action from being fired when I am done dragging?
have tried "window.event.cancelBubble = true", for onmouseup , onmousedown, and onmousemove handlers. The onclick sort action always seems to get fired. Any help would be greatly appeciated.

Steve
sort code.
http://www.kryogenix.org/code/browse...e/sorttable.js.
Here is the modified code.

[HTML]<HTML>
<HEAD>
<style>
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. h1, h2{
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3.  font-size:13px;
  4.  
  5. }
  6. .move
  7. {
  8.  width:100%;
  9.  background-color:#99CCFF;
  10.  border-bottom:1px solid blue;
  11.  font-size:14px;
  12.  font-family:vardana;
  13.  font-color:"#33CCAA";
  14.  text-align:center;
  15. }
  16.  
  17. .info
  18. {
  19.  width:100%;
  20.  background-color:#99CCFF;
  21.  border-top:1px solid blue;
  22.  font-size:13px;
  23.  font-family:vardana;
  24.  font-color:"#33CCAA";
  25. }
  26.  
  27. .panel2{
  28.  width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
  29.  
  30. .panel{
  31.  width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
  32. .panel a:visited{color:blue;}
  33.  
  34. .panel a{text-decoration:none;color:blue}
  35.  
  36. .panel a:hover{text-decoration:none;}
  37.  
  38.  
  39.  
  40. #panel a.visited{
  41.  
  42. text-decoration:none;
  43.  
  44. }
  45.  
  46. .menu
  47.  
  48. {
  49.  
  50.  width:100%;
  51.  
  52.  background-color:lightyellow;
  53.  
  54.  font-size:13px;
  55.  
  56.  font-family:vardana;
  57.  
  58. }
Expand|Select|Wrap|Line Numbers
  1. </style>
  2.  
  3.       <!--[if IE]>
  4.       <style type="text/css">
Expand|Select|Wrap|Line Numbers
  1.          div.scrollable {
  2.                /* shrink the window, adjust for the 2 border pixels */
  3.               height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= 80  ? "80px": "auto" );  
  4.               overflow-x: visible;
  5.               overflow-y: auto;
  6.          }
  7.  
  8.          div.scrollable table {
  9.             /* adjust for the 17 pixels for the scrollbar */
  10.             width: expression(this.parentNode.offsetWidth-17);
  11.          }
  12.  
  13.          /* set the table row */
  14.          div.scrollable table thead tr {
  15.          position: relative;
  16.            /* this fixes IE header jumping bug */
  17.            top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );   
  18.          }
  19.       </style>
  20.       <![endif]-->
  21.  
  22.       <!-- if mozilla -->
  23.       <style type="text/css">
  24.          html>body div.TableContainer table tbody {
  25.             height: 20px;
  26.             overflow: auto;
  27.          }
  28.  
  29.          /* add 17 for the scrollbar */
  30.          html>body div.TableContainer div.scrollbarCol {
  31.             width:17px;
  32.          }
Expand|Select|Wrap|Line Numbers
  1.       </style>
  2.  
  3.       <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >    
  4.       </script>
  5.  
  6. <SCRIPT LANGUAGE="JavaScript">
Expand|Select|Wrap|Line Numbers
  1. /// DEVELPED BY SYED NAVED ULLAH SHAH
  2. // /********
  3. /// CATALYST IT SOLUTIONS(PVT) LTD
  4. ///CATALYST.PK
  5. //
  6.  
  7. N = (document.all) ? 0 : 1;
  8. var ob;
  9. var over = false;
  10. var over_id ="";
  11. var iEdgeThreshold = 10;
  12.  
  13. function TableResize_findPos(obj) {
  14.   var curleft = curtop = 0;
  15.   if (obj.offsetParent) {
  16.       curleft = obj.offsetLeft;
  17.       curtop = obj.offsetTop;
  18.       while (obj = obj.offsetParent) {
  19.          curleft += obj.offsetLeft;
  20.          curtop += obj.offsetTop;
  21.       }
  22.    }
  23.    return [curleft,curtop];
  24. }
  25.  
  26. /* Function that tells me if on the border or not */
  27. function TableResize_isOnBorderLeft( objTable, objTh,event){
  28.     var left = objTh.offsetLeft;
  29.     var pos = TableResize_findPos(objTable);
  30.     var absLeft = pos[0] + left;
  31.  
  32.     if( event.clientX < (absLeft + iEdgeThreshold) ){
  33.        return 1;
  34.     }
  35.     return 0;
  36. }
  37.  
  38. function TableResize_isOnBorderRight( objTable, objTh,event){
  39.   var width = objTh.offsetWidth;
  40.   var left = objTh.offsetLeft;
  41.   var pos = TableResize_findPos(objTable);
  42.   var absRight = pos[0] + left + width;
  43.  
  44.   if( event.clientX > (absRight - iEdgeThreshold) ){
  45.       return 1;
  46.   }
  47.   return 0;
  48. } 
  49.  
  50. function TableResize_getNodeName(objReference,nodeName) 
  51. {
  52.    var oElement = objReference;
  53.    while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
  54.       if (oElement.tagName.toUpperCase() == nodeName) {
  55.          return oElement;
  56.       }
  57.       oElement = oElement.parentNode;
  58.    }
  59.    return null;
  60. }
  61.  
  62.  
  63. function do_resize(objTh,event){
  64.     if(event == null){
  65.        event = window.event;
  66.     }
  67.     var objTable = TableResize_getNodeName(objTh, "TABLE");
  68.     if( TableResize_isOnBorderLeft( objTable, objTh,event) ){ 
  69.        objTh.style.cursor="e-resize";
  70.        return true;
  71.     }
  72.     else if( TableResize_isOnBorderRight( objTable, objTh,event) ){ 
  73.        objTh.style.cursor="e-resize";
  74.        return true;
  75.     }
  76.  
  77.     objTh.style.cursor="";
  78.     return false;
  79. }
  80.  
  81. function MD(e) {
  82.    MOUSTSTART_X=event.clientX;
  83.    MOUSTSTART_Y=event.clientY;
  84.         if (over){      
  85.             if (N) {
  86.             ob = document.getElementById(over_id);
  87.             X=e.layerX;
  88.             Y=e.layerY;
  89.             return false;
  90.             }
  91.  
  92.             else{
  93.  
  94.             ob = document.getElementById(over_id);
  95.             ob2 = document.getElementById("MAINTABLE");
  96.             obwidth=parseInt(ob.style.width);
  97.             obwidth2=parseInt(ob2.style.width);
  98.             X=event.offsetX;
  99.             Y=event.offsetY;
  100.  
  101.             }
  102.  
  103.         }
  104. }
  105.  
  106.  
  107. function MM(e) {
  108.  
  109.     if (ob) {
  110.             if (N) {
  111.                ob.style.top = e.pageY-Y;
  112.                ob.style.left = e.pageX-X;
  113.             }
  114.             else{
  115.                st=event.clientX-MOUSTSTART_X+obwidth;
  116.                st2=event.clientX-MOUSTSTART_X+obwidth2;
  117.  
  118.                if(st>=30){
  119.                    ob.style.width=st;
  120.                    ob2.style.width=st2;
  121.                    document.getElementById("status").innerHTML=st;
  122.                }
  123.                document.selection.empty();
  124.             }       
  125.     } 
  126. }
  127.  
  128. function MU(e) {
  129.  
  130.     if(ob != null){
  131.         document.selection.empty();
  132.         ob = null;
  133.     }
  134. }
  135.  
  136. if (N) {
  137.   document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  138. }
  139.  
  140. document.onmousedown = MD;
  141. document.onmousemove = MM;
  142. document.onmouseup = MU;
Expand|Select|Wrap|Line Numbers
  1.  </script>
  2.  
  3.  
  4. </HEAD>
  5.  
  6. <BODY>
  7. <!-- 
  8. YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
  9. IT RETURNS .. ERROR..
  10. -->
  11. <H1>RESIZABLE TABLE COLUMN</H1>
  12.  
  13. <table style="border: 1px gray solid">
  14. <tr>
  15. <td>
  16. <div class="scrollable"> 
  17.  
  18. <TABLE border="1" STYLE="width:500px; overflow:hidden; table-layout:fixed" ID="MAINTABLE" class="sortable">
  19.  
  20. <THEAD>
  21.  
  22. <TR>
  23.  
  24. <TH id="panel0"  class='move' onmousemove="over=do_resize(this);over_id='panel0'"  onmouseover="over=do_resize(this);over_id='panel0'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO0</TH>
  25.  
  26. <TH id="panel1"  class='move' onmousemove="over=do_resize(this);over_id='panel1'"  onmouseover="over=do_resize(this);over_id='panel1'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO1</TH>
  27.  
  28. <TH id="panel2"  class='move' onmousemove="over=do_resize(this);over_id='panel2'"  onmouseover="over=do_resize(this);over_id='panel2'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO2</TH>
  29.  
  30. <TH id="panel3"  class='move' onmousemove="over=do_resize(this);over_id='panel3'"  onmouseover="over=do_resize(this);over_id='panel3'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO3</TH>
  31.  
  32. <TH id="panel4"  class='move' onmousemove="over=do_resize(this);over_id='panel4'"  onmouseover="over=do_resize(this);over_id='panel4'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO4</TH>
  33.  
  34. </TR>
  35. </THEAD> 
  36. <TBODY>
  37. <TR>
  38.  
  39. <TD>1_0</TD>
  40.  
  41.  
  42. <TD><input type="text" value="this is a very long text string" style="width:100%" ></TD>
  43.  
  44.  
  45. <TD>1_2</TD>
  46.  
  47.  
  48. <TD>1_3</TD>
  49.  
  50.  
  51. <TD>1_4</TD>
  52.  
  53.  
  54. </TR>
  55.  
  56.  
  57. <TR>
  58.  
  59. <TD>2_0</TD>
  60.  
  61.  
  62. <TD>2_1</TD>
  63.  
  64.  
  65. <TD>2_2</TD>
  66.  
  67.  
  68. <TD>2_3</TD>
  69.  
  70.  
  71. <TD>2_4</TD>
  72.  
  73.  
  74. </TR>
  75.  
  76.  
  77. <TR>
  78.  
  79. <TD>3_0</TD>
  80.  
  81.  
  82. <TD>3_1</TD>
  83.  
  84.  
  85. <TD>3_2</TD>
  86.  
  87.  
  88. <TD>3_3</TD>
  89.  
  90.  
  91. <TD>3_4</TD>
  92.  
  93.  
  94. </TR>
  95.  
  96.  
  97. <TR>
  98.  
  99. <TD>4_0</TD>
  100.  
  101.  
  102. <TD>4_1</TD>
  103.  
  104.  
  105. <TD>4_2</TD>
  106.  
  107. <TD>4_3</TD>
  108. <TD>4_4</TD>
  109.  
  110. </TR>
  111. </TBODY>
  112. </table>
  113.  
  114. </div>
  115. </td>
  116. </tr>
  117. </table>
  118. <div id="status"></div>
  119. </HTML>
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,829
#10: Nov 12 '07

re: resize columns in a table

Am I missing something? Above it was said html tables are not resizable. Why can't the 'height' and 'width' CSS be used?
Newbie
  
Join Date: May 2007
Posts: 14
#11: Nov 12 '07

re: resize columns in a table

Here are my final mods. It is based on
SYED NAVED ULLAH SHAH and http://www.kryogenix.org/code/browse...e/sorttable.js solutions.

The table columns are resizable, table is sortable and scrollable and works in both IE and Mozilla.
I was told that you can not prevent an onclick event from being fired. If you don't want the column sorted when you resize then release the mouse outside the column.


Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <style>
  4. h1, h2{
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6.  font-size:13px;
  7.  
  8. }
  9. .move
  10. {
  11.  width:100%;
  12.  background-color:#99CCFF;
  13.  border-bottom:1px solid blue;
  14.  font-size:14px;
  15.  font-family:vardana;
  16.  font-color:"#33CCAA";
  17.  text-align:center;
  18. }
  19.  
  20. .info
  21. {
  22.  width:100%;
  23.  background-color:#99CCFF;
  24.  border-top:1px solid blue;
  25.  font-size:13px;
  26.  font-family:vardana;
  27.  font-color:"#33CCAA";
  28. }
  29.  
  30. .panel2{
  31.  width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
  32.  
  33. .panel{
  34.  width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
  35. .panel a:visited{color:blue;}
  36.  
  37. .panel a{text-decoration:none;color:blue}
  38.  
  39. .panel a:hover{text-decoration:none;}
  40.  
  41.  
  42.  
  43. #panel a.visited{
  44.  
  45. text-decoration:none;
  46.  
  47. }
  48.  
  49. .menu
  50.  
  51. {
  52.  
  53.  width:100%;
  54.  
  55.  background-color:lightyellow;
  56.  
  57.  font-size:13px;
  58.  
  59.  font-family:vardana;
  60.  
  61. }
  62.  
  63. </style>
  64.  
  65.       <!--[if IE]>
  66.       <style type="text/css">
  67.          div.scrollable {
  68.                /* shrink the window, adjust for the 2 border pixels */
  69.               height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= 80  ? "80px": "auto" );  
  70.               overflow-x: visible;
  71.               overflow-y: auto;
  72.          }
  73.  
  74.          div.scrollable table {
  75.             /* adjust for the 17 pixels for the scrollbar */
  76.             width: expression(this.parentNode.offsetWidth-17);
  77.          }
  78.  
  79.          /* set the table row */
  80.          div.scrollable table thead tr {
  81.          position: relative;
  82.            /* this fixes IE header jumping bug */
  83.            top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );   
  84.          }
  85.       </style>
  86.       <![endif]-->
  87.  
  88.       <!-- if mozilla -->
  89.       <style type="text/css">
  90.          html>body div.scrollable tbody {
  91.             height: 80px;
  92.             overflow: auto;
  93.          }
  94.  
  95.          /* add 17 for the scrollbar */
  96.          html>body th.scrollbarCol {
  97.             width:17px;
  98.          }
  99.  
  100.       </style>
  101.  
  102. <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >    
  103. </script>
  104.  
  105. <SCRIPT LANGUAGE="JavaScript">
  106. var ob;
  107. var over = false;
  108. var over_id ="";
  109. var iEdgeThreshold = 10;
  110.  
  111. function findPos(obj) {
  112.   var curleft = curtop = 0;
  113.   if (obj.offsetParent) {
  114.       curleft = obj.offsetLeft;
  115.       curtop = obj.offsetTop;
  116.       while (obj = obj.offsetParent) {
  117.          curleft += obj.offsetLeft;
  118.          curtop += obj.offsetTop;
  119.       }
  120.    }
  121.    return [curleft,curtop];
  122. }
  123.  
  124. /* Function that tells me if on the border or not */
  125. function isOnBorderLeft(objTable,objTh,event){
  126.     var left = objTh.offsetLeft;
  127.     var pos = findPos(objTable);
  128.     var absLeft = pos[0] + left;
  129.  
  130.     if( event.clientX < (absLeft + iEdgeThreshold) ){
  131.        return 1;
  132.     }
  133.     return 0;
  134. }
  135.  
  136. function isOnBorderRight(objTable,objTh,event){
  137.   var width = objTh.offsetWidth;
  138.   var left = objTh.offsetLeft;
  139.   var pos = findPos(objTable);
  140.   var absRight = pos[0] + left + width;
  141.  
  142.   if( event.clientX > (absRight - iEdgeThreshold) ){
  143.       return 1;
  144.   }
  145.   return 0;
  146. } 
  147.  
  148. function getNodeName(objReference,nodeName){
  149.    var oElement = objReference;
  150.    while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
  151.       if (oElement.tagName.toUpperCase() == nodeName) {
  152.          return oElement;
  153.       }
  154.       oElement = oElement.parentNode;
  155.    }
  156.    return null;
  157. }
  158.  
  159.  
  160. function do_resize(objTh,event){
  161.     if(!event) event = window.event;
  162.     var objTable = getNodeName(objTh,"TABLE");
  163.     if( isOnBorderLeft(objTable, objTh,event) ){ 
  164.        objTh.style.cursor="e-resize";
  165.        return true;
  166.     }
  167.     else if( isOnBorderRight(objTable,objTh,event) ){ 
  168.        objTh.style.cursor="e-resize";
  169.        return true;
  170.     }
  171.  
  172.     objTh.style.cursor="";
  173.     return false;
  174. }
  175.  
  176. function MD(event) {
  177.    if(!event) event = window.event;
  178.  
  179.    MOUSTSTART_X=event.clientX;
  180.    MOUSTSTART_Y=event.clientY;
  181.  
  182.    if (over){      
  183.        ob = document.getElementById(over_id);
  184.        ob2 = getNodeName(ob,"TABLE");
  185.        obwidth=parseInt(ob.style.width);
  186.        obwidth2=parseInt(ob2.style.width);
  187.    }        
  188. }
  189.  
  190. function MM(event) {
  191.     if(!event) event = window.event;
  192.  
  193.     if (ob) {
  194.         st=event.clientX-MOUSTSTART_X+obwidth;
  195.         st2=event.clientX-MOUSTSTART_X+obwidth2;
  196.  
  197.         if(st>=30){
  198.             ob.style.width=st;
  199.             ob2.style.width=st2;
  200.             document.getElementById("status").innerHTML=st;
  201.         }
  202.         if(event.stopPropagation)event.stopPropagation();
  203.         if(document.selection) document.selection.empty();
  204.         else if(window.getSelection)window.getSelection().removeAllRanges();
  205.     }
  206. }
  207.  
  208. function MU(event) {
  209.     if(!event) event = window.event;
  210.     if(ob != null){
  211.         if(event.stopPropagation)event.stopPropagation();
  212.         if(document.selection) document.selection.empty();
  213.         else if(window.getSelection)window.getSelection().removeAllRanges();
  214.         ob = null;
  215.     }
  216. }
  217.  
  218. document.onmousedown = MD;
  219. document.onmousemove = MM;
  220. document.onmouseup = MU;
  221. </script>
  222.  
  223.  
  224. </HEAD>
  225.  
  226. <BODY>
  227. <!-- 
  228. YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
  229. IT RETURNS .. ERROR..
  230. -->
  231. <H1>RESIZABLE TABLE COLUMN</H1>
  232.  
  233. <table style="border: 1px gray solid">
  234. <tr>
  235. <td>
  236. <div class="scrollable">
  237. <TABLE border="1" STYLE="width:500px; overflow:hidden; table-layout:fixed" class="sortable">
  238.  
  239. <THEAD>
  240.  
  241. <TR>
  242.  
  243. <TH id="panel0"  class='move' onmousemove="over=do_resize(this,event);over_id='panel0'"  onmouseover="over=do_resize(this,event);over_id='panel0'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO0</TH>
  244.  
  245. <TH id="panel1"  class='move' onmousemove="over=do_resize(this,event);over_id='panel1'"  onmouseover="over=do_resize(this,event);over_id='panel1'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO1</TH>
  246.  
  247. <TH id="panel2"  class='move' onmousemove="over=do_resize(this,event);over_id='panel2'"  onmouseover="over=do_resize(this,event);over_id='panel2'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO2</TH>
  248.  
  249. <TH id="panel3"  class='move' onmousemove="over=do_resize(this,event);over_id='panel3'"  onmouseover="over=do_resize(this,event);over_id='panel3'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO3</TH>
  250.  
  251. <TH id="panel4"  class='move' onmousemove="over=do_resize(this,event);over_id='panel4'"  onmouseover="over=do_resize(this,event);over_id='panel4'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO4</TH>
  252.  
  253. <TH class="sorttable_nosort scrollbarCol"></TH>
  254.  
  255. </TR>
  256. </THEAD> 
  257. <TBODY>
  258. <TR>
  259.  
  260. <TD>1_0</TD>
  261.  
  262.  
  263. <TD><input type="text" value="this is a very long text string" style="width:100%" ></TD>
  264.  
  265.  
  266. <TD>1_2</TD>
  267.  
  268.  
  269. <TD>1_3</TD>
  270.  
  271.  
  272. <TD>1_4</TD>
  273.  
  274.  
  275. </TR>
  276.  
  277.  
  278. <TR>
  279.  
  280. <TD>2_0</TD>
  281.  
  282.  
  283. <TD>2_1</TD>
  284.  
  285.  
  286. <TD>2_2</TD>
  287.  
  288.  
  289. <TD>2_3</TD>
  290.  
  291.  
  292. <TD>2_4</TD>
  293.  
  294.  
  295. </TR>
  296.  
  297.  
  298. <TR>
  299.  
  300. <TD>3_0</TD>
  301.  
  302.  
  303. <TD>3_1</TD>
  304.  
  305.  
  306. <TD>3_2</TD>
  307.  
  308.  
  309. <TD>3_3</TD>
  310.  
  311.  
  312. <TD>3_4</TD>
  313.  
  314.  
  315. </TR>
  316.  
  317.  
  318. <TR>
  319.  
  320. <TD>4_0</TD>
  321.  
  322.  
  323. <TD>4_1</TD>
  324.  
  325.  
  326. <TD>4_2</TD>
  327.  
  328. <TD>4_3</TD>
  329. <TD>4_4</TD>
  330.  
  331. </TR>
  332. </TBODY>
  333. </table>
  334. </div>
  335. </td>
  336. </tr>
  337. </table>
  338. <div id="status"></div>
  339. </HTML>
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#12: Nov 13 '07

re: resize columns in a table

Quote:

Originally Posted by drhowarddrfine

Am I missing something? Above it was said html tables are not resizable. Why can't the 'height' and 'width' CSS be used?

Yes, they could be used, but then we'd probably need a bit of JavaScript if the user is going to resize the table columns (HTML/CSS+JavaScript = DHTML).
Newbie
  
Join Date: May 2007
Posts: 14
#13: Nov 16 '07

re: resize columns in a table

Quote:

Originally Posted by acoder

Yes, they could be used, but then we'd probably need a bit of JavaScript if the user is going to resize the table columns (HTML/CSS+JavaScript = DHTML).

Here is my latest code for resizing html table.
The example table is table resizable, column resizable, searchable, sortable and scrollable.

Todo:
Searchable for mozilla.



Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <style>
  4. h1, h2{
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6.  font-size:13px;
  7.  
  8. }
  9.  
  10. </style>
  11.  
  12.       <!--[if IE]>
  13.       <style type="text/css">
  14.          div.scrollable {
  15.                /* shrink the window */
  16.               height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= parseInt(this.getElementsByTagName('TBODY')[0].style.height)  && parseInt(this.getElementsByTagName('TBODY')[0].style.height) >  0 ? this.getElementsByTagName('TBODY')[0].style.height : "auto" );  
  17.               overflow-x: visible;
  18.               overflow-y: auto;
  19.           width: expression(this.getElementsByTagName('TABLE')[0].offsetWidth);
  20.           }
  21.  
  22.          /* set the table row */
  23.          div.scrollable table thead tr {
  24.          position: relative;
  25.            /* this fixes IE header jumping bug, adjust for the table border */
  26.            top: expression( (this.parentNode.parentNode.parentNode.scrollTop - 2)+ 'px' );   
  27.          }
  28.  
  29.          /* needed for IE if tbody.height is set */
  30.          div.scrollable tr{
  31.             height:auto;
  32.          }
  33.  
  34.       </style>
  35.       <![endif]-->
  36.  
  37.       <style type="text/css">
  38.          /* if mozilla */
  39.          html>body div.scrollable tbody {
  40.             overflow: auto;
  41.          }
  42.  
  43.          table.resizable th{
  44.             text-align:center;
  45.             overflow: hidden;
  46.          }
  47.  
  48.          /* if mozilla, add 10 for the scrollbar */
  49.          html>body th.scrollbarCol {
  50.             width:10px;
  51.          }
  52.  
  53.          table.resizable td{
  54.             overflow: hidden;
  55.          }
  56.  
  57.          table.resizable{
  58.             table-layout:fixed;
  59.          }
  60.  
  61.          table.resizable input{
  62.             width:100%;
  63.          }
  64.  
  65.          table.resizable textarea{
  66.             width:100%;
  67.          }
  68.  
  69.          .nowrap {
  70.              white-space:nowrap;
  71.          }
  72.  
  73.          /* needed for IE */
  74.          table.tabular th.scrollbarCol {
  75.             background-color:transparent; 
  76.          }
  77.  
  78.          table.tabular {
  79.             FONT-SIZE: 13px;
  80.             FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
  81.             COLOR: #336699;
  82.          }
  83.  
  84.          table.tabular thead {
  85.              COLOR: #ffffff;
  86.              FONT-WEIGHT: bold;
  87.          }
  88.  
  89.          table.tabular th{
  90.             background-color:#c0c0c0; 
  91.             padding: 4px;
  92.          }
  93.  
  94.          table.tabular td {
  95.             background-color:#EAF4F3;
  96.             padding: 2px;
  97.          }
  98.       </style>
  99. <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >    
  100. </script>
  101. <SCRIPT type="text/javascript">
  102. var objTh = null;
  103. var objDiv = null;
  104. var overColumn = false;
  105. var overTable = false;
  106.  
  107. var iEdgeThreshold = 10;
  108.  
  109. function findPos(obj) {
  110.   var curleft = curtop = 0;
  111.   if (obj.offsetParent) {
  112.       curleft = obj.offsetLeft;
  113.       curtop = obj.offsetTop;
  114.       while (obj = obj.offsetParent) {
  115.          curleft += obj.offsetLeft;
  116.          curtop += obj.offsetTop;
  117.       }
  118.    }
  119.    return [curleft,curtop];
  120. }
  121.  
  122. /* Function that tells me if on the right border or not */
  123. function isOnBorderRight(elem,event){
  124.   var width = elem.offsetWidth;
  125.   var pos = findPos(elem);
  126.   var absRight = pos[0] + width;
  127.  
  128.   if( event.clientX > (absRight - iEdgeThreshold) ){
  129.       return true;
  130.   }
  131.  
  132.   return false;
  133. }
  134.  
  135. /* Function that tells me if on the bottom border or not */
  136. function isOnBorderBottom(elem,event){
  137.   var height = elem.offsetHeight;
  138.  
  139.   var pos = findPos(elem);
  140.   var absTop = pos[1];
  141.  
  142.   if( event.clientY > (absTop + elem.offsetHeight - iEdgeThreshold) ){
  143.       return true;
  144.   }
  145.   return false;
  146. }
  147.  
  148. function getParentNode(objReference,nodeName,className){
  149.    var oElement = objReference;
  150.    while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
  151.       if (oElement.tagName.toUpperCase() == nodeName && (className == null || oElement.className.search("\b"+className+"\b") != 1) ) {
  152.          return oElement;
  153.       }
  154.       oElement = oElement.parentNode;
  155.    }
  156.    return null;
  157. }
  158.  
  159. function doColumnResize(th,event){
  160.     if(!event) event = window.event;
  161.     if( isOnBorderRight(th,event)){ 
  162.        overColumn=true;
  163.        th.style.cursor="e-resize";
  164.     }
  165.     else{
  166.        overColumn=false;
  167.        th.style.cursor="";
  168.     }
  169.     return overColumn;
  170. }
  171.  
  172. function doTableResize(div,event){
  173.     if(!event) event = window.event;
  174.  
  175.     if( isOnBorderBottom(div,event)){ 
  176.        div.style.cursor="move";
  177.        overTable=true;
  178.     }
  179.     else{
  180.        div.style.cursor="";
  181.        overTable=false;
  182.     }
  183.     return overTable;
  184. }
  185.  
  186. function doneTableResizing(){
  187.    overTable=false;
  188. }
  189.  
  190. function doneColumnResizing(){
  191.    overColumn=false;
  192. }
  193.  
  194. function MD(event) {
  195.    if(!event) event = window.event;
  196.  
  197.    MOUSTSTART_X=event.clientX;
  198.    MOUSTSTART_Y=event.clientY;
  199.  
  200.  
  201.    if (overColumn){
  202.  
  203.        if(event.srcElement)objTh = event.srcElement;
  204.        else if(event.target)objTh = event.target;
  205.        else return;
  206.  
  207.        objTh = getParentNode(objTh,"TH");
  208.        if(objTh == null) return;
  209.        objTable = getParentNode(objTh,"TABLE");
  210.        objThWidth=parseInt(objTh.style.width);
  211.        objTableWidth=parseInt(objTable.offsetWidth);
  212.    }
  213.    else if(overTable){
  214.        if(event.srcElement)objDiv = event.srcElement;
  215.        else if(event.target)objDiv = event.target;
  216.        else return;
  217.  
  218.        objDiv = getParentNode(objDiv,"DIV","scrollable");
  219.  
  220.        if(objDiv == null)return;
  221.        objDivHeight=objDiv.offsetHeight;
  222.        objTbodyHeight=objDiv.getElementsByTagName('TBODY')[0].offsetHeight;
  223.    }
  224. }
  225.  
  226. function MM(event) {
  227.     if(!event) event = window.event;
  228.  
  229.     if (objTh) {
  230.         var thSt=event.clientX-MOUSTSTART_X+objThWidth;
  231.         var tableSt=event.clientX-MOUSTSTART_X+objTableWidth;
  232.  
  233.         /* check for minimum width */
  234.         if(thSt>=10){
  235.             objTh.style.width=thSt;
  236.             objTable.style.width=tableSt;
  237.         }
  238.         if(document.selection) document.selection.empty();
  239.         else if(window.getSelection)window.getSelection().removeAllRanges();
  240.     }
  241.     else if( objDiv ){
  242.  
  243.         var divSt=event.clientY-MOUSTSTART_Y+objDivHeight;
  244.         var tbodySt = event.clientY-MOUSTSTART_Y+objTbodyHeight;
  245.  
  246.  
  247.         /* check for minimum height */
  248.         if(divSt >=70 ){
  249.  
  250.             var tbody = objDiv.getElementsByTagName('TBODY')[0];
  251.             var table = objDiv.getElementsByTagName('TABLE')[0];
  252.  
  253.             /* adjust the height for mozilla, this is not needed for IE */
  254.             if(tbodySt >= tbody.scrollHeight)tbodySt=tbody.scrollHeight;
  255.             tbody.style.height=tbodySt;
  256.  
  257.             /* adjust the height for IE, this is not needed more Mozilla */
  258.             if(divSt >= table.scrollHeight)divSt=table.scrollHeight;
  259.             objDiv.style.height=divSt;
  260.         }
  261.         if(document.selection) document.selection.empty();
  262.         else if(window.getSelection)window.getSelection().removeAllRanges();
  263.     }
  264. }
  265.  
  266. function MU(event) {
  267.     if(!event) event = window.event;
  268.     if(objTh){
  269.         if(document.selection) document.selection.empty();
  270.         else if(window.getSelection)window.getSelection().removeAllRanges();
  271.         objTh = null;
  272.     }
  273.     else if( objDiv ){
  274.         if(document.selection) document.selection.empty();
  275.         else if(window.getSelection)window.getSelection().removeAllRanges();
  276.         objDiv = null;
  277.     }
  278. }
  279.  
  280. document.onmousedown = MD;
  281. document.onmousemove = MM;
  282. document.onmouseup = MU;
  283. </script>
  284.  
  285.  
  286. <SCRIPT type="text/javascript">
  287. function createFindWindow(){
  288.     // FIXME: we need to do a mozilla implementation
  289.     //mozilla
  290.     if(window.find){
  291.        window.find();
  292.     }
  293.     // IE
  294.     else {
  295.        window.open( "find.html", "openload_find","status=yes,width=500,height=250" );   
  296.     }
  297.  }
  298. </script>
  299.  
  300.  
  301. </HEAD>
  302.  
  303. <BODY>
  304. <!-- 
  305. YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
  306. IT RETURNS .. ERROR..
  307. -->
  308. <H1>RESIZABLE TABLE COLUMN</H1>
  309. <form>
  310. <a href="javascript:createFindWindow()">Find</a>
  311.  
  312. <div class="scrollable" onmousemove="doTableResize(this,event)"  onmouseover="doTableResize(this,event)" onmouseout="doneTableResizing()" >
  313. <TABLE  id="mytable"  style="width:510px" class="sortable resizable tabular">
  314.  
  315. <THEAD>
  316.  
  317. <TR>
  318.  
  319. <TH onmousemove="doColumnResize(this,event)"  onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:60px'>Index</TH>
  320.  
  321. <TH onmousemove="doColumnResize(this,event)"  onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:170px'><span class="nowrap">Parameter Name</span></TH>
  322.  
  323. <TH onmousemove="doColumnResize(this,event)"  onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:170px'><span class="nowrap">Parameter Value</span></TH>
  324.  
  325. <TH onmousemove="doColumnResize(this,event)"  onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:110px'><span class="nowrap">Page Name</span></TH>
  326.  
  327. <TH class="sorttable_nosort scrollbarCol"></TH>
  328.  
  329. </TR>
  330. </THEAD> 
  331. <TBODY style="height:200px">
  332. <TR>
  333.  
  334. <TD>0</TD>
  335.  
  336. <TD>1_2</TD>
  337.  
  338. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  339.  
  340. <TD>1_3</TD>
  341.  
  342. </TR>
  343.  
  344. <TR>
  345.  
  346. <TD>0</TD>
  347.  
  348. <TD>1_2</TD>
  349.  
  350. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  351.  
  352. <TD>1_3</TD>
  353.  
  354. </TR>
  355.  
  356. <TR>
  357.  
  358. <TD>0</TD>
  359.  
  360. <TD>1_2</TD>
  361.  
  362. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  363.  
  364. <TD>1_3</TD>
  365.  
  366. </TR>
  367. <TR>
  368.  
  369. <TD>0</TD>
  370.  
  371. <TD>1_2</TD>
  372.  
  373. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  374.  
  375. <TD>1_3</TD>
  376.  
  377. </TR>
  378. <TR>
  379.  
  380. <TD>0</TD>
  381.  
  382. <TD>1_2</TD>
  383.  
  384. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  385.  
  386. <TD>1_3</TD>
  387.  
  388. </TR>
  389. <TR>
  390.  
  391. <TD>0</TD>
  392.  
  393. <TD>1_2</TD>
  394.  
  395. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  396.  
  397. <TD>1_3</TD>
  398.  
  399. </TR>
  400. <TR>
  401.  
  402. <TD>0</TD>
  403.  
  404. <TD>1_2</TD>
  405.  
  406. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  407.  
  408. <TD>1_3</TD>
  409.  
  410. </TR>
  411. <TR>
  412.  
  413. <TD>0</TD>
  414.  
  415. <TD>1_2</TD>
  416.  
  417. <TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
  418.  
  419. <TD>1_3</TD>
  420.  
  421. </TR>
  422.  
  423. <TR>
  424.  
  425. <TD>1</TD>
  426.  
  427. <TD><span class="nowrap">this is a very long paramter name</span></TD> 
  428.  
  429. <TD>2_2</TD>
  430.  
  431.  
  432. <TD>2_3</TD>
  433.  
  434.  
  435. </TR>
  436.  
  437.  
  438. <TR>
  439.  
  440. <TD>3_0</TD>
  441. <TD>3_2</TD>
  442.  
  443. <TD><textarea> 
  444. this is a test of
  445. this is a test of
  446. </textarea></TD>
  447.  
  448. <TD>3_3</TD>
  449.  
  450.  
  451. </TR>
  452.  
  453.  
  454. <TR>
  455.  
  456. <TD>4_0</TD>
  457.  
  458.  
  459. <TD>4_1</TD>
  460.  
  461.  
  462. <TD>4_2</TD>
  463.  
  464. <TD>4_3</TD>
  465.  
  466. </TR>
  467.  
  468. </TBODY>
  469. </table>
  470. <!-- needed for mozilla to shrink the window -->
  471. <script type="text/javascript">
  472.   if(window.navigator && window.navigator.userAgent.indexOf("ecko") != -1  ){
  473.       var tbody=document.getElementById('mytable').getElementsByTagName('tbody')[0];
  474.       if(tbody.scrollHeight<=parseInt(tbody.style.height)) tbody.style.height="auto";
  475.   }
  476. </script>
  477. </div>
  478.  
  479. </form>
  480. </BODY>
  481. </HTML>
find.html

-------------------------------
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Find/Replace</TITLE>
  4. <script type="text/javascript">
  5. <!--
  6. var inputTags = null;
  7. var found = false;
  8. var currentInputIdx = 0;
  9. var currentTextRange = null;
  10. var currentSearchVal = null;
  11.  
  12. function initFind(){
  13.    inputTags = new Array();
  14.    var tags = opener.document.getElementsByTagName("input");
  15.    if(tags != null){
  16.       for(i = 0; i < tags.length;++i){
  17.           if(tags[i].type == "text"){
  18.             inputTags[inputTags.length] = tags[i];
  19.           }
  20.       }
  21.    }
  22.  
  23.    tags = opener.document.getElementsByTagName("textarea");
  24.    if(tags != null){
  25.       for(i = 0; i < tags.length;++i){
  26.           inputTags[inputTags.length] = tags[i];
  27.       }
  28.    }
  29. }
  30.  
  31. // returns a calculated value for matching case and
  32. // matching whole words
  33. function searchType(){
  34.   var retval = 0;
  35.   var matchcase = 0;
  36.   var matchword = 0;
  37.   if (document.forms[0]['blnMatchCase'].checked) matchcase = 4;
  38.   if (document.forms[0]['blnMatchWord'].checked) matchword = 2;
  39.   retval = matchcase + matchword;
  40.   return(retval);
  41. }
  42.  
  43. function replaceText(){
  44.  
  45.    // if no current tag then find one
  46.    if(currentTextRange == null) {
  47.       findText();
  48.    }
  49.    // if we have one then replace 
  50.    else if(currentTextRange != null){
  51.       var beforeBookmark = currentTextRange.getBookmark();
  52.       var replaceStr = document.forms[0]['replaceStr'].value;
  53.       currentTextRange.text=replaceStr;
  54.       pushUndoNew(currentTextRange, beforeBookmark, currentSearchStr, replaceStr);
  55.       currentTextRange.collapse(false);
  56.       findText();
  57.    }
  58. }
  59.  
  60. function replaceAllText(){
  61.    found = false;
  62.    if(currentTextRange == null) findText();
  63.  
  64.    while(currentTextRange != null){
  65.        replaceText();
  66.    }
  67. }
  68.  
  69. function findText(){
  70.    if(inputTags == null) initFind();
  71.  
  72.    if (document.forms[0]['searchStr'].value.length < 1) {
  73.      alert("Please enter text in the \"Find what:\" field.");
  74.      return;
  75.    }
  76.  
  77.    if(inputTags.length == 0){
  78.       alert("No input field(s) found on page");
  79.       return;
  80.    }
  81.  
  82.    var searchVal = currentSearchStr = document.forms[0]['searchStr'].value;
  83.  
  84.    var useRegex = document.forms[0]['blnRegex'].checked;
  85.  
  86.    if( currentTextRange == null) {
  87.       currentTextRange = inputTags[currentInputIdx].createTextRange();
  88.       if(useRegex) currentText = currentTextRange.text;
  89.    }
  90.    else {
  91.        currentTextRange.collapse(false);
  92.       // get the remaining search range for regex
  93.        if(useRegex){
  94.            var rng = currentTextRange.duplicate();
  95.            rng.collapse(false);
  96.            rng.moveEnd("textedit");
  97.            currentText = rng.text;
  98.        }
  99.  
  100.    }
  101.  
  102.    var match = true;
  103.  
  104.    if(useRegex){
  105.       try{
  106.          var matches = currentText.match(new RegExp(searchVal));
  107.          if(matches){
  108.              currentSearchStr = matches[0];
  109.          }
  110.          else {
  111.              match = false;
  112.          }
  113.       }
  114.       catch(e){
  115.           alert("Illegal Regex: '" + searchVal + "'");
  116.           return;
  117.       }
  118.    }
  119.  
  120.    var type = searchType();
  121.  
  122.    // found a match within the current text field 
  123.    if( match && currentTextRange.findText(currentSearchStr, 10000, type)){
  124.        currentTextRange.select();
  125.        inputTags[currentInputIdx].scrollIntoView(false);
  126.        currentTextRange.scrollIntoView();
  127.        found = true;
  128.    }
  129.    // no match found and end of the document
  130.    else if( currentInputIdx >= inputTags.length-1 ){
  131.       currentTextRange = null;
  132.       currentInputIdx = 0;
  133.       if(found) alert("Done!");
  134.       else alert("Can not find '" +searchVal +"'");
  135.       found = false;
  136.    }
  137.    // no match found in the current text, look at the next text field 
  138.    else{
  139.       currentTextRange = null;
  140.       ++currentInputIdx;
  141.       findText();
  142.    }
  143. }
  144.  
  145. // BEGIN UNDO BUFFER CODE
  146. // buffer global variables
  147. var undoStack = new Array();
  148.  
  149. // UndoState Object
  150. function UndoState(textRange,searchStr,inputIdx,beforeBookmark, afterBookmark){
  151.    this.textRange = textRange;
  152.    this.searchStr = searchStr;
  153.    this.inputIdx = inputIdx;
  154.    /* two bookmarks are necessary to get back to the before and after state */
  155.    this.afterBookmark = afterBookmark;
  156.    this.beforeBookmark = beforeBookmark;
  157. }
  158.  
  159. // store original search string and bookmarks of each replaced range
  160. function pushUndoNew(rng, beforeBookmark,searchStr, replaceStr) {
  161.     currentTextRange.moveStart("character", -replaceStr.length);
  162.     undoStack[undoStack.length] = new UndoState( currentTextRange,searchStr,currentInputIdx,beforeBookmark,currentTextRange.getBookmark() );
  163. }
  164.  
  165. // perform the undo
  166. function undoReplace() {
  167.     if (undoStack.length) {
  168.         var newLength = undoStack.length-1;
  169.         currentTextRange = undoStack[newLength].textRange;
  170.         currentTextRange.moveToBookmark( undoStack[newLength].afterBookmark );
  171.  
  172.         currentTextRange.text = undoStack[newLength].searchStr;
  173.         currentTextRange.moveToBookmark( undoStack[newLength].beforeBookmark );
  174.  
  175.         // reselect the undo
  176.         currentTextRange.findText(undoStack[newLength].searchStr, 10000);
  177.         currentTextRange.select();
  178.         currentTextRange.scrollIntoView();
  179.  
  180.         currentInputIdx = undoStack[newLength].inputIdx;
  181.         undoStack.length=newLength;
  182.     }
  183. }
  184.  
  185. //-->
  186. </script>
  187. </HEAD>
  188. <BODY bgcolor="#EAF4F3">
  189.   <FORM NAME="frmSearch" method="post" action="">
  190.   <table CELLSPACING="0" cellpadding="5" border="0">
  191.   <tr><td VALIGN="top" align="left" nowrap 
  192.               style="font-family:Arial; font-size:11px;">
  193.     <label for="searchStr" accesskey="n"><u>F</u>ind what:</label><br>
  194.     <INPUT TYPE="TEXT" SIZE=40 NAME="searchStr"
  195.            id="searchStr" style="width:280px;"><br>
  196.     <label for="replaceStr" accesskey="n"><u>R</u>eplace with:</label><br>
  197.     <INPUT TYPE="TEXT" SIZE=40 NAME="replaceStr"
  198.            id="replaceStr" style="width:280px;"><br>
  199.  
  200.     <INPUT TYPE="Checkbox" NAME="blnMatchCase" id="blnMatchCase">
  201.     <label for="blnMatchCase">Match case</label><br>
  202.  
  203.     <INPUT TYPE="Checkbox" NAME="blnMatchWord" ID="blnMatchWord">
  204.     <label for="blnMatchWord">Match whole word only</label>
  205.  
  206.     <INPUT TYPE="Checkbox" NAME="blnRegex" ID="blnRegex">
  207.     <label for="blnRegex">Use regular expression</label>
  208.  
  209.    </td>
  210.   <td rowspan="2" valign="top">
  211.     <button name="btnFind" accesskey="f" onClick="findText();"
  212.         style="width:75px; height:22px; font-family:Tahoma; 
  213.                font-size:11px; margin-top:15px"><u>F</u>ind Next</button><br>
  214.  
  215.     <button name="btnReplace" accesskey="r" onClick="replaceText();"
  216.         style="width:75px; height:22px; font-family:Tahoma; 
  217.                font-size:11px; margin-top:15px"><u>R</u>eplace</button>&nbsp;
  218.  
  219.     <button name="btnReplaceAll" accesskey="a" onClick="replaceAllText();"
  220.         style="width:75px; height:22px; font-family:Tahoma; 
  221.                font-size:11px; margin-top:15px">Replace <u>A</u>ll</button><br>
  222.  
  223.     <button name="btnUndo" onClick="undoReplace();"
  224.         style="width:75px; height:22px; font-family:Tahoma; 
  225.                font-size:11px; margin-top:15px">Undo</button><br>
  226.  
  227.     <button name="btnCancel" onClick="window.close();"
  228.         style="width:75px; height:22px; font-family:Tahoma; 
  229.                font-size:11px; margin-top:7px">Close</button><br>
  230.   </td></tr>
  231. </table>
  232. </FORM>
  233. </BODY>
  234. </HTML>
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#14: Nov 17 '07

re: resize columns in a table

Please use code tags when posting code:

[CODE=javascript]
JavaScript code within code tags
[/code]

If you find that the code doesn't appear for whatever reason, split it up into smaller chunks.
Newbie
  
Join Date: Feb 2007
Posts: 2
#15: Jul 6 '08

re: resize columns in a table

Thanks try this link [removed links]
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#16: Jul 7 '08

re: resize columns in a table

I have removed the links. They add nothing meaningful to the conversation and could be considered similar to spamming.
Newbie
  
Join Date: Dec 2009
Posts: 5
#17: Dec 15 '09

re: resize columns in a table

I have be very happy because from 2 days searching for table grid control with resizable columns.
So, got the code here.Everything is fine here but the problem is with mozilla/firefox which is not allowing to resize the columns.So, what i observed is that if i remove the doctype in the html page, it is working.But removing the doctype from my page disturbing the design of my page.So, i have to complete it fast as the time has been elapsed much in searching this widget.My project deadline is near.

So, Please help me out with some solution here ASAP.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#18: Dec 21 '09

re: resize columns in a table

I haven't tested the code myself, but did none of the code posted earlier work in Firefox?
Newbie
  
Join Date: Dec 2009
Posts: 5
#19: Dec 22 '09

re: resize columns in a table

thanx for the response acoder.I thouhgt nobody might give reply but now i'm happy.
So, the normalised code written by SINCE has not been working in firefox but good in IE.The problem i observed is with DOCTYPE. If i remove the DOCTYPE from my page it is working in both IE and firefox.But removing DOCTYPE disturbing my form completely.So, please help me out in clearing out this problem.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#20: Dec 22 '09

re: resize columns in a table

Which doctype are you using?
Newbie
  
Join Date: Dec 2009
Posts: 5
#21: Dec 23 '09

re: resize columns in a table

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
XMHTL DOCTYPE even other DOCTYPES like HTML or else any loosely DOCTYPED.But still the problem persists.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#22: Dec 30 '09

re: resize columns in a table

I haven't got time to check/test the code, but without a doctype (which you should have), the code makes certain assumptions about the values which are incorrect when you have a doctype. The best thing would be to get a test page and check the values with/without a doctype.
Newbie
  
Join Date: Dec 2009
Posts: 5
#23: 3 Weeks Ago

re: resize columns in a table

When the table is dragged beyond the html width and the page is scrolled, we are unable to drag(resize) the column from that end. Even same bug appears in the Test Code, Thnks n Reply soon.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#24: 1 Week Ago

re: resize columns in a table

I cannot vouch for the code. It was posted by someone with only 2 posts. I would suggest a rethink and good clean code based on: valid doctype, valid HTML/CSS, drag-drop functionality on the column (onmousedown, onmousemove and onmouseup).
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved