Javascript vertical drag div areas - not quiet there

Discussion in 'Javascript' started by x, Oct 4, 2009.

  1. x

    x Guest

    Help!... why should my code below behave differently when I turn off a
    debug alert?
    I'm trying to resize the bottom of two div areas - and it kind of
    works when _switch = 1, but not when _switch=0 (see the initial block
    of var declarations at the top of the code). If you wish to try the
    code - then the idea is you drag the red bars up and down to change
    the size of the divs themselves.

    [
    Code:
    ]
    <html>
    <head>
    
    <title>Vertically resizable divs</title>
    <script type="text/javascript">
    <!--
    var _curHeight=0
    var _curPos=0
    var _newPos=0
    var _mouseStatus='up'
    var _areaname='';
    var _switch=0;
    
    function setPos(e,divname){
    curevent=(typeof event=='undefined'?e:event)
    _areaname=divname;
    _mouseStatus='down'
    _curPos=curevent.clientY
    
    tempHeight=document.getElementById(divname).style.height
    if ( _switch == 1 ) {
    if ( tempHeight == "") {
    alert("Cant see height for "+divname);
    }
    }
    heightArray=tempHeight.split('p');
    _curHeight=parseInt(heightArray[0])
    document.getElementById('info').innerHTML =document.getElementById
    ('info').innerHTML+ '<BR>setPos2 '+divname+' /'+_curHeight
    +"/"+tempHeight;
    }
    
    function getPos(e){
    if(_mouseStatus=='down'){
    curevent=(typeof event=='undefined'?e:event)
    _newPos=curevent.clientY
    var pxMove=parseInt(_newPos-_curPos)
    var newHeight=parseInt(_curHeight+pxMove)
    newHeight=(newHeight<5?5:newHeight)
    document.getElementById(_areaname).style.height=newHeight+'px'
    }
    }
    
    //-->
    </script>
    
    <style type="text/css">
    body {
    height: 100%;
    }
    .mydiv {
    position: relative;
    border: 1px solid #808080;
    height: 100px;
    overflow: hidden;
    }
    /*status bar style to act as the bottom border of the div*/
    .statusbar {
    cursor: s-resize;
    position: absolute;
    display: block;
    background-color: red;
    top: 100%;
    margin-top: -2px;
    height: 2px;
    padding: 0;
    width: 100%;
    }
    </style>
    </head>
    
    <body onmousemove="getPos(event)" onmouseup="_mouseStatus='up' ">
    
    <table><tr valign=top><td width=400>
    <div id="info">Monkey!</div>
    </td><td>
    <div id="mydiv" class="mydiv">
    <p>Mydiv 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,'mydiv')" class='statusbar'
    id="statusbar"></div>
    </div>
    </td><td>
    <div id="mydiv2" class="mydiv">
    <p>Mydiv2 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,'mydiv2')" class='statusbar'
    id="statusbar2"></div>
    </div>
    </td></tr>
    </table>
    
    </body>
    </html>
    [
    ]
    x, Oct 4, 2009
    #1
    1. Advertising

  2. x

    lcplben Guest

    On Oct 3, 8:46 pm, x <> wrote:
    > Help!... why should my code below behave differently when I turn off a
    > debug alert?


    Got URL?

    -- b
    lcplben, Oct 4, 2009
    #2
    1. Advertising

  3. x

    x Guest

    On 4 Oct, 13:29, lcplben <> wrote:
    > On Oct 3, 8:46 pm, x <> wrote:
    >
    > > Help!... why should my code below behave differently when I turn off a
    > > debug alert?

    >
    > Got URL?
    >
    > -- b


    No URL... but if you saved the htm as a file on your PC then you
    should have everything you need to see the problem
    x, Oct 4, 2009
    #3
  4. x

    wilq Guest

    On Oct 4, 2:46 am, x <> wrote:
    > Help!... why should my code below behave differently when I turn off a
    > debug alert?
    > I'm trying to resize the bottom of two div areas - and it kind of
    > works when _switch = 1, but not when _switch=0 (see the initial block
    > of var declarations at the top of the code). If you wish to try the
    > code - then the idea is you drag the red bars up and down to change
    > the size of the divs themselves.
    >
    > [
    Code:
    ]
    > <html>
    > <head>
    >
    >         <title>Vertically resizable divs</title>
    >         <script type="text/javascript">
    >         <!--
    >         var _curHeight=0
    >         var _curPos=0
    >         var _newPos=0
    >         var _mouseStatus='up'
    >         var _areaname='';
    >         var _switch=0;
    >
    >         function setPos(e,divname){
    >                 curevent=(typeof event=='undefined'?e:event)
    >                 _areaname=divname;
    >                 _mouseStatus='down'
    >                 _curPos=curevent.clientY
    >
    >                 tempHeight=document.getElementById(divname).style.height
    >                 if ( _switch == 1 ) {
    >                         if ( tempHeight == "") {
    >                                 alert("Cant see height for "+divname);
    >                         }
    >                 }
    >                 heightArray=tempHeight.split('p');
    >                 _curHeight=parseInt(heightArray[0])
    >                 document.getElementById('info').innerHTML=document.getElementById
    > ('info').innerHTML+ '<BR>setPos2 '+divname+' /'+_curHeight
    > +"/"+tempHeight;
    >         }
    >
    >         function getPos(e){
    >                 if(_mouseStatus=='down'){
    >                         curevent=(typeof event=='undefined'?e:event)
    >                         _newPos=curevent.clientY
    >                         var pxMove=parseInt(_newPos-_curPos)
    >                         var newHeight=parseInt(_curHeight+pxMove)
    >                         newHeight=(newHeight<5?5:newHeight)
    >                         document.getElementById(_areaname).style.height=newHeight+'px'
    >                 }
    >         }
    >
    >         //-->
    >         </script>
    >
    >         <style type="text/css">
    >         body {
    >                 height: 100%;
    >         }
    >         .mydiv {
    >                 position: relative;
    >                 border: 1px solid #808080;
    >                 height: 100px;
    >                 overflow: hidden;
    >         }
    >         /*status bar style to act as the bottom border of the div*/
    >         .statusbar {
    >                 cursor: s-resize;
    >                 position: absolute;
    >                 display: block;
    >                 background-color: red;
    >                 top: 100%;
    >                 margin-top: -2px;
    >                 height: 2px;
    >                 padding: 0;
    >                 width: 100%;
    >         }
    >         </style>
    > </head>
    >
    > <body onmousemove="getPos(event)" onmouseup="_mouseStatus='up' ">
    >
    > <table><tr valign=top><td width=400>
    >         <div id="info">Monkey!</div>
    >         </td><td>
    >         <div id="mydiv" class="mydiv">
    >                 <p>Mydiv 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,'mydiv')" class='statusbar'
    > id="statusbar"></div>
    >         </div>
    >         </td><td>
    >         <div id="mydiv2" class="mydiv">
    >                 <p>Mydiv2 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,'mydiv2')" class='statusbar'
    > id="statusbar2"></div>
    >         </div>
    >         </td></tr>
    > </table>
    >
    > </body>
    > </html>
    > [
    ]


    tempHeight=document.getElementById(divname).style.height


    referes to a style set on element via inline set or javascript change
    - this does not affect CSS styling. You might want to use css computed
    style or simply use offsetHeight (instead of style.height) and it
    should be fine...

    Basically I would suggest to remove all this unessesary code:

    tempHeight=document.getElementById
    (divname).offsetHeight
    if ( _switch == 1 ) {
    if ( tempHeight == "") {
    alert("Cant see height for
    "+divname);
    }
    }
    heightArray=tempHeight.split('p');
    _curHeight=parseInt(heightArray[0])

    to:

    tempHeight=document.getElementById
    (divname).offsetHeight
    if ( _switch == 1 ) {
    if ( tempHeight == "") {
    alert("Cant see height for
    "+divname);
    }
    }
    _curHeight=parseInt(tempHeight)
    wilq, Oct 5, 2009
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lionel B
    Replies:
    6
    Views:
    9,556
    Alf P. Steinbach
    May 14, 2004
  2. Dylan
    Replies:
    4
    Views:
    8,281
    Darius.Moos AT esigma-systems DOT de
    Jun 15, 2004
  3. Replies:
    2
    Views:
    189
  4. Andreas Benedikt

    Drag and drop with multiple target areas

    Andreas Benedikt, Sep 6, 2003, in forum: Javascript
    Replies:
    0
    Views:
    103
    Andreas Benedikt
    Sep 6, 2003
  5. 123Jim
    Replies:
    0
    Views:
    139
    123Jim
    May 16, 2011
Loading...

Share This Page