Passing a DIV ID to a function

[rynato]

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

 

[rynato]

I would like to add that I did try using 'this':

<a href="#" onClick="the_timeout=setTimeout('moveDiv(this);',100);
return false;">start moving!</a>


along with:

function moveDiv(objectID)
{
// get the stylesheet
//
var the_style = getStyleObject(objectID);


and that doesn't work either.

 

[pcx99]

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

Your overall idea is correct. You just have a syntax error in your
anchor tag.


<a href="#" onClick="the_timeout=setTimeout('moveDiv(\'myDiv\');',100);
return false;">start moving!</a>

When you have quotes within quotes within quotes you'll eventually have
to start escaping them so javascript can tell the difference between
real quotes and "part of the string" quotes. In this case all you have
to do is escape the quotes around myDiv.

 

[Martin Honnen]

<a href="#" onClick="the_timeout=setTimeout('moveDiv('myDiv');',100);
return false;">start moving!</a>

You need to use different quotes and in the HTML attribute you can use
&quot; to escape the double quote:
<a href="#"
onclick="the_timeout = setTimeout('moveDiv(&quot;myDiv&quot;',
100); return false;">

 

[rynato]

thanks for the timely response. This worked! Problem is now it doesn't
work quite as intended. The DIVD should move to the absolute position
of 400px left in 5px increments, and stop. What it does instead is move
in 5px increments per click, period.

Here is the troublesome part of the function:

if (new_left < 400)
{
the_timeout = setTimeout('moveDiv();',10);
}

If I change the argument for moveDiv to the actual name of the div, it
works as intended. But if I do

the_timeout = setTimeout('moveDiv(divID);',10);

or

the_timeout = setTimeout('moveDiv(this);',10);

it doesn't. Now what's the problem?
pcx99 ha scritto:

 

[rynato]

I have tried this syntax also, based on examples seen elsewhere:

the_timeout = setTimeout('moveDiv('+divID+');',10);

this does not work either.

(e-mail address removed) ha scritto:

 

[ASM]

(e-mail address removed) a écrit :

I have tried this syntax also, based on examples seen elsewhere:

<div id = "myDiv" style="position:absolute; top:250px;
left:100px;"><img src="bee_right.gif"></div>

The function call :
To slide your div 'myDiv' from its position to right at 500px more with
a fast speed. (increase 10 to slow the slide)

<a href="#" onClick="moveDiv('myDiv',10,500); return
false;">start moving!</a>

So you can also slide slowly the div on a short distance :

<a href="#" onClick="moveDiv('myDiv',70,50); return
false;">moving shortly</a>

The function :

function moveDiv(theDiv, tempo, distance, start)
{
// get the stylesheet
//
var the_style = getStyleObject(theDiv);
if (the_style)
{
// get the current coordinate
var current_left = parseInt(the_style.left);

// set point of starting
if(typeof(start)=='undefined' || start==null) start = current_left;

// and add 5 to the current coordinate
var new_left = current_left + 2;

// set the left property of the DIV, add px at the
// end unless this is NN4
the_style.left = (document.layers)? new_left : new_left+'px';

// if we haven't gone too far, call moveDiv() again in a bit
if (new_left < (+distance+start))
the_timeout = setTimeout(function(){
moveDiv(theDiv, tempo, distance, start)
}, tempo);
}
}


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