Solved

Change table column width

Posted on 2004-07-30
5
312 Views
Last Modified: 2010-05-18
hi all

i need to change the column width of a table dynamically...

eg: i have created a table with some rows and columns... and then i need to change the column width by dragging the column border.....

Can anyone help me in this .. :-)

Sumesh
0
Comment
Question by:sumachaa
  • 2
5 Comments
 
LVL 14

Expert Comment

by:ziffgone
ID: 11676838
Hi sumachaa, for 50 points on such a complicated question, I'll point you towards a similar question:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21074126.html

And for end result:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21076895.html

mplungjan seems to be working on something similar. Not sure how you'll integrate it into what you are doing, but all of the workings are there.

Regards...
0
 
LVL 2

Expert Comment

by:mmayrell
ID: 11677439
I tried something similier to this before, and I found it very hard to actualy select the border, what I had to do was set up a table with a very skinny column, not much wider than a normal column(just take off all padding and put a space in it with a very small font 1px)  then you can just use the on mouse down function.

at this point just grab the window.clientY and then on mousemove just set the width on the left hand cell to match the window.clientY - cells left offset.  this should do it, just make sure you don't have a width in the right hand cell.

if you raise the point up I could try to write some of the actual code for you.

-Michael
0
 
LVL 14

Accepted Solution

by:
ziffgone earned 50 total points
ID: 11689764
Hi sumachaa, I am feeling very generous today. If the below is to your liking, and you wish to accept this solution as the answer, I'd greatly appreciate a hike in points to accomodate the level of difficulty this answer was to complete. It is a modification of the questions I gave a link to above.

Any modification of the script to suit your needs will have to be done by you or asked in another question.

Adjustable TD Width:

<head>
<script type="text/javascript">
// Store a value from 0 to 100 related to the slider's position
sldValueMin=0
sldValueMax=100

// Slider's head left and top
sldTop=0
sldLeft=0

// Drag action is on going is set to true
doDrag=false
dragElement=''

// Mouse cursor position relatively to the slider's head
sldMouseLeft=0
sldMouseTop=0

// Slider's container left and top boundaries
minLeft=0
maxLeft=0


// Get and set positions
function getAbsLeft(o) {
     oLeft = o.offsetLeft
     while(o.offsetParent!=null) {
          oParent = o.offsetParent
          oLeft += oParent.offsetLeft+10;
          oLeft -= oLeft
          o = oParent
     }
     return oLeft
}

function getAbsTop(o) {
     oTop = o.offsetTop
     while(o.offsetParent!=null) {
          oParent = o.offsetParent
          oTop += oParent.offsetTop
          o = oParent
     }
     return oTop
}

function setLeft(o,oLeft) {
     o.style.left = oLeft + "px"
}

function setTop(o,oTop) {
     o.style.top = oTop + "px"
}

function setPosition(o,oLeft,oTop) {
     setLeft(o,oLeft)
     setTop(o,oTop)
}

// Slider's head mouse down handler
function sldMouseDown(e)
{
     // Get event object for IE
     if (!e) {e = window.event}
     
     // Drag action begins
     doDrag=true
     dragElement = "sldHead"
     document.body.style.cursor="e-resize";
     o1=document.getElementById("sldHead");
     o2=document.getElementById("sldContainer");
     
     // Get slider's head position
     sldLeft=o1.offsetLeft
     sldTop=o1.offsetTop

  savePos["sldHead"] = sldLeft;

 
     // Get mouse cursor position relatively to the slider's head
     sldMouseLeft=e.clientX-sldLeft
     sldMouseTop=e.clientY-sldTop

     // Get slider's container boundaries
     minLeft=getAbsLeft(o2)
     maxLeft=o2.offsetWidth-2

}




// Generic mouse up handler
function sldMouseUp(e)
{
     // Drag action stops
     doDrag=false
     document.body.style.cursor = "default";
     o=document.getElementById('sldHead');
     o3 = document.getElementById('dragTD').offsetWidth-4;
     o.style.left = o3;
}
savePos = new Array();

// Generic mouse move handler
function sldMouseMove(e)
{
     // Get event object for IE
     if (!e) {e = window.event}
   
     // If drag action is on going...
     if (doDrag)
     {
          o=document.getElementById(dragElement)
          o3 = document.getElementById('dragTD').offsetWidth-4;
          o.style.left = o3;

          // Get slider's head new position
          if(e.clientX < o.offsetLeft+10){
              newPos = 10;
          }
          else{
              newPos = e.clientX-sldMouseLeft
          }
          document.getElementById('dragTD').style.width = newPos-4;
         
          // Check slider's container boundaries
          if(newPos<=minLeft+10){minLeft=o3;newPos=minLeft;doDrag=false;sldMouseUp;}
          if(newPos>o3) {maxLeft=o3;newPos=maxLeft}
          savePos[dragElement]=newPos

     }



}

// Set generic handlers
document.onmousemove = sldMouseMove;
document.onmouseup= sldMouseUp
function setDiv(){
    document.getElementById('sldHead').style.left = document.getElementById('dragTD').offsetWidth-3;
}
</script>
</head>
<body onload="setDiv();">
<table align=center id="sldContainer" border="1" cellpadding="0" cellspacing="0" style="position:relative;top:0px;left:0px;width:600px;height:300px; background:#FFFFFF;" onselectstart="return false;">
   <tr>
     <td id="dragTD" style="border-collapse:collapse;border-right:2px ridge;width:200px;padding: 0px 0px 0px 4px;font-weight:bold;overflow:hidden" onselectstart="return false;">
TD1 Content Goes Here<br>
(Mouse Over the TD Border to Resize TD1)
<div id="sldHead"
style="position:absolute;top:0px;left:0px;width:6px;height:300px;cursor:e-resize;background:transparent;overflow:hidden;" onmousedown="sldMouseDown(event)" onmousemove="sldMouseMove()">
     
      </div>
     </td>
     <td style="padding: 0px 0px 0px 4px;font-weight:bold;background:#000000;color:#FFFFFF;"> TD2 Content Goes Here
</td></tr></table>


Regards...
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now