animation problems

chrissy · February 21st, 2005, 05:24 AM

Hallo.. I have this code here and I'm trying to make it work in mozilla but it doesn't work. It's an animation that moves from left to right on the screen it does work in explorer.Is there anyone who can help me?What do I need to add?

<script language="Javascript1.2">

var objRef, steg=6; position=10
function Init() {
    if (document.layers)
        objRef = document.layers.bild;
    else
        objRef = document.all.bild.style;
    setInterval("Flytta()",80);
}

function Flytta() {
    if (position>900)
        steg=-6;
    else if (position<10)
        steg=6;
    position+=steg;
    objRef.left = position;
}
</script>
<body onLoad="Init()">

Lrnmore · February 22nd, 2005, 12:32 PM

Hi Chrissy,

This uses getElementById to move the div, you'll need to check compatibility with
your target browsers. If you have to have your page work with layers you'll have
to post a test link or more source code for us to help you.

You'll have to put your own image in this page of course.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Move Along Little Doggie</title>

<script>
var move_div;
var tm;
var pos;
var screenH = screen.availHeight;
var screenW = screen.availWidth;
var myDog = new Image();
myDog.src = "images/doggie.jpg";

function init(){
move_div = document.getElementById('anim');
move_div.style.top = 200;
pos = -80;
tm = setInterval('moveDiv()',120);
}

function moveDiv(){
if(pos > (screenW + 50)){
clearInterval(tm);
init();
}
move_div.style.visibility = 'visible';
move_div.style.left = pos;
pos += 15;
}
window.onload = init;
</script>
</head>
<body>
<div id="anim" style="left:0; top:0; position: absolute; visibility: hidden;">
<img src="images/doggie.jpg" width="150" height="90" alt="" border="0" align="">
</div>

</body>
</html>

HTH
Lrnmore