By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,246 Members | 1,515 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,246 IT Pros & Developers. It's quick & easy.

How to get the object's position(top,left) when the css style has position:relative?

P: 8
I study http://www.javascripttoolbox.com/lib...tion/index.php source and its doesn't work fine for the following code: (I hope both IE and firefox are working well)

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  3. "http://www.w3.org/TR/REC-html40/strict.dtd">
  4. <html>
  5. <head>
  6. <title>Test</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <script type="text/javascript">
  9. /**
  10.  * Copyright (c)2005-2009 Matt Kruse (javascripttoolbox.com)
  11.  * 
  12.  * Dual licensed under the MIT and GPL licenses. 
  13.  * This basically means you can use this code however you want for
  14.  * free, but don't claim to have written it yourself!
  15.  * Donations always accepted: http://www.JavascriptToolbox.com/donate/
  16.  * 
  17.  * Please do not link to the .js files on javascripttoolbox.com from
  18.  * your site. Copy the files locally to your server instead.
  19.  * 
  20.  */
  21.  
  22. var Position = (function() {
  23.   // Resolve a string identifier to an object
  24.   // ========================================
  25.   function resolveObject(s) {
  26.     if (document.getElementById && document.getElementById(s)!=null) {
  27.       return document.getElementById(s);
  28.     }
  29.     else if (document.all && document.all[s]!=null) {
  30.       return document.all[s];
  31.     }
  32.     else if (document.anchors && document.anchors.length && document.anchors.length>0 && document.anchors[0].x) {
  33.       for (var i=0; i<document.anchors.length; i++) {
  34.         if (document.anchors[i].name==s) { 
  35.           return document.anchors[i]
  36.         }
  37.       }
  38.     }
  39.   }
  40.  
  41.   var pos = {};
  42.   pos.$VERSION = 1.0;
  43.  
  44.   // Set the position of an object
  45.   // =============================
  46.   pos.set = function(o,left,top) {
  47.     if (typeof(o)=="string") {
  48.       o = resolveObject(o);
  49.     }
  50.     if (o==null || !o.style) {
  51.       return false;
  52.     }
  53.  
  54.     // If the second parameter is an object, it is assumed to be the result of getPosition()
  55.     if (typeof(left)=="object") {
  56.       var pos = left;
  57.       left = pos.left;
  58.       top = pos.top;
  59.     }
  60.  
  61.     o.style.left = left + "px";
  62.     o.style.top = top + "px";
  63.     return true;
  64.   };
  65.  
  66.   // Retrieve the position and size of an object
  67.   // ===========================================
  68.   pos.get = function(o) {
  69.     var fixBrowserQuirks = true;
  70.       // If a string is passed in instead of an object ref, resolve it
  71.     if (typeof(o)=="string") {
  72.       o = resolveObject(o);
  73.     }
  74.  
  75.     if (o==null) {
  76.       return null;
  77.     }
  78.  
  79.     var left = 0;
  80.     var top = 0;
  81.     var width = 0;
  82.     var height = 0;
  83.     var parentNode = null;
  84.     var offsetParent = null;
  85.  
  86.  
  87.     offsetParent = o.offsetParent;
  88.     var originalObject = o;
  89.     var el = o; // "el" will be nodes as we walk up, "o" will be saved for offsetParent references
  90.     while (el.parentNode!=null) {
  91.       el = el.parentNode;
  92.       if (el.offsetParent==null) {
  93.       }
  94.       else {
  95.         var considerScroll = true;
  96.         /*
  97.         In Opera, if parentNode of the first object is scrollable, then offsetLeft/offsetTop already 
  98.         take its scroll position into account. If elements further up the chain are scrollable, their 
  99.         scroll offsets still need to be added in. And for some reason, TR nodes have a scrolltop value
  100.         which must be ignored.
  101.         */
  102.         if (fixBrowserQuirks && window.opera) {
  103.           if (el==originalObject.parentNode || el.nodeName=="TR") {
  104.             considerScroll = false;
  105.           }
  106.         }
  107.         if (considerScroll) {
  108.           if (el.scrollTop && el.scrollTop>0) {
  109.             top -= el.scrollTop;
  110.           }
  111.           if (el.scrollLeft && el.scrollLeft>0) {
  112.             left -= el.scrollLeft;
  113.           }
  114.         }
  115.       }
  116.       // If this node is also the offsetParent, add on the offsets and reset to the new offsetParent
  117.       if (el == offsetParent) {
  118.         left += o.offsetLeft;
  119.         if (el.clientLeft && el.nodeName!="TABLE") { 
  120.           left += el.clientLeft;
  121.         }
  122.         top += o.offsetTop;
  123.         if (el.clientTop && el.nodeName!="TABLE") {
  124.           top += el.clientTop;
  125.         }
  126.         o = el;
  127.         if (o.offsetParent==null) {
  128.           if (o.offsetLeft) {
  129.             left += o.offsetLeft;
  130.           }
  131.           if (o.offsetTop) {
  132.             top += o.offsetTop;
  133.           }
  134.         }
  135.         offsetParent = o.offsetParent;
  136.       }
  137.     }
  138.  
  139.  
  140.     if (originalObject.offsetWidth) {
  141.       width = originalObject.offsetWidth;
  142.     }
  143.     if (originalObject.offsetHeight) {
  144.       height = originalObject.offsetHeight;
  145.     }
  146.  
  147.     return {'left':left, 'top':top, 'width':width, 'height':height
  148.         };
  149.   };
  150.  
  151.   // Retrieve the position of an object's center point
  152.   // =================================================
  153.   pos.getCenter = function(o) {
  154.     var c = this.get(o);
  155.     if (c==null) { return null; }
  156.     c.left = c.left + (c.width/2);
  157.     c.top = c.top + (c.height/2);
  158.     return c;
  159.   };
  160.  
  161.   return pos;
  162. })();
  163.  
  164.  
  165. </script>
  166. <style>
  167. #idText { border:1px red solid ; }
  168.  
  169. #mainDiv {
  170.     position:relative ;
  171.     margin: 100px 0 0 50px;
  172.     border: 1px solid blue;
  173.     padding: 20px;
  174. }
  175. .marker {
  176.     position:absolute;
  177.     width:10px;
  178.     height:10px;
  179.     border:1px solid black;
  180. }
  181.  
  182. #marker1 {
  183.     background-color:yellow;
  184. }
  185. #marker2 {
  186.     background-color:blue;
  187. }
  188. #marker3 {
  189.     background-color: #00FF00;
  190. }
  191. </style>
  192. <body>
  193. <div id="marker1" class="marker"></div>
  194. <div id="marker2" class="marker"></div>
  195. <div id="marker3" class="marker"></div>
  196.  
  197. <div id="mainDiv">
  198.     ########<div id="idText">a text</div>############
  199.     <br />
  200.     <table cellpadding="1" cellspacing="1" border="1"><tr>
  201.         <td onClick="getEditorPosition(this);">&nbsp;&nbsp;Cell1&nbsp;&nbsp;</td>
  202.         <td onClick="getEditorPosition(this);" >&nbsp;&nbsp;Cell2&nbsp&nbsp;</td>
  203.     </tr></table>
  204. </div>
  205. <script type="text/javascript">
  206.  
  207. var pos=Position.get(document.getElementById('mainDiv' ));
  208. Position.set(document.getElementById('marker1'),pos);
  209.  
  210. var pos=Position.get(document.getElementById('idText'));
  211. Position.set(document.getElementById('marker2'),pos);
  212.  
  213.  
  214. function getEditorPosition(cell) {
  215.     var pos=Position.get(cell);
  216.     Position.set(document.getElementById('marker3'),pos);
  217. }
  218.  
  219.  
  220. </script>
  221. </body>
  222. </html>
  223.  
  224.  
  225.  
