I am embarrassed that I cannot figure this out, as it seems fairly
simple.
I found a JS function I'd like to use, which animates a layer so that
it moves across the screen.
The problem is the function, as found, simply names the DIV directly. I
want to be able to use the function in the HTML to pass the ID of the
DIV which gets moved. Sounds fairly straight-forward, right? Well it
doesn't work and I have spent HOURS on this. Yes, I am red-faced.
==========================
The HTML, as found:
<div id = "myDiv" style="position:absolute; top:250px;
left:100px;"><img src="bee_right.gif"></div>
The function call, as found:
<a href="#" onClick="the_timeout=setTimeout('moveDiv();',100); return
false;">start moving!</a>
The function (two of them actually), as found:
var the_timeout;
function moveDiv()
{
// get the stylesheet
//
var the_style = getStyleObject("myDiv");
if (the_style)
{
// get the current coordinate and add 5
//
var current_left = parseInt(the_style.left);
var new_left = current_left + 5;
// set the left property of the DIV, add px at the
// end unless this is NN4
//
if (document.layers)
{
the_style.left = new_left;
}
else
{
the_style.left = new_left + "px";
}
// if we haven't gone too far, call moveDiv() again in a bit
//
if (new_left < 400)
{
the_timeout = setTimeout('moveDiv();',10);
}
}
}
function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject
==================
OK. It seemed to me that all I needed to do was rewrite the function
call:
<a href="#" onClick="the_timeout=setTimeout('moveDiv('myDiv'); ',100);
return false;">start moving!</a>
And then re-write the function (I'm showing only the parts I changed):
function moveDiv(divID)
{
// get the stylesheet
//
var the_style = getStyleObject(divID);
===================
so that I am passing the name of the div in the function call, the
function moveDiv is set up to receive the divID argument, and then it
passes that argument to the getStyleObject function where it is used to
access the style that I want to manipulate, depending on the flavor of
the browser.
Why doesn't this work? Thanks in advance for your help! I feel so
stupid that I cannot figure this out...