Forum Moderators: open
I'm new to the forum.
I found code on your forum that was posted back in July 2004 (which is not open for replies anymore) about resizing a div vertically. I need to do the same, but horizontally.
I thought I could change the clientY to clientX and change some height attributes to width. But no luck.
AJKIMOTO gave the answer to this post in July. Can you give me a hand with this?
Thanks you,
Mark
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="TreeDemo.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>temptitle</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
//global variables used to track status
var curHeight=0
var curPos=0
var newPos=0
var mouseStatus='up'
//this function gets the original div height
function setPos(e){
//for handling events in ie vs. w3c
curevent=(typeof event=='undefined'?e:event)
//sets mouse flag as down
mouseStatus='down'
//gets position of click
curPos=curevent.clientY
//accepts height of the div
tempHeight=document.getElementById('mydiv').style.height
//these lines split the height value from the 'px' units
heightArray=tempHeight.split('p')
curHeight=parseInt(heightArray[0])
}
//this changes the height of the div while the mouse button is depressed
function getPos(e){
if(mouseStatus=='down'){
curevent=(typeof event=='undefined'?e:event)
//get new mouse position
newPos=curevent.clientY
//calculate movement in pixels
var pxMove=parseInt(newPos-curPos)
//determine new height
var newHeight=parseInt(curHeight+pxMove)
//conditional to set minimum height to 5
newHeight=(newHeight<5?5:newHeight)
//set the new height of the div
document.getElementById('mydiv').style.height=newHeight+'px'
}
}
//-->
</script>
<style type="text/css">
body {height:100%;}
#mydiv{
position:absolute;
top:30px;
left:10px;
height: 150px;
width:250px;
border: 1px solid #808080;
overflow: hidden;
}
/*status bar style to act as the bottom border of the div*/
#statusbar{
cursor: s-resize;
position:absolute;
display:block;
background-color: #c0c0c0;
top:100%;
margin-top:-2px;
height:2px;
padding:0;
width: 250px;
}
</style>
</head>
<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "statusbar" div //-->
<body onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<div id="mydiv" style="height: 250px;" >
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra sapien in nulla euismod scelerisque. Aliquam ornare fringilla orci. Aliquam enim
odio, dictum eu, auctor ut, pulvinar non, lectus.</p>
<div onmousedown="setPos(event)" id="statusbar" ></div>
</div>
</body>
</html>
Mark
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Horizontal Resize</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
var curWidth = 0;
var curX = 0;
var newX = 0;
var mouseButtonPos = "up";
//Function 'setPos(...) gets the original div width.
function setPos(e) {
//For handling events in ie vs. w3c.
curEvent = ((typeof event == "undefined")? e: event);
//Sets mouse flag as down.
mouseButtonPos = "down";
//Gets position of click.
curX = curEvent.clientX;
//Get the width of the div.
var tempWidth = document.getElementById("treeView").style.width;
//Get the width value.
var widthArray = tempWidth.split("p");
//Set the current width.
curWidth = parseInt(widthArray[0]);
}
//Function getPos(...) changes the width of the div while the mouse button is pressed.
function getPos(e){
if( mouseButtonPos == "down" ) {
//For handling events in ie vs. w3c.
curEvent = ((typeof event == "undefined")? e: event);
//Get new mouse position.
newX = curEvent.clientX;
//Calculate movement in pixels.
var pixelMovement = parseInt(newX - curX);
//Determine new width.
var newWidth = parseInt(curWidth + pixelMovement);
//Enforce a minimum width.
newWidth = ((newWidth < 150)? 150: newWidth);
//Set the new width.
document.getElementById("treeView").style.width = newWidth + "px";
//Set the new left of the splitter bar.
document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 10;
}
}
//-->
</script>
<style type="text/css">
body {height:100%;}
#treeView{
position:absolute;
top:30px;
left:10px;
height: 150px;
width:250px;
border: 1px solid #808080;
overflow: hidden;
}
/*status bar style to act as the bottom border of the div*/
#splitterBar{
cursor: e-resize;
position:absolute;
display:block;
background-color: #c0c0c0;
top:30px;
left:262px;
margin-top:0px;
height:152px;
padding:0;
width: 4px;
}
</style>
</head>
<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "splitterBar" div-->
<body onmousemove="getPos(event)" onmouseup="mouseButtonPos='up'">
<div id="treeView" style="height:150px; width:250px">
<p>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br>Resize me horizontally.<br></p>
</div>
<div onmousedown="setPos(event)" id="splitterBar"></div>
</body>
</html>
Thanks orion_rus for your time,
Mark
