www.webdeveloper.com
Results 1 to 5 of 5

Thread: Get the top and left value of a div

  1. #1
    Join Date
    Dec 2013
    Posts
    3

    Get the top and left value of a div

    Hello, I have written a page that is something like this:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
    	#imgframe {
    		width: 950px;
    		height: 600px;
    		border: solid 1px #8AC007;
    		overflow: hidden;
    		cursor: move;
    		margin: 0;
    		padding: 0;
    	}
    
    	#innercont {
    		width: 1994px;
    		height: 1144px;
    		border: 0;
    		padding: 0;
    		margin: 0;
    		background: url('img/map.jpg');
    		position: relative;
    		left: -600px;
    		top: -300px;
    	}
    
    	.marker {
    		position: absolute;
    		cursor: pointer;
    		height: 7px;
    		width: 7px;
    		background: url('img/marker.png') no-repeat;
    	}
    </style>
    
    <script>
    function displayattr() {
    	var xs = document.getElementById("innercont").style.left;
    	var x = Number(xs.replace("px",""));
    	var ys = document.getElementById("innercont").style.top;
    	var y = Number(ys.replace("px",""));
    	var sum = x + ", " + y;
    	alert(sum);
    }
    </script>
    
    </head>
    <body>
    <div id="imgframe">
    	<div id="innercont" class="dragme">
    		<a class="marker" style="left: 1300px; top:864px;" onclick="movepos(1300, 864)"></a>
    	</div>
    </div>
    
    <button type="button" onclick="displayattr()">Test</button>
    
    </body>
    </html>
    The problem with this code is that in the style the position of the div id="innercont" is set to: left: -600px and top: -200px;, but when I use document.getElementById("innercont").style.top(left) it returns top=0; left=0.
    I can solve this problem by adding an onload function to the body tag of the page, that will set the initial position exactly where I want by using "document.getElementById("innercont").style.top(left)" instead of css top and left, but I don't want to, since that would mess my other functions.
    If anyone has had the same problem I would be more than happy to share their solutions.
    Thanks in advance.
    B. Chavdarov

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
    	#imgframe {
    		width: 950px;
    		height: 600px;
    		border: solid 1px #8AC007;
    		overflow: hidden;
    		cursor: move;
    		margin: 0;
    		padding: 0;
    	}
    
    	#innercont {
    		width: 1994px;
    		height: 1144px;
    		border: 0;
    		padding: 0;
    		margin: 0;
    		background: url('img/map.jpg');
    		position: relative;
    		left: -600px;
    		top: -300px;
    	}
    
    	.marker {
    		position: absolute;
    		cursor: pointer;
    		height: 7px;
    		width: 7px;
    		background: url('img/marker.png') no-repeat;
    	}
    </style>
    
    <script>
    function displayattr() {
     var o=document.getElementById('innercont')
     var x = parseInt(css(o,'left'))
     var y = parseInt(css(o,'top'));
     var sum = x + ", " + y;
     alert(sum);
    }
    
    function css(o,p){
     return o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
    }
    </script>
    
    </head>
    <body>
    <div id="imgframe">
    	<div id="innercont" class="dragme">
    		<a class="marker" style="left: 1300px; top:864px;" onclick="movepos(1300, 864)"></a>
    	</div>
    </div>
    
    <button type="button" onclick="displayattr()">Test</button>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    displayattr()
    
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2009
    Posts
    512
    This has worked for me before as a generic thing. Given the reference of an element as its argument it returns an object which has "left" and "top" properties which indicate the absolute position of the top left corner of the element.

    Code:
    function getUL(ref){
    	var x, y, ret;
    	ret = {};
    	x = 0;
    	y = 0;
    	while(ref.offsetParent){
    	    y += ref.offsetTop;
    	    x += ref.offsetLeft;
    	    ref = ref.offsetParent;
    	}
            ret.left = x;
            ret.top = y;
    	return ret;
        }

  4. #4
    Join Date
    Dec 2013
    Posts
    3
    Thank you very much!
    Vwphillips, your correction works perfectly and for that I'm grateful!

  5. #5
    Join Date
    Dec 2013
    Posts
    3
    Hello! Tcobb thank you for your post. Today I modified your function and the new worked just fine. Here is the function:
    HTML Code:
    function getx() {
    	var bg = document.getElementById("innercont");
    	var curleft = 0;
    	if (bg.offsetParent) do {
    		curleft += bg.offsetLeft;
    		}
    	while (bg = bg.offsetParent);
    	return curleft;
    }
    I realized that my first functions work only with inline styles.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles