Member Avatar for marani

First of all, I'm not from an english-speaking country, so I'm sorry for any mistakes. If my english is not always understandable, please ask.


I got some divs with IDs which I position via css in an external file.
So I got something like this on the html-site:

<div id="i1" onclick="move(1)"></div>

In the css-sheet there ist something like this:

#i1 {position:absolute; left:193; top:47; height: 20; width: 20; background-color: #369e1c;}

Everything is positioned as I want it, but I want to read out the position of the div (to position something else), but getElementById somehow doesn't work. It all worked well, when the css was directly in the page, but it won't if it's in an external file.

Basically I do something like this:

function move(where){
	var ids = "i" + where;
	var newtop = document.getElementById(ids).style.left;
	var newleft = document.getElementById(ids).style.left;
	document.getElementById("playerred").style.left = newleft;
	document.getElementById("playerred").style.top = newtop;
...
}

If I run firbug newtop and newleft is "", so somewhat empty.
Is there a way to read out the positioning otherwise?

  • 4 Contributors
  • 5 Replies
  • 211 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by marani
Member Avatar for vsmash

Are you able to use jquery?

Member Avatar for Acute

You have a mistake up there:)you've assigned left property to newtop variable. I don't know why your code doesn't work, but i think you should try jquery library. If u're new to jquery check out the tutorial at w3schools site, it's very easy.

Member Avatar for fxm

Basically I do something like this:

#i1 {position:absolute; left:193; top:47; height: 20; width: 20; background-color: #369e1c;}
function move(where){
	var ids = "i" + where;
	var newtop = document.getElementById(ids).style.left;
}
<div id="i1" onclick="move(1)"></div>

Here is a toy program that shows how the .style.xxx properties work

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <style type="text/css">
	#i1 {position:absolute; background-color: #369e1c; height: 20px; width: 20px; }
    </style>
    <script type="text/javascript">
function move(where){
	var ids = "i" + where;
	alert(document.getElementById(ids).style.top)
	var newtop = document.getElementById(ids).style.top;
}
    </script>
    <title></title>
  </head>
  <body>
    <div style="left:193px; top:47px;" id="i1" onclick="move(1)">
    </div>
  </body>
</html>

The alert will display '47px'. When the style= elements are removed from the <div> and placed in the <style> section, that same alert will display nothing.

Member Avatar for fxm 
Is there a way to read out the positioning otherwise?

This page http://www.quirksmode.org/dom/getstyles.html has a long discussion of the methods available to do what you want. Because of browser differences, you basically have to do most things in at least two different ways.

For styles it is comparatively easy: using the method required by each browser returns the matching value. For locations and sizes it can be more complicated: choosing the property name required by each browser is, of course, a necessary first step; after that, there are additional browser differences in size and offset calculations that you may need to take into consideration (although using position:absolute may simplify some of that).

Member Avatar for marani

Thank you for all your help. It works if I use offsetTop and offsetLeft, as described in the last post. As the positioning is absolute anyway, it's rather simple. =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.