473,407 Members | 2,306 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > resize columns in a table

Join Bytes to post your question to a community of 473,407 software developers and data experts.

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 34911
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.  
  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>
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.  
  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>
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

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

Similar topics

1
Resize a table tag
by: yaron | last post by:
Hello is there a resize property or a similar property to a <DIV> tag or <TABLE> tag like there is for the <FRAME> tag thanks yaron
Javascript
157
How to detect table width or height?
by: Dennis | last post by:
Is there some way --using, say, DOM or javascript-- to detect the current pixel width and/or height of a relatively sized table or of one of its columns or rows. I'm going to be writing javascript...
HTML / CSS
2
Mozilla resize my table on input mouseover....
by: reinier | last post by:
If got a little problem, i've made a webpage that is working fine in IE, but in Mozilla i've got a little problem. When i go with my mouse over a input box or some kind of form object. The table...
Javascript
1
resize the column of a table
by: SAN CAZIANO | last post by:
how can i resize the column of a table and add both the scrollbar to it ?
Javascript
0
Can't Resize Columns...
by: Marty Cruise | last post by:
How come when I delete a row of a table I lose the ability to resize columns of that table? Does anyone else find the VS.NET IDE pretty flaky when it comes to ASP.Net GUI development?
ASP.NET
1
Resize table
by: Mark Goldin | last post by:
I am adding a table to my aspx page to keep things alligned. How can I resize columns and rows? In FrontPage I can do with a mouse. Cannot do that in VS. Any help?
ASP.NET
5
Cursors - Resize columns
by: Dennis | last post by:
I trying to understand how to have a column spliter cursor with a dashed line drawn down indicating the current size of the column depending on where the splitter cursor is. I want this to be like...
Visual Basic .NET
0
no resize columns in listview
by: JR | last post by:
Hi I use this code to bloc the resize from columnheaders. the problem is that all or non columns are blockt. I want to choice with column is fixt What must I add/change Jan
Visual Basic .NET
1
How do I pass columns/table names as parameters?
by: ajax.sam | last post by:
hi all, i got 2 questions! i want to do these: 1. select @col1 from some_table where <some_conditions>; I can pass parameters by using Parameters.Add for <some_conditionsbut not for the @col1....
C# / C Sharp
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!