Forum Moderators: open
<!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>
it does not seem to work properlyDoes it work at all, does it give error indication, in internet explorer set tools/internet options/advanced/Display nofification of every script error. All clues help?.
Welcome to forum.
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;
You need to specify the units or it throws the rendering into quirks mode (my guess.) Change the last line in the function as follows:
document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 10+ "px";
And it looks like it works fine in FireFox as well. Works even better if you remove those <br> tags, wonder whiy the original thread is a 404 now . . .
