JS: How to find an element's position on the screen without it being different on different computers?

Question

I have a 13 x 20 matrix, each cell holding a number ranging between 0 to 300. Each number represent a different tile, so a map can be built from this matrix.

Apart from that I have a "hero" character - A movable picture. When pressing an arrow, it moves in that direction. Some tiles are such that the hero can walk on, while some aren't. For knowing where my hero can walk and where not, I wanted that on every movement he'll make I'll know on which cell in the matrix he's in. If he's between some, I'll choose the one he's mostly in (for example - if a third of the hero is on cell [2,5] and the rest on cell [2,6] I'd still say that he's on cell [2,6]). So I checked with document.getElementById("man").style.top (where "man" is the id of my "hero"). If it's between 98 and 48, I take it the line is 0, if it's between 99 and 151, it's line 1, and so on, and I did the same thing with document.getElementById("man").style.right. Everything worked perfectly! Until...I copied my files and went on to keep working on them on another computer. Four things happened:

so far I worked with IE, and when opening my .html file with Chrome, some of the tile pics didn't show up. I checked why - and it seems like on Chrome it was looking for pictures with a different name. For example, I have a tile pic called ‏yellow_grass_round_top_right.bmp. On Chrome, when pressing inspect elements, it seems that it was looking for a pic called þþ‏yellow_grass_round_top_right.bmp, I have no idea where the "þþ‏" came from, and on some other tiles it adds several "þ" (not just two). I have no idea why it adds these "þ"s before the picture's name, and I double-checked to make sure I'm not imagining things.
Opening it with IE, 20 tiles - that should take a single line - take a line and a half. I have to CTRL+- seven times(!) before it's all on the same line. And on chrome it's on the same line without any zooms (in or out).
Opening it with IE showed all the tiles, but had a problem with the right and top properties. It seems like what was once x pixels from the right is now x+something pixels. I assume it's because the difference in the screens' sizes and resolution, but is there a way to make sure it won't change from one screen to another?
Another thing is that the pos on Chrome is different from the one in IE! After I CTRL+-ed for seven times on IE, and was finally able to see the tiles on their lines, I refreshed and could walk with the right and top difference as I mentioned in 3, I checked at which cell I am now according to my code, and later checked on Chrome and got a different answer. So I take it there is a difference in the position not just from different screens, but also from different browsers on the same computer and screen? Is there any way to fix this too? Make it the same position for any browser? Or is this one not possible?

Since my code is about 2600 lines, I think it won't help if I'll attach it as well, but here are some pieced of my code I found relevant:

.

hero's cell info

function checkNextRightPos(xx)
        {
            if((xx<=1246) && (xx>=1200))
                return 0;
            else if((xx<1200) && (xx>=1150))
                return 1;
            else if((xx<1150) && (xx>=1100))
                return 2;
            else if((xx<1100) && (xx>=1050))
                return 3;
            else if((xx<1050) && (xx>=1000))
                return 4;
            else if((xx<1000) && (xx>=950))
                return 5;
            else if((xx<950) && (xx>=900))
                return 6;
            else if((xx<900) && (xx>=850))
                return 7;
            else if((xx<850) && (xx>=800))
                return 8;
            else if((xx<800) && (xx>=750))
                return 9;
            else if((xx<750) && (xx>=700))
                return 10;
            else if((xx<700) && (xx>=650))
                return 11;
            else if((xx<650) && (xx>=600))
                return 12;
            else if((xx<600) && (xx>=550))
                return 13;
            else if((xx<550) && (xx>=500))
                return 14;
            else if((xx<500) && (xx>=450))
                return 15;
            else if((xx<450) && (xx>=400))
                return 16;
            else if((xx<400) && (xx>=350))
                return 17;
            else if((xx<350) && (xx>=295))
                return 18;
            else if((xx<295) && (xx>=245))
                return 19;
            else return -1;
        }

        function checkRightPos()
        {
            jj=checkNextRightPos(rightPos);
        }

        function checkNextTopPos(xx)
        {
            if((xx<=98) && (xx>=46))
                return 0;
            else if((xx<151) && (xx>=99))
                return 1;
            else if((xx<203) && (xx>=151))
                return 2;
            else if((xx<255) && (xx>=203))
                return 3;
            else if((xx<307) && (xx>=255))
                return 4;
            else if((xx<359) && (xx>=307))
                return 5;
            else if((xx<411) && (xx>=359))
                return 6;
            else if((xx<463) && (xx>=411))
                return 7;
            else if((xx<515) && (xx>=463))
                return 8;
            else if((xx<567) && (xx>=515))
                return 9;
            else if((xx<619) && (xx>=567))
                return 10;
            else if((xx<671) && (xx>=619))
                return 11;
            else if((xx<723) && (xx>=671))
                return 12;
        }   

        function checkTopPos()
        {
            ii=checkNextTopPos(topPos);
        }

ii indicated the line I'm at and jj the column.

.

Generate the map from the matrix

function makeMap()
        {
            var name="";
            for(var i=0; i


This is just part of the code (no need to write here 300 lines that are pretty much repeating themselves, apart from the difference in the number and the tile).
I have 260 pictures that have the names puzzle0x0 to puzzle 12x19
They can be seen in the HTML part in here:



























 

I think this is all the relevant code there is, but if anything else is missing and you think it's relevant I'll add it (just didn't want to add unnecessary code, already long enough as it is).
If anyone has a solution for one of the problems I mentioned, I'll be very happy to hear how to fix them.
Thanks!

svidgen · Accepted Answer

Getting the coordinates is pretty straightforward:

var node = document.getElementById(someId);
var x = node.offsetLeft;
var y = node.offsetTop;
var width = node.offsetWidth;
var height = node.offsetHeight;

But, it seems more like you're trying to accurately set the x,y coords of tiles on screen.

So, start by setting the padding, margin, border, and possibly the line-height of all [relevant] elements to 0.

* {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
}

Then, either position the images absolutely:

Or put them in a table (taboo, I know):

Bonus points: Don't rely exclusively on the pre-computed position of each tile. Create genuine objects that refer to each tile node:

function Tile() {
  this.node = initalizeHoweverYouWant();

  this.contains = function(x, y) {
    if (
      x >= this.node.offsetLeft
      && x <= (this.node.offsetLeft + this.node.offsetWidth)
      && y >= this.node.offsetTop
      && y <= (this.node.offsetTop + this.node.offsetHeight)
    ) {
      return true;
    } else {
      return false;
    }
  }
}

And then some sort of GameBoard object, that either iterates through the probable tiles, calling tile.contains() on each using the mouse's x-y coords. You could either include your magic "I'm reasonably certain tile XY contains coord x,y" math here, or you could actually create an index as tiles are added to the board. Though honestly, if you're only working with 300-ish tiles, iterating through all 300 may not be a notable performance concern.

JS: How to find an element's position on the screen without it being different on different computers?

Answers (2)

Related Questions

JS: How to find an element&#39;s position on the screen without it being different on different computers?

Answers (2)

Related Questions

JS: How to find an element's position on the screen without it being different on different computers?