Yves said:
Hi, I want to display the same image (from the same file) at different
positions in a window. Up to now I used DIV command in the body part of the
text,
<prayer_wheel>
<acronym title="HyperText Markup Language">HTML</acronym>
is not a programming language. There are no HTML commands.
</> [psf 7.9]
You mean a `div' _element_.
and document.getElementById
That is why the method is named that way.
in order to place it at the right place.
document.getElementById(...) only retrieves a reference to
the HTML element object, if there is any. Do not use
document.getElementById("foobar").bla = foo;
document.getElementById("foobar").blubb = bar;
...
but use
if (document.getElementById) // make sure it is supported
{
var o = document.getElementById("foobar");
if (o)
{
o.bla = foo;
o.blubb = bar;
}
}
instead.
But when I do that several times, only the last position is displayed.
How to show all positions ?
Since you do not show *any* snippet of your code(!), I can only *guess*
that you confront a common processing problem with animations. If you
try to accomplish such like
function Position(x, y)
{
this.x = x;
this.y = y;
}
var a = [new Position(1, 2), ...];
for (var i = 0; i < a.length; i++)
{
referenceToDivElement.style.left = a
.x + "px";
referenceToDivElement.style.top = a.y + "px";
}
it seems like the `div' element is placed only at the last position.
That is because the CPU is far to fast for the graphics card and the
host, or preceding assignments are removed by internal optimization.
If you do
function setPos(x, y)
{
referenceToDivElement.style.left = x + "px";
referenceToDivElement.style.top = y + "px";
}
for (var i = 0; i < a.length; i++)
{
setTimeout("setPos(", a.x + ", " + a.y + "), 42);
}
it may also seem like the `div' element is placed only at the last
position. That is because you plan to call setPos(...) with different
values but *at* *the* *same* *time*. For there cannot be a "same time"
in non-quantum computing, the calls are planned that the first, using
a[0].x and a[0].y, is called after 42 milliseconds and the following
the next instant (small number of CPU cycles) which is either too fast
or again removed by internal optimization.
Note:
setTimeout(...) *does* *not* cause the script host to wait for an
expression to be evaluated and neither does setInterval(...).
To accomplish animations with ECMAScript implementations, you need to
plan the calls at multiples of the frame length instead:
for (var i = 0; i < a.length; i++)
{
setTimeout("setPos(", a.x + ", " + a.y + "), i * 42);
}
If you have an animation with variable frame length, you need to use
the offset to the first call for successive calls. A function that
calculates the offsets helps you to stay with your current data
structure *and* to provide useful values for setTimeout(...), e.g.:
function getOffsets(aLenghts)
{
var a = [0];
var nOffset = 0;
for (var i = 0; i < a.length; i++)
{
nOffset += a;
a[a.length] = nOffset;
}
return a;
}
var aFrameLengths = [11, 23, 42, 64, 10, 15];
// calculate array elements can be used
// as argument for setTimeout(...)
var aOffsets = getOffsets(aFrameLengths);
Note:
I used a frame length of 42 milliseconds only for entertainment.
Frame lengths below 50 milliseconds can significantly and thus
noticeably slow down the host and are not recommended in Web
applications. The acceptable minimum varies, depending on the
timed action(s) taken and on the host where the script is running
on.
HTH
PointedEars
