Javascript vertical drag div areas - not quiet there


X

x

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>
[
]
 
Ad

Advertisements

Ad

Advertisements

W

wilq

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)
 

Top