Thanks in advanced!
Jun 21 '10 #1
Share this Question
Share on Google+
8 Replies


100+
P: 1,059
You better Ask specifically what is your problem.
Jun 21 '10 #2

P: 8
@johny10151981
To: johny10151981

the problem is that I cannot get the really position if I set the css style position to relative.
Jun 21 '10 #3

100+
P: 1,059
Use the function below
Expand|Select|Wrap|Line Numbers
  1. function getPosition(obj){
  2.     var topValue= 0,leftValue= 0;
  3.     while(obj){
  4.     leftValue+= obj.offsetLeft;
  5.     topValue+= obj.offsetTop;
  6.     obj= obj.offsetParent;
  7.     }
  8.     finalvalue = leftValue + "," + topValue;
  9.     return finalvalue;
  10. }
I got this small piece of code in some site but cant recall where.

First off all you can get any objects offset position. offset position is related to its parents position.
obj.offsetParent return the parent of the current object
Expand|Select|Wrap|Line Numbers
  1. <div id=d1>
  2.  <div id=d2>
  3.  </div>
  4. </div>
  5.  
in this above example d2's parents is d1. Top most parent id main window page. and Window's offset parent is no one i.e. null.

If anyof my above information is wrong please let me know.

Best Regards
johny
Jun 21 '10 #4

