View Full Version : Animation

04-02-2003, 01: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....


04-02-2003, 09: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?

04-02-2003, 09: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).

04-02-2003, 09:45 PM
Like this?


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

04-03-2003, 12:51 AM
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

or something like that....

<div id="fred">

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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

<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;
<div id="ed" style="position:relative;width:100px;top:20px;left:60px;

04-03-2003, 12:07 PM
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"

// 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!

04-04-2003, 02: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">
<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;

<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;

<body onselectstart="return false;">
<div id="fred" class="menupanel" style="top:6px;float:left;background:skyblue;"
<div id="ed" class="menupanel" style="top:6px;float:left;background:orange;"
<div id="ned" class="menupanel" style="top:6px;float:left;background:coral;"

(not php)

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

04-04-2003, 05: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 :)

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

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