View Full Version : Resize Div Height

08-27-2008, 06:23 PM
I found this code online and it basically lets a user resize the width of the left column, I am wondering if someone can modify the existing script to allow resizing of div's height or point me to towards another script that can do the same task. Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" style="height: 100%">
<title>Table Height</title>
<style type="text/css">
.wrapper {
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
#divider {
cursor: e-resize;
width: 8px;;
background-color: #444444;
vertical-align: center;
<script type="text/javascript">
//global variables used to track status
var curWidth=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.clientX;
//accepts height of the div
tempWidth = document.getElementById('leftMenu').style.width;
//these lines split the width value from the 'px' units
widthArray = tempWidth.split('px');
curWidth = parseInt(widthArray[0]);
//this changes the height of the div while the mouse button is depressed
function getPos(e){
curevent = (typeof event == 'undefined' ? e:event);
//get new mouse position
newPos = curevent.clientX;
//calculate movement in pixels
var pxMove=parseInt(newPos-curPos);
//determine new width
var newWidth = parseInt(curWidth+pxMove);
//conditional to set minimum width to 5
newWidth = (newWidth < 10 ? 10:newWidth);
//set the new width of the div
document.getElementById('leftMenu').style.width = newWidth+'px';
function toggleMenu(e) {
if (e.stopPropagation) {
} else {
event.cancelBubble = true;
if (document.getElementById('leftMenu').style.display != 'none') {
document.getElementById('leftMenu').style.display = 'none';
} else {
document.getElementById('leftMenu').style.display = '';
<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table id="mainTable" cellspacing="0" style="width: 100%; height: 100%;">
<tr valign="top">
<td height="100" bgcolor="#333333" id="leftMenu" style="width: 230px;">
<p><font color="#FFFFFF">Anyway to resize height (up/down) of this div? It should be draggable like you can drag to left and right using the drak dray bar. </font></p></td>
<td rowspan="3" id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
<td rowspan="3" id="mainContent">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
<p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
<p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
<p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
<p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
<tr valign="top">
<td height="100" bgcolor="#666666" id="leftMenu" style="width: 230px;">&nbsp;</td>
<tr valign="top">
<td height="100" bgcolor="#CCCCCC" id="leftMenu" style="width: 230px;">&nbsp;</td>

08-28-2008, 06:26 AM
The code you've provided seems to have some issues like the way "id" attribute used in HTML elements, the same "id" is used for multiple items, which breaks the very functionality of it.

I would suggest using a JS library through which you can achieve drag and drop, resizing, etc. Here is a link http://www.walterzorn.com/dragdrop/dragdrop_e.htm