PDA

View Full Version : resizing a div's height

tyler jones
10-01-2002, 07:34 PM
I've got a page that will have a flash movie on it and it's contained in a div tag. I figured I'd write a function to minimize the div and hide the movie. It works fine when I give the script an actual value such as 30, but I was trying to get it to shrink the div by doing a loop, and it's causing my browser to hang. Anyone know how I can do this? Thanks. Here's what I was originally trying....

i = 360;
while ( i > 20 )
{
document.getElementById('flashLayer').style.height = i - 50;
}

and also...

(for i = 360; i > 20; i - 50)
{
document.getElementById('flashLayer').style.height = i;
}
adios
10-01-2002, 07:49 PM
There are better ways to do this - but, to the point, neither of your approaches does anything to the value of i. The first simply subtracts 50 when assigning it to the .style property; the second does even less. Corrections:

i = 360;
while ( i > 20 )
{
document.getElementById('flashLayer').style.height = i;
i -= 50;
}

and also...

(for i = 360; i > 20; i-=50)
{
document.getElementById('flashLayer').style.height = i;
}

i-=50 is the same as saying i = i - 50

Clipping would probably be a better solution.
tyler jones
10-01-2002, 07:55 PM
I can't believe I missed that in both cases. Boy do I feel dumb. Anyway, after trying that, it doesn't give me the effect I had hoped for. It just closes the div. So, would using clipping give me the slower shrinking effect I'm after and if so, how do I use that? Otherwise, any other ideas? Thanks.
adios
10-01-2002, 09:43 PM
It's not the clipping that slows things down - it's the use of timers (setTimeout, setInterval). Clipping just gives you more control over how you can style the wipe. Here's a lousy demo:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#demo {
position: absolute;
left: 100px;
top: 100px;
border: 12px saddlebrown inset;
}

body {
text-align: center;
background: sienna;
}

</style>
<script type="text/javascript" language="javascript">

function boxIn(id) {
var wid, ht, loopwid;
if (document.getElementById) boxIn.el = document.getElementById(id);
else if (document.all) boxIn.el = document.all(id);
wid = boxIn.el.offsetWidth;
ht = boxIn.el.offsetHeight;
loopwid = wid/2;
for (var i=0; i<loopwid; ++i) {
setTimeout('boxIn.el.style.clip="rect('+i+'px '+(--wid)+'px '+(--ht)+'px '+i+'px)"',10*i);
}
}

</script>
</head>
<body>
<div id="demo"><img src="http://www.salon.com/comics/lay/2002/10/01/lay/cover.gif"></div>
<br><br>
<strong><a href="javascript:void boxIn('demo')">box it</a></strong><br>
</body>
</html>

Hopefully someone will have a better one. Anyway, you get the idea.