...

View Full Version : Animation



mattover-matter
04-02-2003, 12:53 PM
ok, I am going to give another shot at this dropdown menu.

How can I get the position of a div and animate the entire div down a set number?



<A href="animate(divname, 10)"

so it would animate

<div id="divname"> down 10px....

Thanks.....

Tails
04-02-2003, 08:22 PM
Are you trying to animate the menu? I just noticed, Windows 98 has an animated Right-click menu that grows in X and Y from start to end while win2000 just appears with some opacity effects. Strange?

Tails
04-02-2003, 08:28 PM
Oh wait, maybe this computer is just too fast to see. And some programs can control it too (win98 programs that have windows XP looking menus for example).

beetle
04-02-2003, 08:45 PM
Like this?

http://www.peterbailey.net/dhtml/test.htm

Tails
04-02-2003, 08:55 PM
You're a genious!

mattover-matter
04-02-2003, 11:51 PM
well....I didn't expect this many posts. I am not a very good script taker-aparter. Maybe you could help me.
I am just gonna start over. How can I animate something to (o;<variable.)?


so if like:


function godown(fred,ammount){

set animateto = ammount

set currentposition = getpositionof("fred")(div)(top)

set final = ammount + currentposition

if(currentposition >= final){

set currentposition+=5
move div to 0;currentposition
setTimeout('godown',100);
}
}

or something like that....

<div id="fred">
contents
</div>

beetle
04-03-2003, 12:58 AM
No offense, but I didn't write the whole class so I could help people from the ground-up

cheesebagpipe
04-03-2003, 02:21 AM
This is pretty basic:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

vertigo.increment = 4; //movement interval (greater=faster)
vertigo.speed = 1; //timer delay (greater=slower)

function vertigo(el_id, pixels) {
if (!vertigo.el) vertigo.el = document.getElementById(el_id); //first time, get element
if (!vertigo.pixels) { //first time, set parameters
vertigo.jump = (pixels > 0) ? vertigo.increment : -vertigo.increment;
vertigo.pixels = Math.abs(pixels);
}
vertigo.el.style.top = String(parseInt(vertigo.el.style.top) + vertigo.jump + 'px'); //move
vertigo.pixels -= vertigo.increment; //deduct jump
if (vertigo.pixels > 0) setTimeout('vertigo()', vertigo.speed); //check & loop
else vertigo.pixels = vertigo.el = null; //done, clear data
}

</script>
</head>
<body>
<a href="javascript&#58;void vertigo('fred',200)">down, Fred</a> |
<a href="javascript&#58;void vertigo('fred',-200)">up, Fred</a> ||||
<a href="javascript&#58;void vertigo('ed',100)">down, Ed</a> |
<a href="javascript&#58;void vertigo('ed',-100)">up, Ed</a>
<!-- Be sure to specify start position with inline CSS -->
<div id="fred" style="position:relative;float:left;width:100px;top:20px;
background:skyblue;">Fred</div>
<div id="ed" style="position:relative;width:100px;top:20px;left:60px;
background:orange;">Ed</div>
</body>
</html>

mattover-matter
04-03-2003, 11:07 AM
I am truly bedazzled!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Ok, now I need one thing. Maybe have the array number



function vertigo(el_id, pixels, e){

if(state[e] = "up"){
// allow animate down
state[e] = "down"
}

else{
// allow animate up
state[e] = "up"
}

it is for a contractable menu which will show/hide links so I can't very well allow them to keep animating it down more and more, can I? :D thanks a lot!

cheesebagpipe
04-04-2003, 01:45 AM
Menus require coordination, so just moving stuff barely gets you started; I like your attitude, however so, here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<style type="text/css">

div.menupanel {
position: relative;
width: 100px;
height: 16px;
font: 200 12px verdana,sans-serif;
text-align: center;
border: 1px black solid;
cursor: pointer;
cursor: hand;
}

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

$.jump = 4;
$.speed = 1;

function $(el_id, pixels) {
if (!$.el) {
$.el = document.getElementById(el_id);
if (typeof $.el.drop == 'undefined') $.el.drop = true;
}
if (!$.steps) {
$.steps = Math.floor(pixels/$.jump);
$.final = pixels % $.jump;
$.go = ($.el.drop) ? $.jump : -$.jump;
if (!$.el.drop) $.final = -$.final;
}
$.el.style.top = String(parseInt($.el.style.top) + $.go + 'px');
if (--$.steps) $.timer = setTimeout('$()', $.speed);
else {
$.el.style.top = String(parseInt($.el.style.top) + $.final + 'px');
$.el.drop = !$.el.drop;
$.el = $.steps = $.timer = null;
}
}

</script>
</head>
<body onselectstart="return false;">
<div id="fred" class="menupanel" style="top:6px;float:left;background:skyblue;"
onclick="if(!$.timer)$('fred',200)">Fred</div>
<div id="ed" class="menupanel" style="top:6px;float:left;background:orange;"
onclick="if(!$.timer)$('ed',200)">Ed</div>
<div id="ned" class="menupanel" style="top:6px;float:left;background:coral;"
onclick="if(!$.timer)$('ned',200)">Ned</div>
</body>
</html>

(not php)

check this (http://simplythebest.net/scripts/dhtml_script_106.html) monster out...

mattover-matter
04-04-2003, 04:28 AM
You like my attitude? thanks :o Also, what is with the dollar signs($)? That is javascript right?




Darn, just when I was getting the other one to look good :)

Mhtml
04-04-2003, 05:19 AM
Dude, just a thought check out http://www.w3schools.com/dhtml

mattover-matter
04-04-2003, 01:01 PM
I will have to look at that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum