simple animating of a div

Forum Moderators: open

Message Too Old, No Replies

simple animating of a div

cuce

11:29 pm on Apr 24, 2006 (gmt 0)

I have a div. This div is 500px high. it is positioned - 450px from the top. I want to know how to make this div come down smoothly(animate) to 0px from the top when I push a button. I have not found anything useful and Ive been searching for a long time.

If anyone would help that would be HUGELY appreciated.

Thanks!

daosmith

6:25 am on Apr 25, 2006 (gmt 0)

The normal way to do this is to use setInterval(). This function executes a function that you pass to it every x milliseconds, where x is also supplied. So, for example (and bear in mind this code is for example purposes and thus is very inelegant, particularly in its use of global variables)

window.onload = function() {  divInQuestion = document.getElementById("yourDivIdentifier"); 
 buttonInQuestion = document.getElementById("yourButtonIdentifier"); 
 moveLimit = 0; 
 moveIncrement = 25; 
 currentPosition = -450; 
 buttonInQuestion.onclick = function() { intervalID = setInterval(animate, 50); } 
 function animate() { 
 if (currentPosition < moveLimit) { 
  currentPosition += moveIncrement; 
  divInQuestion.style.top = currentPosition + "px"; 
 } 
 else 
  clearInterval(intervalID); 
 } 
}

Basically what happens is that the function animate() is called every 50 milliseconds, and each time animate() asks whether we have reached the move limit - if not, move the div some more, if yes, don't move the div and clear the interval (stop animate() being called every 50ms).

As I said the code is inelegant - lots of global variables and so forth - but it should give you a good idea of what you will need to do. Post back/sticky me if you need anything explained :)

cuce

6:05 pm on Apr 25, 2006 (gmt 0)

That is almost exactly what I need. Now forgive my ignorance. I am very new at this js thing...


window.onload = function() { divInQuestion = document.getElementById("sitemap");
buttonInQuestion = document.getElementById("button");
moveLimit = 0;
moveIncrement = 5;
currentPosition = -450;
buttonInQuestion.onclick = function() { intervalID = setInterval(animate, 50); }
function down() {
if (currentPosition < moveLimit) {
currentPosition += moveIncrement;
divInQuestion.style.top = currentPosition + "px";
}
function up() {
if (currentPosition > -450) {
currentPosition -= moveIncrement;
divInQuestion.style.top = currentPosition - "px";
}else
clearInterval(intervalID);
}
}

Is this pretty close to what I would do to create an button which would bring the bar back up?

Thanks so much

cuce

9:06 pm on Apr 25, 2006 (gmt 0)

Sorry I didnt clarify, I want to have a button that pulls it back up the same way it came down. Here's my failed attempt.

window.onload = function() {

divInQuestion = document.getElementById("sitemap");
downbutton = document.getElementById("down");

moveLimit = -20;
moveIncrement = 4;
currentPosition = -300;

downbutton.onclick = function() { intervalID = setInterval(down, 50); }
upbutton.onclick = function() { intervalID = setInterval(up, 50); }

function down() {

if (currentPosition < moveLimit)
{
currentPosition += moveIncrement;

if (currentPosition > -295){moveIncrement=25;}

if (currentPosition > -40){moveIncrement=4;}

divInQuestion.style.top = currentPosition + "px";
}

else
clearInterval(intervalID);
}

function up() {

if (currentPosition > -350)
{
currentPosition -= moveIncrement;

if (currentPosition > -295){moveIncrement=25;}

if (currentPosition > -40){moveIncrement=4;}

divInQuestion.style.top = currentPosition + "px";
}

else
clearInterval(intervalID);
}

}
here's where I'm at now...

birdbrain

9:56 pm on Apr 25, 2006 (gmt 0)

Hi there cuce,

does this help...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>drop down div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
 background-color:#fef;
 color:#000080;
 }
#drop {
 width:310px;
 height:500px;
 border:3px double #000080;
 background-color:#eff;
 position:absolute;
 left:200px;
 font-family:verdana,sans-serif;
 font-size:16px;
 color:#fff; 
 }
#drop div {
 line-height:45px;
 padding-left:16px;
 border-bottom:1px solid #000080;
 background-image:url(http://coothead.homestead.com/files/bl_bg.jpg);
 background-color:#400080;
 color:#fff;
 }
#drop p {
 font-size:13px;
 text-align:justify;
 margin:16px; background-color:inherit;
 color:#000080;
 }
input {
 border:1px solid #000080;
 background-color:#eff;
 color:#000080; 
 }
-->
</style>
<script type="text/javascript">
<!--
 var pos=-510;
 var dwn;
 var dir='down';
 var speed=20;
function dropDown() {
 document.getElementById('drop').style.top=pos+'px';
if(dir=='down') {
if(pos>=30) {
 clearTimeout(down);
 dir='up';
 return;
 }
 pos+=2;
}
else {
if(dir=='up') {
if(pos<=-510) {
 clearTimeout(down);
 dir='down';
 return;
 }
 pos-=2;
 }
 }
 down=setTimeout('dropDown()',speed);
 }
 
//-->
</script>
</head>
<body onload="document.getElementById('drop').style.top=pos+'px';">
<div>
<input type="button" value="down / up" onclick="dropDown()"/>
</div><div id="drop">
<div>information</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. 
</p>
</div>
</body>
</html>

birdbrain

cuce

9:52 pm on Apr 26, 2006 (gmt 0)

Hey I finally managed to figure it out incase anyone cares. here's what I ended up with.

<html>
<head>
<style type="text/css">
*{margin:0px;padding:0px;}
#sitemap{color:#fff;background:#333;width:100%;height:350px;position:absolute;bottom:-300px;left:0px;z-index:420;}
#button{font:9px Verdana, sans-serif;padding:5px;position:absolute;top:5px;left:5px;z-index:421;}
#button a{color:#FF00FF;display:block;margin-top:5px;}
a img{border:none;}
</style>
<script type="text/javascript">
window.onload = function() {

divInQuestion = document.getElementById("sitemap");
downbutton = document.getElementById("down");
upbutton = document.getElementById("up");

moveLimit = -20;
moveIncrement = 4;
currentPosition = -300;

downbutton.onclick = function() { intervalID = setInterval(down, 50); }
upbutton.onclick = function() { intervalID = setInterval(up, 50); }

function down() {

if (currentPosition < moveLimit)
{
currentPosition += moveIncrement;

if (currentPosition > -295){moveIncrement=25;}

if (currentPosition > -40){moveIncrement=4;}

divInQuestion.style.bottom = currentPosition + "px";
}

else
clearInterval(intervalID);
}
function up() {

if (currentPosition > -300)
{
currentPosition -= moveIncrement;

if (currentPosition > -295){moveIncrement=25;}

if (currentPosition > -40){moveIncrement=4;}

divInQuestion.style.bottom = currentPosition + "px";
}

else
clearInterval(intervalID);
}

}
</script>
</head>

<body>

</body>
</html>