On Oct 4, 2:46*am, x <A...@mzuzu.co.uk> 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)
Similar Threads
