Results 1 to 2 of 2

Thread: Resize Div Height

  1. #1
    Join Date
    Aug 2008
    Thanked 0 Times in 0 Posts

    Default Resize Div Height

    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="" 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>

  2. #2
    Join Date
    Sep 2005
    Thanked 107 Times in 107 Posts


    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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts