ansaurus

Question

JavaScript/jQuery: Follow path over page

Answer 1

+2 A:

Absolute positioning is likely to be the best way to do it, yes. (I wouldn't put my hand on heart as saying it's the only way, I'm sure you could play other games to do something similar, but you probably don't want to.)

You don't have to do it as a percentage unless that's intrinsic to your problem. The following will happily make an element absolutely-positioned and then move it 5 pixels right and down every 10th of a second for up to 'count' iterations:

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}

That's just raw JavaScript, but frameworks like jQuery, Prototype, Closure, YUI, etc. help you with a lot of things and are worth looking into. For instance, if you use the above, unless you make the element absolutely-positioned in advance and also specify the left and top styles on the element itself (via an inline style attribute), it'll jump to 0,0 at the outset and then start moving from there. Frameworks can help you with the fairly complex task of figuring out where an inline element is before making it absolutely-positioned.

Here's a complete example that doesn't rely on a framework (but probably should, at least for determining the starting position of 'myElement'):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Move It Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#myElement {
    border:     1px solid black;
}
</style>
<script type='text/javascript'>
function startMoving() {

    moveDemo(document.getElementById('myElement'), 10);
}

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}
</script>
</head>
<body><div>
<input type='button' value='Start' onClick="startMoving();">
<div id='myElement'>I'm on the move</div>
</div></body>
</html>

T.J. Crowder 2010-03-08 09:34:40

Thanks, this is what I thought. I went with jQuery and made it a tad more extensible (below).

Echilon 2010-03-09 10:03:02

Answer 2

A:

jQuery seems to be the way to go, basic and more of a hack than a solution, but if you definitely need something with JS.

<style type="text/css">
#butterfly 
{
    display:block;
    background: #f00;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    position: fixed;
    background: url(butterfly.gif) no-repeat;
}
</style>
<script type='text/javascript'>
    function moveButterfly() {
        //moveDemo(document.getElementById('butterfly'), 10);
        var butterfly = $('#butterfly');
        var positions = [
            { props: { left: '25%', top: '20%' }, time: 1000 },
            { props: { left: '40%', top: '18%' }, time: 610 },
            { props: { left: '58%', top: '38%'}, time: 400 },
            { props: { left: '81%', top: '52%' }, time: 520 },
            { props: { left: '150%', top: '67%'}, time: 440 },
        ];
        jQuery.each(positions, function(i, e) {
            butterfly.animate(e.props, e.time);
        });
    }
    $().ready(function() {
        moveButterfly();
    });
</script>

Echilon 2010-03-09 10:03:53

ansaurus

tags:

views:

answers:

JavaScript/jQuery: Follow path over page

related questions