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