470,874 Members | 1,470 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,874 developers. It's quick & easy.

resize columns in a table

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
Jan 11 '07 #1
23 34588
b1randon
171 Expert 100+
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.
Jan 12 '07 #2
acoder
16,027 Expert Mod 8TB
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.
Jan 12 '07 #3
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 :)
Jan 15 '07 #4
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>
Feb 1 '07 #5
acoder
16,027 Expert Mod 8TB
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.
Feb 1 '07 #6
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.  
Mar 14 '07 #7
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.  
Mar 14 '07 #8
since
14
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. function TableResize_getNodeName(objReference,nodeName) 
  50. {
  51.    var oElement = objReference;
  52.    while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
  53.       if (oElement.tagName.toUpperCase() == nodeName) {
  54.          return oElement;
  55.       }
  56.       oElement = oElement.parentNode;
  57.    }
  58.    return null;
  59. }
  60.  
  61.  
  62. function do_resize(objTh,event){
  63.     if(event == null){
  64.        event = window.event;
  65.     }
  66.     var objTable = TableResize_getNodeName(objTh, "TABLE");
  67.     if( TableResize_isOnBorderLeft( objTable, objTh,event) ){ 
  68.        objTh.style.cursor="e-resize";
  69.        return true;
  70.     }
  71.     else if( TableResize_isOnBorderRight( objTable, objTh,event) ){ 
  72.        objTh.style.cursor="e-resize";
  73.        return true;
  74.     }
  75.  
  76.     objTh.style.cursor="";
  77.     return false;
  78. }
  79.  
  80. function MD(e) {
  81.    MOUSTSTART_X=event.clientX;
  82.    MOUSTSTART_Y=event.clientY;
  83.         if (over){      
  84.             if (N) {
  85.             ob = document.getElementById(over_id);
  86.             X=e.layerX;
  87.             Y=e.layerY;
  88.             return false;
  89.             }
  90.  
  91.             else{
  92.  
  93.             ob = document.getElementById(over_id);
  94.             ob2 = document.getElementById("MAINTABLE");
  95.             obwidth=parseInt(ob.style.width);
  96.             obwidth2=parseInt(ob2.style.width);
  97.             X=event.offsetX;
  98.             Y=event.offsetY;
  99.  
  100.             }
  101.  
  102.         }
  103. }
  104.  
  105.  
  106. function MM(e) {
  107.  
  108.     if (ob) {
  109.             if (N) {
  110.                ob.style.top = e.pageY-Y;
  111.                ob.style.left = e.pageX-X;
  112.             }
  113.             else{
  114.                st=event.clientX-MOUSTSTART_X+obwidth;
  115.                st2=event.clientX-MOUSTSTART_X+obwidth2;
  116.  
  117.                if(st>=30){
  118.                    ob.style.width=st;
  119.                    ob2.style.width=st2;
  120.                    document.getElementById("status").innerHTML=st;
  121.                }
  122.                document.selection.empty();
  123.             }       
  124.     } 
  125. }
  126.  
  127. function MU(e) {
  128.  
  129.     if(ob != null){
  130.         document.selection.empty();
  131.         ob = null;
  132.     }
  133. }
  134.  
  135. if (N) {
  136.   document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  137. }
  138.  
  139. document.onmousedown = MD;
  140. document.onmousemove = MM;
  141. 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>
