mozilla equiv to posLeft/ posTop?

[txbakers]

In IE I can use document.getElementByID("id").posLeft = 123 to set the left position on the screen of an object.

That doesn't work in Firefox/Safari.

Is there an equivalent command for those browsers? OR something that works in both?

[createErrorMsg]

You can access the CSS positioning properties (left, right, top, bottom) through the style object, as in ....

document.getElementById('id').style.left = '123px';

This should work in all browsers. Remember, though, that those properties require that the element also have position:absolute or position:relative, so if the element is not already one of those, you'll need to add that in, too...

myElement = document.getElementById('id');
myElement.style.position = 'absolute';
myElement.style.left = '123px';

If you use absolute position like above, bear in mind that it's likely to restructure your whole page, as abs pos pulls the element out of the flow. Unless the elements which surround the one in question are also absolutely positioned, you'd be better off using relative positioning, which will allow the rest of the page to remain "as is" once the element is moved.

cEM

[Birdman]

The style object should work for you. It would go like this:

document.getElementByID("id").style.position = "absolute";
document.getElementByID("id").style.left = "123px";
document.getElementByID("id").style.top = "123px";

...Too quick for me, createErrorMsg!

[txbakers]

That works great for me. I am able to both set a position and retrieve the moved position using that code.

However, I am using this as part of a drag/drop routine. After I set the position by calling the function:

function setPos() {

var j = document.getElementById("redbox");
j.style.left = "123px";
j.style.top = "300px";

var j = document.getElementById("redbox2");
j.style.left = "177px";
j.style.top = "400px";

}

I can't move the items any more. I can move them before calling the function all I want and retrieve their positions, but once I SET, they are fixed and won't move.

the items are enclosed in DIVs as follows:

<div id="redbox" style="position:absolute;left: 50px; top: 100px;"><IMG id="alli" src="dragdrop_files/ddalligator.jpg" name=alligator></div>

<div id="redbox2" style="position:absolute;left: 150px; top: 200px;"><IMG src="dragdrop_files/ddalligator.jpg" name=alligator2></div>

any further thoughts?

[Webwork]

Shot in the dark and maybe, if I'm entirely clueless, you might explain this to me:

[w3.org...]

CSS2 does not specify layout behavior when values for these properties are changed by scripts. . . .

[txbakers]

I was able to figure it out quite nicely so it works now in both FF and IE.

I don't use a separate function to set the positions, I just loop through the data right in the <div> and set the initial positions. I am able to capture the positions using that method and write them to the database.

Very happy camper........