P: 8
hi, johny, thanks for your reply!

I use your function before, and it doesn't work in IE. You can test the following code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script type="text/javascript">
  6. function getPosition(obj){
  7.     var topValue = 0, leftValue = 0;
  8.     while(obj){
  9.         leftValue += obj.offsetLeft;
  10.         topValue += obj.offsetTop;
  11.         obj = obj.offsetParent;
  12.     }
  13.     return {left: leftValue, top: topValue};
  14. }
  15. function move(src, target) {
  16.     var position = getPosition(target);
  17.     src.style.top = position.top + "px";
  18.     src.style.left = position.left + "px";
  19. }
  20. </script>
  21. <style>
  22. #idText { border:1px red solid ; padding-left: 100px; }
  23. #mainDiv {
  24.     position: relative;
  25.     margin: 50px 0 0 200px;
  26.     border: 1px solid blue;
  27.     padding: 20px;
  28. }
  29. .marker {
  30.     position: absolute;
  31.     border:1px solid black;
  32. }
  33. #marker1 {
  34.     background-color:yellow;
  35. }
  36. #marker2 {
  37.     background-color:blue;
  38. }
  39. #marker3 {
  40.     background-color: #00FF00;
  41. }
  42. td {
  43.     width: 150px;
  44.     height: 70px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id="marker1" class="marker">1. moveToMainDiv</div>
  50. <div id="marker2" class="marker">2. moveToText</div><br />
  51. <div id="marker3" class="marker">3. moveToCell</div>
  52. <div id="mainDiv">
  53.     #### Main Div ####<div id="idText">a text</div>############
  54.     <br />
  55.     <table cellpadding="1" cellspacing="1" border="1"><tr>
  56.         <td onClick="getEditorPosition(this);">Cell1 - click me</td>
  57.         <td onClick="getEditorPosition(this);" >Cell2 - click me</td>
  58.     </tr></table>
  59. </div>
  60.  
  61. <script type="text/javascript">
  62.  
  63. var m1 = document.getElementById('marker1');
  64. var m2 = document.getElementById('marker2');
  65. var m3 = document.getElementById('marker3');
  66. var mainDiv = document.getElementById('mainDiv');
  67. var text = document.getElementById('idText');
  68.  
  69. move(m1, mainDiv);
  70. move(m2, text);
  71.  
  72. function getEditorPosition(cell) {
  73.     move(m3, cell);
  74. }
  75.  
  76.  
  77. </script>
  78. </body>
  79. </html>
  80.  
Jun 22 '10 #5

P: 8
I updated my test scripts:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Test</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.         <script type="text/javascript">
  6.             function getPosition(obj){
  7.                 var topValue = 0, leftValue = 0;
  8.                 while (obj) {
  9.                     leftValue += obj.offsetLeft;
  10.                     topValue += obj.offsetTop;
  11.                     obj = obj.offsetParent;
  12.                 }
  13.                 return {
  14.                     left: leftValue,
  15.                     top: topValue
  16.                 };
  17.             }
  18.         </script>
  19.         <style type="text/css">
  20.             * {
  21.                 border: 0;
  22.                 margin: 0;
  23.                 padding: 0;
  24.             }
  25.             #div1 {
  26.                 padding: 50px;
  27.             }
  28.             #div2 {
  29.                 position: relative;
  30.                 margin: 20px;
  31.                 padding: 50px;
  32.                 background: red;
  33.             }
  34.             #div3 {
  35.                 height: 50px;
  36.                 width: 400px;
  37.                 background: #ccc;
  38.                 padding: 20px;
  39.             }
  40.             #cursor {
  41.                 position: absolute;
  42.                 background-color: yellow;
  43.                 width: 50px;
  44.                 z-index: 1000;
  45.             }
  46.         </style>
  47.     </head>
  48.     <body>
  49.         <div id="div1">
  50.             <div id="cursor">Cursor</div>
  51.             <div id="div2">
  52.                 <br>div2<br><br>
  53.                 <div id="div3" onClick="moveCursor(this);">div3 - cursor should be moved to here</div>
  54.             </div>
  55.             <script type="text/javascript">
  56.                 var cursor = document.getElementById('cursor');
  57.                 var mainDiv = document.getElementById("div2");
  58.                    move(cursor, mainDiv);
  59.  
  60.                 function moveCursor(cell){
  61.                     var position = getPosition(cell);
  62.                     cursor.style.top = position.top + "px";
  63.                     cursor.style.left = position.left + "px";
  64.                 }
  65.             </script>
  66.         </div>
  67.     </body>
  68. </html>
  69.  
