"Lee" <REM0VElbspamtrap@cox.net> wrote in message
news:bnu73f01ood@drn.newsguy.com...[color=blue]
> TheKeith said:[color=green]
> >
> >I'm writing a javascript function that is supposed to open and close a[/color][/color]
box[color=blue][color=green]
> >by adjusting the height style of a div container, everytime the link is
> >clicked. For some reason though, the function only works once--I click[/color][/color]
and[color=blue][color=green]
> >it opens, and then I click again and it closes--then it never does it[/color][/color]
again.[color=blue][color=green]
> >Why doesn't it do it again? I plan to have multiple div containers on the
> >page that do the same thing, but for some reason they stop after the[/color][/color]
first[color=blue][color=green]
> >close. Help would be appreciated--thanks.[/color]
>
> Because "200px" is less than "20px".
> Strings are compared in lexical order.
>
> Since the style.height attribute won't have any value before
> the first time you set it, the easiest fix would seem to be
> to check to see if style.height=="200px". If it does, set it
> to "20px", else set it to "200px". Less general, but an easy
> fix.
>
> Also, it's a bad idea to name a function "opener".
> It clobbers the window.opener attribute.[/color]
Doing it your way worked, but since I'm learning js, I'm experimenting so
please bare with me if you can. I changed it to the following and noticed
another problem:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background:#87A7CA}
a {color:#BFE733}
..script {
width:400px;
height:20px;
border-right:2px solid #233949;
border-bottom:2px solid #233949;
margin-bottom:5px;
background:#3B607C;
font:12px arial;
color:#7BB4DF;
overflow:hidden
}
</style>
<script type="text/javascript">
function open_close(box,heightto) {
var idofbox = document.getElementById(box);
var boxheightnum = parseInt(idofbox.style.height);
if (boxheightnum < heightto) {
idofbox.style.height = heightto + "px";
}
else {
idofbox.style.height = "20px";
}
}
</script>
</head>
<body>
<div id="blah" class="script"><a href="#"
onClick="open_close('blah',200)">Date display</a><br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT</div>
</body>
</html>
In this instance, I have to click the link twice before it "opens" the box.
Unless I'm wrong, I figured out that this has something to do with the fact
that I set my styles in a sheet isntead of inline; I set the styles inline
and didn't have the same problem. Because of the stylesheet in the header, I
believe the function needs the first click to read the styles and the second
click to actually change the box's height. Is this accurate? Is there anyway
I can modify it to do everything in one action? Thanks.
