Prev: Security error" code: "1000
Next: Computer Techs Wanted
From: x on 3 Oct 2009 20:46
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>
[[/code]]
From: lcplben on 4 Oct 2009 08:29
On Oct 3, 8:46 pm, x <A...(a)mzuzu.co.uk> wrote:
> Help!... why should my code below behave differently when I turn off a
> debug alert?

Got URL?

-- b
From: x on 4 Oct 2009 12:26
On 4 Oct, 13:29, lcplben <b...(a)sellmycalls.com> wrote:
> On Oct 3, 8:46 pm, x <A...(a)mzuzu.co.uk> 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
From: wilq on 5 Oct 2009 03:17
On Oct 4, 2:46 am, x <A...(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>
> [[/code]]

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)
 | 
Pages: 1
Prev: Security error" code: "1000
Next: Computer Techs Wanted