...

View Full Version : roll up div script



tyler jones
10-23-2006, 02:54 PM
I am trying to get a div on my page to roll up in vertical size from 250 pixels tall to about 50 when a button is clicked. I've tried to write a script to do this but haven't had any luck. I can make it change size easily enough, but I can't seem to get the smooth change from 250 to 50... it just jumps to that height. I've looked around and can't seem to find it, so I'm hoping someone here has one. Thanks!

A1ien51
10-23-2006, 03:05 PM
You might want to look into: http://script.aculo.us/

Eric

tyler jones
10-23-2006, 03:58 PM
Thanks. Those scripts look really cool. I actually kept working on my own script and I have it working "almost" in IE and Opera. But, not in Mozilla. And in IE, when you click the "Click Me" link the 3rd time, it doesn't roll up until you click it a fourth time. So, it rolls up on the first click fine and unrolls on the 2nd click fine, but the 3rd click is doing something I can't figure out in that it's making the height kind of jitter back and forth until you click the link again. Here's my code. Can anyone tell me what may be causing this and also why it's not working in Mozilla? Thanks.

<html>
<head>
<title></title>
<script language="javascript">
var rolled = false;
var isSized = false;
var IsIE = document.offsetHeight;
var IsMozilla = document.clientHeight;

function doRoll(){
el = document.getElementById('ad');

isSized = false;
var divHeight = IsIE?el.offsetHeight:el.clientHeight;

//alert(divHeight);

if (divHeight > 50){
//alert("roll");
roll();
}
else{
//alert("unroll");
unroll();
}

}

function unroll()
{
el = document.getElementById('ad');
var divHeight = IsIE?el.offsetHeight:el.clientHeight;

if (divHeight < 250)
{
if (IsIE)
el.style.height = el.offsetHeight + 10;
else
el.style.height = el.clientHeight + 10;
}
else
{
isSized = false;
}

if (!isSized){
setTimeout("unroll()",1);
}
}

function roll()
{

el = document.getElementById('ad');
var divHeight = IsIE?el.offsetHeight:el.clientHeight;

if (divHeight > 50)
{
if (IsIE)
el.style.height = el.offsetHeight - 10;
else
el.style.height = el.clientHeight - 10;
}
else
{
isSized = true;
}

if (!isSized){
setTimeout("roll()",1);
}
}

</script>
<style>
#ad{
border: solid 1px black;
background-color: #dedede;
width:250px;
height:250px;
}
</style>
</head>

<body>
<a href="javascript:doRoll();">Click Me</a>
<div id="ad">
test
</div>
</body>
</html>

tyler jones
10-23-2006, 04:16 PM
Nevermind the jitter bug, I found the problem with that. But I'm still not sure how to get this to work in Firefox or Flock? Thanks.

tyler jones
10-23-2006, 04:36 PM
Okay, found the problem with mozilla too. thanks.

jmrker
10-23-2006, 05:36 PM
So, would you like to post the corrected code so that others can learn from it?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum