poizn Posted September 7, 2007 Share Posted September 7, 2007 Hi all Well from the subject, you have probably guess that im trying to get the position of an element on screen with javascript. I created some function of my own, looked around the net, and still they dont work properly. Here are two of the functions I have created (stolen) function findPosX(obj) { var curleft = 0; if(obj.offsetParent) { while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) break; obj = obj.offsetParent; } } else if(obj.x) { curleft += obj.x; } obj.style.position = "static"; return curleft; } function findPosY(obj) { var curtop = 0; if(obj.offsetParent) { while(1) { curtop += obj.offsetTop; if(!obj.offsetParent) break; obj = obj.offsetParent; } } else if(obj.y) { curtop += obj.y; } return curtop; } function findPos(obj) { var left = findPosX(obj); var top = findPosY(obj); return [left , top]; } function findPosition( oElement ) { if( typeof( oElement.offsetParent ) != 'undefined' ) { for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } return [ posX, posY ]; } else { return [ oElement.x, oElement.y ]; } } I then positioned some elements on screen like so... <body> <div onclick="temp();" id="a">a</div> <div onclick="temp();" id="b" style="width:50%; float:left; background-color:green;">b</div> <div onclick="temp();" id="c" style="">c</div> </body> And have a function temp to alert me the value of the element C function temp() { var temp = findPosition(document.getElementById("c")); alert(temp[0]); alert(temp[1]); temp = findPos(document.getElementById("c")); alert(temp[0]); alert(temp[1]); } The values that I get are clearly wrong ;( Does anyone know why, or how to fix it... Any help will be appreciated Thanks Quote Link to comment Share on other sites More sharing options...
poizn Posted September 7, 2007 Author Share Posted September 7, 2007 Well I dont know why this is, but I think I sort of figured something out... If you float the elements on screen its seems to work, like so... <body> <div onclick="temp();" id="a">a</div> <div onclick="temp();" id="b" style="width:50%; float:left; background-color:green;">b</div> <div onclick="temp();" id="c" style="float:left;">c</div> </body> Sorry i'm really not in the mood to try and explain, so if anyone can do a better job, please post and help me out... Thanks Daniel Quote Link to comment Share on other sites More sharing options...
emehrkay Posted September 7, 2007 Share Posted September 7, 2007 function getPosition(ele){ var ele = document.getElementById(ele); var pos = {}; pos.left = ele.offsetLeft; pos.top = ele.offsetTop; pos.scrollTop = ele.offsetLeft; pos.height = ele.offsetHeight; pos.width = ele.offsetWidth; return pos; } you now have a hash with the element's width, height, top, left, scrollTop, and scrollWidth. to use you pass in the element's id var stats = getPosition('c'); alert(stats.height); //the height of c Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.