Element Positions w/o CSS Positioning

[robulator]

Is there a way to determine the position of an element that isn't positioned using CSS? getElementById.style.position only works if you have set the position of the element using a style sheet. This only needs to work in version 5+ browsers.

Thanks in advance,
Rob

 

[RISTMO]

This works fine for me. Just give everything that you want to change an id. Here it is:

<p id=&quot;id1&quot; onClick=&quot;id1.style.position='absolute';id1.style.left='100';&quot;>I'm a bunch of text.</p>

Rick if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot OR $answer==&quot;really good post&quot{
print(&quot;Star&quot;
}else{
print(&quot;Thanks.&quot;
}

 

[robulator]

Thanks for your response. That doesn't quite get at what I'm after. I need to determine the location of a table that has not been positioned using style sheets. I am ploting points (image file) on a grid (table). The position of the points are relative to the location of the grid. But I'd rather not use CSS to position the grid for various reasons. So I need to know the location of the upper left corner of the grid to position the points, but since I didn't use CSS to position the grid, I can't use style.position to determine the location.

If you have any other ideas, I'm all eyes.

Rob

 

[RISTMO]

Change it from absolute to relative. You know the dimensions of the grid, right?

You can use negative values for the (.left || .right || .top || .bottom) to go backwards.

Rick if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot OR $answer==&quot;really good post&quot{
print(&quot;Star&quot;
}else{
print(&quot;Thanks.&quot;
}

 

[Billybob777ca]

Calculating positioning is pretty tricky. This function will give you the top position of the object relative to the body. So all you have to is pass it an object reference.

You'll need to write one for the left position also. It's pretty much the same function except you use offsetLeft and change scrollTop to scrollLeft so that it can subtract any scrolling that the user may do. It assumes you are using absolute positioning.

// Purpose : Calculate the top coord of an object
function calcTop(currObj)
{
var str = new String(&quot;&quot;
str = &quot;currObj&quot;;

var offset = 0;
var offsetscroll = 0;
var toppos = 0;

while (eval(str))
{
// Calculate all the offsetTop of the obj until no more exist ie. (until body tag)
offset = eval(str+&quot;.offsetTop&quot;
// If the object is scrollable calculate all the scrollable areas
if (eval(str+&quot;.scrollTop&quot)
{
// Calculate all the scroll tops of the object except for the body scroll
// Don't calculate the body scroll because the object gets positioned relative
// to the body
if (eval(str+&quot;.tagName&quot.toUpperCase()!=&quot;BODY&quot
offsetscroll += eval(str+&quot;.scrollTop&quot;
}
toppos += offset;
str += &quot;.offsetParent&quot;;
}

// Toppos is the position of the object as if there was no scrolling on the page
// Offset scroll is all the scrollable sections on the page
// By subtracting them we get the top position of the object
return toppos - offsetscroll;
}

 

[starway]

These are the functions I wrote once and use for this purpose:

function elemHeight(elemName) {

if (document.layers)
h = eval(&quot;document.layers[&quot; + elemName + &quot;].document.height&quot

else if (document.getElementById)
h = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetHeight&quot

return(h);
}

function elemWidth(elemName) {

if (document.layers)
w = eval(&quot;document.layers[&quot; + elemName + &quot;].document.width&quot

else if (document.getElementById)
w = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetWidth&quot

return(w);
}


function elemTop(elemName) {

if (document.layers)
t = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageY&quot

else if (document.getElementById)
t = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetTop&quot

return(t);
}


function elemLeft(elemName) {

if (document.layers)
l = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageX&quot

else if (document.getElementById)
l = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetLeft&quot

return(l);
}


function elemProps(elemName) {

w = &quot;width= &quot; + elemWidth(elemName);
h = &quot;height= &quot; + elemHeight(elemName);
t = &quot;top= &quot; + elemTop(elemName);
l = &quot;left= &quot; + elemLeft(elemName);

dims = &quot;element name: &quot; + elemName + &quot;\n\n&quot; + w + &quot;; &quot; + h + &quot;\n&quot; + t + &quot;; &quot; + l ;

return(dims)
}


<p id=&quot;first&quot; onclick=&quot;alert(elemProps('first'))&quot;>
block content
</p>

 

[robulator]

Thanks. These do the job!

Rob