Jun 27 '10 #6

100+
P: 1,059
does your updated script work?
let me know, i am checking too
Jun 27 '10 #7

100+
P: 1,059
Javascript cannot find you move function on line 58
fix it. and test your javascript on firefox
Jun 27 '10 #8

P: 8
Hi, johny10151981.

The updated script doesn't work, but you can try the below one: I use a new method in this script: getBoundingClientRect, it seems working fine both firefox and IE. (BTY, the script I posted just now, it works in firefox, but not IE)

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Test</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.         <script type="text/javascript">
  6.             function getPosition(obj){
  7.                 var topValue = 0, leftValue = 0;
  8.                 while (obj) {
  9.                     leftValue += obj.offsetLeft;
  10.                     topValue += obj.offsetTop;
  11.                     obj = obj.offsetParent;
  12.                 }
  13.                 return {
  14.                     left: leftValue,
  15.                     top: topValue
  16.                 };
  17.             }
  18.  
  19.             function getScroll(){
  20.                 var t, l, w, h;
  21.                 if (document.documentElement && document.documentElement.scrollTop) {
  22.                     t = document.documentElement.scrollTop;
  23.                     l = document.documentElement.scrollLeft;
  24.                     w = document.documentElement.scrollWidth;
  25.                     h = document.documentElement.scrollHeight;
  26.                 }
  27.                 else 
  28.                     if (document.body) {
  29.                         t = document.body.scrollTop;
  30.                         l = document.body.scrollLeft;
  31.                         w = document.body.scrollWidth;
  32.                         h = document.body.scrollHeight;
  33.                     }
  34.                 return {
  35.                     t: t,
  36.                     l: l,
  37.                     w: w,
  38.                     h: h
  39.                 };
  40.             }
  41.         </script>
  42.         <style type="text/css">
  43.             * {
  44.                 border: 0;
  45.                 margin: 0;
  46.                 padding: 0;
  47.             }
  48.  
  49.             #div1 {
  50.                 padding: 50px;
  51.             }
  52.  
  53.             #div2 {
  54.                 position: relative; /* this is for testing, if the position use offsetleft and offset right, this will cause bug */
  55.                 margin: 20px;
  56.                 padding: 50px;
  57.                 background: red;
  58.             }
  59.  
  60.             #div3 {
  61.                 height: 50px;
  62.                 width: 400px;
  63.                 background: #ccc;
  64.                 padding: 20px;
  65.             }
  66.  
  67.             #cursor {
  68.                 position: absolute;
  69.                 background-color: yellow;
  70.                 width: 50px;
  71.                 z-index: 1000;
  72.             }
  73.         </style>
  74.     </head>
  75.     <body>
  76.         <div id="div1">
  77.             <div id="cursor">
  78.                 Cursor
  79.             </div>
  80.             <div id="div2">
  81.                 <br>
  82.                 div2
  83.                 <br>
  84.                 <br>
  85.                 <div style="left: 50px; top: 100px; background: green; padding: 1500px  2em 0 1000px; ">
  86.                     <div id="div3" onClick="moveCursor(this);">
  87.                         div3 - cursor should be moved to here
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.             <script type="text/javascript">
  92.                 var cursor = document.getElementById('cursor');
  93.                 var div2 = document.getElementById("div2");
  94.                 move(cursor, div2);
  95.  
  96.                 function moveCursor(cell){
  97.                     //var p = getPosition(cell);
  98.                     //cursor.style.top = p.top + "px";
  99.                     //cursor.style.left = p.left + "px";
  100.  
  101.                     var s = getScroll();
  102.                     var bcr = cell.getBoundingClientRect();
  103.                     cursor.style.top = (bcr.top + s.t) + "px";
  104.                     cursor.style.left = bcr.left + "px";
  105.                 }
  106.             </script>
  107.         </div>
  108.     </body>
  109. </html>
  110.  
Jun 27 '10 #9

Post your reply

Sign in to post your reply or Sign up for a free account.