Nov 12 '07 #9
drhowarddrfine
7,435 Expert 4TB
Am I missing something? Above it was said html tables are not resizable. Why can't the 'height' and 'width' CSS be used?
Nov 12 '07 #10
since
14
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. function getNodeName(objReference,nodeName){
  148.    var oElement = objReference;
  149.    while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
  150.       if (oElement.tagName.toUpperCase() == nodeName) {
  151.          return oElement;
  152.       }
  153.       oElement = oElement.parentNode;
  154.    }
  155.    return null;
  156. }
  157.  
  158.  
  159. function do_resize(objTh,event){
  160.     if(!event) event = window.event;
  161.     var objTable = getNodeName(objTh,"TABLE");
  162.     if( isOnBorderLeft(objTable, objTh,event) ){ 
  163.        objTh.style.cursor="e-resize";
  164.        return true;
  165.     }
  166.     else if( isOnBorderRight(objTable,objTh,event) ){ 
  167.        objTh.style.cursor="e-resize";
  168.        return true;
  169.     }
  170.  
  171.     objTh.style.cursor="";
  172.     return false;
  173. }
  174.  
  175. function MD(event) {
  176.    if(!event) event = window.event;
  177.  
  178.    MOUSTSTART_X=event.clientX;
  179.    MOUSTSTART_Y=event.clientY;
  180.  
  181.    if (over){      
  182.        ob = document.getElementById(over_id);
  183.        ob2 = getNodeName(ob,"TABLE");
  184.        obwidth=parseInt(ob.style.width);
  185.        obwidth2=parseInt(ob2.style.width);
  186.    }        
  187. }
  188.  
  189. function MM(event) {
  190.     if(!event) event = window.event;
  191.  
  192.     if (ob) {
  193.         st=event.clientX-MOUSTSTART_X+obwidth;
  194.         st2=event.clientX-MOUSTSTART_X+obwidth2;
  195.  
  196.         if(st>=30){
  197.             ob.style.width=st;
  198.             ob2.style.width=st2;
  199.             document.getElementById("status").innerHTML=st;
  200.         }
  201.         if(event.stopPropagation)event.stopPropagation();
  202.         if(document.selection) document.selection.empty();
  203.         else if(window.getSelection)window.getSelection().removeAllRanges();
  204.     }
  205. }
  206.  
  207. function MU(event) {
  208.     if(!event) event = window.event;
  209.     if(ob != null){
  210.         if(event.stopPropagation)event.stopPropagation();
  211.         if(document.selection) document.selection.empty();
  212.         else if(window.getSelection)window.getSelection().removeAllRanges();
  213.         ob = null;
  214.     }
  215. }
  216.  
  217. document.onmousedown = MD;
  218. document.onmousemove = MM;
  219. document.onmouseup = MU;
  220. </script>
  221.  
  222.  
  223. </HEAD>
  224.  
  225. <BODY>
  226. <!-- 
  227. YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
  228. IT RETURNS .. ERROR..
  229. -->
  230. <H1>RESIZABLE TABLE COLUMN</H1>
  231.  
  232. <table style="border: 1px gray solid">
  233. <tr>
  234. <td>
  235. <div class="scrollable">
  236. <TABLE border="1" STYLE="width:500px; overflow:hidden; table-layout:fixed" class="sortable">
  237.  
  238. <THEAD>
  239.  
  240. <TR>
  241.  
  242. <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>
  243.  
  244. <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>
  245.  
  246. <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>
  247.  
  248. <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>
  249.  
  250. <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>
  251.  
  252. <TH class="sorttable_nosort scrollbarCol"></TH>
  253.  
  254. </TR>
  255. </THEAD> 
  256. <TBODY>
  257. <TR>
  258.  
  259. <TD>1_0</TD>
  260.  
  261.  
  262. <TD><input type="text" value="this is a very long text string" style="width:100%" ></TD>
  263.  
  264.  
  265. <TD>1_2</TD>
  266.  
  267.  
  268. <TD>1_3</TD>
  269.  
  270.  
  271. <TD>1_4</TD>
  272.  
  273.  
  274. </TR>
  275.  
  276.  
  277. <TR>
  278.  
  279. <TD>2_0</TD>
  280.  
  281.  
  282. <TD>2_1</TD>
  283.  
  284.  
  285. <TD>2_2</TD>
  286.  
  287.  
  288. <TD>2_3</TD>
  289.  
  290.  
  291. <TD>2_4</TD>
  292.  
  293.  
  294. </TR>
  295.  
  296.  
  297. <TR>
  298.  
  299. <TD>3_0</TD>
  300.  
  301.  
  302. <TD>3_1</TD>
  303.  
  304.  
  305. <TD>3_2</TD>
  306.  
  307.  
  308. <TD>3_3</TD>
  309.  
  310.  
  311. <TD>3_4</TD>
  312.  
  313.  
  314. </TR>
  315.  
  316.  
  317. <TR>
  318.  
  319. <TD>4_0</TD>
  320.  
  321.  
  322. <TD>4_1</TD>
  323.  
  324.  
  325. <TD>4_2</TD>
  326.  
  327. <TD>4_3</TD>
  328. <TD>4_4</TD>
  329.  
  330. </TR>
  331. </TBODY>
  332. </table>
  333. </div>
  334. </td>
  335. </tr>
  336. </table>
  337. <div id="status"></div>
  338. </HTML>
Nov 12 '07 #11
acoder
16,027 Expert Mod 8TB
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).
Nov 13 '07 #12
since
14
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>
Nov 16 '07 #13
acoder
16,027 Expert Mod 8TB
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.
Nov 17 '07 #14
Thanks try this link [removed links]
Jul 5 '08 #15
acoder
16,027 Expert Mod 8TB
I have removed the links. They add nothing meaningful to the conversation and could be considered similar to spamming.
Jul 7 '08 #16
ayilas
5
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.
Dec 15 '09 #17
acoder
16,027 Expert Mod 8TB
I haven't tested the code myself, but did none of the code posted earlier work in Firefox?
Dec 21 '09 #18
ayilas
5
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.
Dec 22 '09 #19
acoder
16,027 Expert Mod 8TB
Which doctype are you using?
Dec 22 '09 #20
ayilas
5
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.
Dec 23 '09 #21
acoder
16,027 Expert Mod 8TB
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.
Dec 30 '09 #22
ayilas
5
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.
Jan 16 '10 #23
acoder
16,027 Expert Mod 8TB
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).
Jan 31 '10 #24

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by yaron | last post: by
157 posts views Thread by Dennis | last post: by
1 post views Thread by SAN CAZIANO | last post: by
reply views Thread by Marty Cruise | last post: by
1 post views Thread by Mark Goldin | last post: by
5 posts views Thread by Dennis | last post: by
reply views Thread by JR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.