Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: Animation

  1. #1
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Animation

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

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    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?

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    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).

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    You're a genious!

  • #6
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No offense, but I didn't write the whole class so I could help people from the ground-up
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #9
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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? thanks a lot!

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

    Edit: check this monster out...
    Last edited by cheesebagpipe; 04-04-2003 at 04:19 AM.

  • #11
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You like my attitude? thanks Also, what is with the dollar signs($)? That is javascript right?




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

  • #12
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Dude, just a thought check out http://www.w3schools.com/dhtml
    Omnis mico antequam dominus Spookster!

  • #13
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up ooo, that is a lot better than pageresource

    I will have to look at that.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •