Moving Elements in DHTML

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Moving Elements in DHTML [ previous next ]

Published on: Tuesday 26th May 1998 By: Michael Bednarek

• Introduction
• Identifying the browser
• Positioning the object
• The animation function

Introduction

As you saw in previous articles A guide to Microsoft layers and A guide to Netscape Layers, it is possible to position elements on the page in both Microsoft and Netscape's implementation of Dynamic HTML. By dynamically altering the positions of elements over time, we can create simple animation effects. In this article you will learn how.

Identifying the browser

The method we will use in this article will work in both Internet Explorer 4 and Netscape Communicator 4. However, the object models in each browser are slightly different, so we need to provide a way of checking which browser is being used.

For the purpose of this article, we will be manipulating an element called "object1". The two properties we will be manipulating are the top and left properties of the object. In MSIE4, these would be accessed with object1.style.top or object1.style.left. In Netscape 4, they would be accessed with document.object1.top or document.object1.left. Therefore we can use the following JavaScript in our animation funtion to provide compatibility:

if (document.all) {object = object1.style}
if (document.layers) {object = document.object1}

Positioning the object

Before we write the main part of our animation function, we'll position the object on the page using standard HTML with some CSS attached. Elements which are able to be moved include DIVs, SPANs, images, and some form elements. For the purpose of this article we will use a DIV tag containing the text "Hello!". In both browsers, the code below would place it in the top left hand corner of the screen:

<div id="object1" style="width:100;position:absolute;top:0;left:0"><h1>Hello!<\/h1><\/div>

The animation function

Now that we've positioned our object, we can write a function to animate it. This function will make use of two variables, called objectLeftPos and objectTopPos, which will contain the current left and top positions of the object. We need to define these variables outside of our actual function, like so:

objectLeftPos = 0;
objectTopPos = 0;

Next we have to decide in which direction we will animate the object, and to which place. For our first example, we will animate it from the left of the screen to the right of the screen (from left position 0 to left position 650).

First, we check whether objectLeftPos is less than 650 (i.e. it has not yet reached the desired position) If it is, then we increase objectLeftPos by 10, and assign its value to the left position of the object. Then we use the setTimeout method to run the function again after 10 milliseconds.

function moveRight() {
if (document.all) {object = object1.style}
if (document.layers) {object = document.object1}
if (objectLeftPos < 650) {
    objectLeftPos += 10;
    object.left = objectLeftPos;
    setTimeout("moveRight()",10)
    }
}

Using a very similar technique, you can move the object vertically. We can modify the function slightly to move the object from top position 0 to top position 350:

function moveDown() {
if (document.all) {object = object1.style}
if (document.layers) {object = document.object1}
if (objectTopPos < 350) {
    objectTopPos += 10;
    object.top = objectTopPos;
    setTimeout("moveDown()",10)
    }
}

If you have one of the fourth generation browsers, you can try out this example.

There are several ways you can tweak this. You can replace the bog-standard DIV with a more interesting image. You change the speed of the element by altering the number by which the position increases (e.g. change it from 10 to 20 to make it twice as fast). You can even combine the two functions to move the object diagonally. Try experimenting and see what you can come up with.

Related items

"The Light Fantastic"

MSIE Page Transition Filters

A Gift of "Life" : The Document Object Model

Multimedia in Microsoft Internet Explorer

Displaying Temporary Pages

Dynamic Positioning

What is So Dynamic About Dynamic HTML?

Building a Dynamic Thank You Page

Fancy Background Fader

An Introduction to Microsoft Layers

©2018 Martin Webb