Clever Geek Handbook

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

I have a matrix 13 x 20

, each cell contains a number between 0 and 300. Each number represents a different slab, so a map can be built from this matrix.

In addition, I have a hero symbol - a moving picture. When the arrow is pressed, it moves in that direction. Some tiles are such that the hero can walk and some cannot. In order to know where my hero can walk, and where not, I wanted, with every movement, I knew in which cell he was. If it's between some, I'll choose the one in which it's mostly (for For example, if the third part of the hero is on the cell [2,5]

and the rest is on the cell [2,6]

, I would still say that he is on the cell [2,6]

). So I checked with document.getElementById("man").style.top

(where "person" is the id of my "hero"). If it is between 98 and 48, I assume the line is 0, if it is between 99 and 151, line 1, etc., and I did the same withdocument.getElementById("man").style.right

... Everything worked great! Bye ... I copied my files and continued working on them on another computer. Four things happened:

  • So far I have been working with IE and when I opened my .html

    file with Chrome some of the pile fragments were not showing. I checked why - and it looks like in Chrome it was looking for pictures with a different name. For example, I have a pile pic called ‏yellow_grass_round_top_right.bmp

    . In Chrome, when clicking on the check items, it seems like it was looking for a pic called þþ‏yellow_grass_round_top_right.bmp

    , I have no idea where the "þþ" came from, and some other snippets have added a few "þ" (not just two). I have no idea why he adds those "þ" before the name of the picture, and I double checked so that I wasn't thinking about things.

  • Opening it with IE, 20 slabs - it takes one line - take a line and a half. I have to CTRL -

    seven times (!) Before it all is on one line. And on chrome it's on one line with no scaling (in or out).

  • Opening IE with IE showed all the tiles, but there was a problem with the right and top properties. It seems like sometime x pixels on the right are now x + something pixels. I'm guessing this is because of the difference in screen sizes and resolutions, but is there a way to make sure it doesn't change from one screen to another?

  • Another thing is that pos in Chrome is different from position in IE! After I CTRL -

    edited seven times in IE and was finally able to see the tiles on my lines, I refreshed and was able to walk with the right and top difference as I mentioned in 3, I checked which cell I am currently agreeing to in my code and then checked Chrome and got a different answer. So I believe the difference in position is not only from different screens, but from different browsers on the same computer and screen? Is there a way to fix this? Make it the same for any browser? Or is it impossible?

Since my code is about 2600 lines long, I think it won't help if I attach it, but here are some of my codes that I found relevant:

...

hero cell information

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 specified the row i at and jj the column.

...

Generate map from matrix

function makeMap()
        {
            var name="";
            for(var i=0; i<shurot; i++)
                for(var j=0; j<amudot; j++)
                {
                name="puzzle"+i+"x"+j; 
                        if(board[i][j]==0)
                        {
                            //alert(name);
                            document.getElementById(name).src="blank.bmp";
                        }
                        else if(board[i][j]==1)
                        {
                            //alert(name);
                            document.getElementById(name).src="ground.bmp";
                        }
                        else if(board[i][j]==2)
                            document.getElementById(name).src="tree_1.bmp";
                        else if(board[i][j]==3)
                            document.getElementById(name).src="tree_2.bmp";
                        else if(board[i][j]==4)
                            document.getElementById(name).src="tree_border.bmp";
                        else if(board[i][j]==5)
                            document.getElementById(name).src="forest_1.bmp";
                        else if(board[i][j]==6)
                            document.getElementById(name).src="forest_2.bmp";
                        else if(board[i][j]==7)
                            document.getElementById(name).src="forest_border.bmp";
                        else if(board[i][j]==8)
                            document.getElementById(name).src="cut_tree.bmp";
                        else if(board[i][j]==9)
                            document.getElementById(name).src="bush.bmp";
                        else if(board[i][j]==10)
                            document.getElementById(name).src="bush_border.bmp";
                }
       }

This is only part of the code (no need to write 300 lines here, which are pretty much repeated except for the difference in number and fragment).

I have 260 images with names

puzzle0x0

to

puzzle 12x19

...

They can be seen in the HTML part here:

<p style="line-height:0px">
<img src="blank.bmp" width=50 height=52 id="puzzle0x0"><img src="blank.bmp" width=50 height=52 id="puzzle0x1"><img src="blank.bmp" width=50 height=52 id="puzzle0x2"><img src="blank.bmp" width=50 height=52 id="puzzle0x3"><img src="blank.bmp" width=50 height=52 id="puzzle0x4"><img src="blank.bmp" width=50 height=52 id="puzzle0x5"><img src="blank.bmp" width=50 height=52 id="puzzle0x6"><img src="blank.bmp" width=50 height=52 id="puzzle0x7"><img src="blank.bmp" width=50 height=52 id="puzzle0x8"><img src="blank.bmp" width=50 height=52 id="puzzle0x9"><img src="blank.bmp" width=50 height=52 id="puzzle0x10"><img src="blank.bmp" width=50 height=52 id="puzzle0x11"><img src="blank.bmp" width=50 height=52 id="puzzle0x12"><img src="blank.bmp" width=50 height=52 id="puzzle0x13"><img src="blank.bmp" width=50 height=52 id="puzzle0x14"><img src="blank.bmp" width=50 height=52 id="puzzle0x15"><img src="blank.bmp" width=50 height=52 id="puzzle0x16"><img src="blank.bmp" width=50 height=52 id="puzzle0x17"><img src="blank.bmp" width=50 height=52 id="puzzle0x18"><img src="blank.bmp" width=50 height=52 id="puzzle0x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle1x0"><img src="blank.bmp" width=50 height=52 id="puzzle1x1"><img src="blank.bmp" width=50 height=52 id="puzzle1x2"><img src="blank.bmp" width=50 height=52 id="puzzle1x3"><img src="blank.bmp" width=50 height=52 id="puzzle1x4"><img src="blank.bmp" width=50 height=52 id="puzzle1x5"><img src="blank.bmp" width=50 height=52 id="puzzle1x6"><img src="blank.bmp" width=50 height=52 id="puzzle1x7"><img src="blank.bmp" width=50 height=52 id="puzzle1x8"><img src="blank.bmp" width=50 height=52 id="puzzle1x9"><img src="blank.bmp" width=50 height=52 id="puzzle1x10"><img src="blank.bmp" width=50 height=52 id="puzzle1x11"><img src="blank.bmp" width=50 height=52 id="puzzle1x12"><img src="blank.bmp" width=50 height=52 id="puzzle1x13"><img src="blank.bmp" width=50 height=52 id="puzzle1x14"><img src="blank.bmp" width=50 height=52 id="puzzle1x15"><img src="blank.bmp" width=50 height=52 id="puzzle1x16"><img src="blank.bmp" width=50 height=52 id="puzzle1x17"><img src="blank.bmp" width=50 height=52 id="puzzle1x18"><img src="blank.bmp" width=50 height=52 id="puzzle1x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle2x0"><img src="blank.bmp" width=50 height=52 id="puzzle2x1"><img src="blank.bmp" width=50 height=52 id="puzzle2x2"><img src="blank.bmp" width=50 height=52 id="puzzle2x3"><img src="blank.bmp" width=50 height=52 id="puzzle2x4"><img src="blank.bmp" width=50 height=52 id="puzzle2x5"><img src="blank.bmp" width=50 height=52 id="puzzle2x6"><img src="blank.bmp" width=50 height=52 id="puzzle2x7"><img src="blank.bmp" width=50 height=52 id="puzzle2x8"><img src="blank.bmp" width=50 height=52 id="puzzle2x9"><img src="blank.bmp" width=50 height=52 id="puzzle2x10"><img src="blank.bmp" width=50 height=52 id="puzzle2x11"><img src="blank.bmp" width=50 height=52 id="puzzle2x12"><img src="blank.bmp" width=50 height=52 id="puzzle2x13"><img src="blank.bmp" width=50 height=52 id="puzzle2x14"><img src="blank.bmp" width=50 height=52 id="puzzle2x15"><img src="blank.bmp" width=50 height=52 id="puzzle2x16"><img src="blank.bmp" width=50 height=52 id="puzzle2x17"><img src="blank.bmp" width=50 height=52 id="puzzle2x18"><img src="blank.bmp" width=50 height=52 id="puzzle2x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle3x0"><img src="blank.bmp" width=50 height=52 id="puzzle3x1"><img src="blank.bmp" width=50 height=52 id="puzzle3x2"><img src="blank.bmp" width=50 height=52 id="puzzle3x3"><img src="blank.bmp" width=50 height=52 id="puzzle3x4"><img src="blank.bmp" width=50 height=52 id="puzzle3x5"><img src="blank.bmp" width=50 height=52 id="puzzle3x6"><img src="blank.bmp" width=50 height=52 id="puzzle3x7"><img src="blank.bmp" width=50 height=52 id="puzzle3x8"><img src="blank.bmp" width=50 height=52 id="puzzle3x9"><img src="blank.bmp" width=50 height=52 id="puzzle3x10"><img src="blank.bmp" width=50 height=52 id="puzzle3x11"><img src="blank.bmp" width=50 height=52 id="puzzle3x12"><img src="blank.bmp" width=50 height=52 id="puzzle3x13"><img src="blank.bmp" width=50 height=52 id="puzzle3x14"><img src="blank.bmp" width=50 height=52 id="puzzle3x15"><img src="blank.bmp" width=50 height=52 id="puzzle3x16"><img src="blank.bmp" width=50 height=52 id="puzzle3x17"><img src="blank.bmp" width=50 height=52 id="puzzle3x18"><img src="blank.bmp" width=50 height=52 id="puzzle3x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle4x0"><img src="blank.bmp" width=50 height=52 id="puzzle4x1"><img src="blank.bmp" width=50 height=52 id="puzzle4x2"><img src="blank.bmp" width=50 height=52 id="puzzle4x3"><img src="blank.bmp" width=50 height=52 id="puzzle4x4"><img src="blank.bmp" width=50 height=52 id="puzzle4x5"><img src="blank.bmp" width=50 height=52 id="puzzle4x6"><img src="blank.bmp" width=50 height=52 id="puzzle4x7"><img src="blank.bmp" width=50 height=52 id="puzzle4x8"><img src="blank.bmp" width=50 height=52 id="puzzle4x9"><img src="blank.bmp" width=50 height=52 id="puzzle4x10"><img src="blank.bmp" width=50 height=52 id="puzzle4x11"><img src="blank.bmp" width=50 height=52 id="puzzle4x12"><img src="blank.bmp" width=50 height=52 id="puzzle4x13"><img src="blank.bmp" width=50 height=52 id="puzzle4x14"><img src="blank.bmp" width=50 height=52 id="puzzle4x15"><img src="blank.bmp" width=50 height=52 id="puzzle4x16"><img src="blank.bmp" width=50 height=52 id="puzzle4x17"><img src="blank.bmp" width=50 height=52 id="puzzle4x18"><img src="blank.bmp" width=50 height=52 id="puzzle4x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle5x0"><img src="blank.bmp" width=50 height=52 id="puzzle5x1"><img src="blank.bmp" width=50 height=52 id="puzzle5x2"><img src="blank.bmp" width=50 height=52 id="puzzle5x3"><img src="blank.bmp" width=50 height=52 id="puzzle5x4"><img src="blank.bmp" width=50 height=52 id="puzzle5x5"><img src="blank.bmp" width=50 height=52 id="puzzle5x6"><img src="blank.bmp" width=50 height=52 id="puzzle5x7"><img src="blank.bmp" width=50 height=52 id="puzzle5x8"><img src="blank.bmp" width=50 height=52 id="puzzle5x9"><img src="blank.bmp" width=50 height=52 id="puzzle5x10"><img src="blank.bmp" width=50 height=52 id="puzzle5x11"><img src="blank.bmp" width=50 height=52 id="puzzle5x12"><img src="blank.bmp" width=50 height=52 id="puzzle5x13"><img src="blank.bmp" width=50 height=52 id="puzzle5x14"><img src="blank.bmp" width=50 height=52 id="puzzle5x15"><img src="blank.bmp" width=50 height=52 id="puzzle5x16"><img src="blank.bmp" width=50 height=52 id="puzzle5x17"><img src="blank.bmp" width=50 height=52 id="puzzle5x18"><img src="blank.bmp" width=50 height=52 id="puzzle5x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle6x0"><img src="blank.bmp" width=50 height=52 id="puzzle6x1"><img src="blank.bmp" width=50 height=52 id="puzzle6x2"><img src="blank.bmp" width=50 height=52 id="puzzle6x3"><img src="blank.bmp" width=50 height=52 id="puzzle6x4"><img src="blank.bmp" width=50 height=52 id="puzzle6x5"><img src="blank.bmp" width=50 height=52 id="puzzle6x6"><img src="blank.bmp" width=50 height=52 id="puzzle6x7"><img src="blank.bmp" width=50 height=52 id="puzzle6x8"><img src="blank.bmp" width=50 height=52 id="puzzle6x9"><img src="blank.bmp" width=50 height=52 id="puzzle6x10"><img src="blank.bmp" width=50 height=52 id="puzzle6x11"><img src="blank.bmp" width=50 height=52 id="puzzle6x12"><img src="blank.bmp" width=50 height=52 id="puzzle6x13"><img src="blank.bmp" width=50 height=52 id="puzzle6x14"><img src="blank.bmp" width=50 height=52 id="puzzle6x15"><img src="blank.bmp" width=50 height=52 id="puzzle6x16"><img src="blank.bmp" width=50 height=52 id="puzzle6x17"><img src="blank.bmp" width=50 height=52 id="puzzle6x18"><img src="blank.bmp" width=50 height=52 id="puzzle6x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle7x0"><img src="blank.bmp" width=50 height=52 id="puzzle7x1"><img src="blank.bmp" width=50 height=52 id="puzzle7x2"><img src="blank.bmp" width=50 height=52 id="puzzle7x3"><img src="blank.bmp" width=50 height=52 id="puzzle7x4"><img src="blank.bmp" width=50 height=52 id="puzzle7x5"><img src="blank.bmp" width=50 height=52 id="puzzle7x6"><img src="blank.bmp" width=50 height=52 id="puzzle7x7"><img src="blank.bmp" width=50 height=52 id="puzzle7x8"><img src="blank.bmp" width=50 height=52 id="puzzle7x9"><img src="blank.bmp" width=50 height=52 id="puzzle7x10"><img src="blank.bmp" width=50 height=52 id="puzzle7x11"><img src="blank.bmp" width=50 height=52 id="puzzle7x12"><img src="blank.bmp" width=50 height=52 id="puzzle7x13"><img src="blank.bmp" width=50 height=52 id="puzzle7x14"><img src="blank.bmp" width=50 height=52 id="puzzle7x15"><img src="blank.bmp" width=50 height=52 id="puzzle7x16"><img src="blank.bmp" width=50 height=52 id="puzzle7x17"><img src="blank.bmp" width=50 height=52 id="puzzle7x18"><img src="blank.bmp" width=50 height=52 id="puzzle7x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle8x0"><img src="blank.bmp" width=50 height=52 id="puzzle8x1"><img src="blank.bmp" width=50 height=52 id="puzzle8x2"><img src="blank.bmp" width=50 height=52 id="puzzle8x3"><img src="blank.bmp" width=50 height=52 id="puzzle8x4"><img src="blank.bmp" width=50 height=52 id="puzzle8x5"><img src="blank.bmp" width=50 height=52 id="puzzle8x6"><img src="blank.bmp" width=50 height=52 id="puzzle8x7"><img src="blank.bmp" width=50 height=52 id="puzzle8x8"><img src="blank.bmp" width=50 height=52 id="puzzle8x9"><img src="blank.bmp" width=50 height=52 id="puzzle8x10"><img src="blank.bmp" width=50 height=52 id="puzzle8x11"><img src="blank.bmp" width=50 height=52 id="puzzle8x12"><img src="blank.bmp" width=50 height=52 id="puzzle8x13"><img src="blank.bmp" width=50 height=52 id="puzzle8x14"><img src="blank.bmp" width=50 height=52 id="puzzle8x15"><img src="blank.bmp" width=50 height=52 id="puzzle8x16"><img src="blank.bmp" width=50 height=52 id="puzzle8x17"><img src="blank.bmp" width=50 height=52 id="puzzle8x18"><img src="blank.bmp" width=50 height=52 id="puzzle8x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle9x0"><img src="blank.bmp" width=50 height=52 id="puzzle9x1"><img src="blank.bmp" width=50 height=52 id="puzzle9x2"><img src="blank.bmp" width=50 height=52 id="puzzle9x3"><img src="blank.bmp" width=50 height=52 id="puzzle9x4"><img src="blank.bmp" width=50 height=52 id="puzzle9x5"><img src="blank.bmp" width=50 height=52 id="puzzle9x6"><img src="blank.bmp" width=50 height=52 id="puzzle9x7"><img src="blank.bmp" width=50 height=52 id="puzzle9x8"><img src="blank.bmp" width=50 height=52 id="puzzle9x9"><img src="blank.bmp" width=50 height=52 id="puzzle9x10"><img src="blank.bmp" width=50 height=52 id="puzzle9x11"><img src="blank.bmp" width=50 height=52 id="puzzle9x12"><img src="blank.bmp" width=50 height=52 id="puzzle9x13"><img src="blank.bmp" width=50 height=52 id="puzzle9x14"><img src="blank.bmp" width=50 height=52 id="puzzle9x15"><img src="blank.bmp" width=50 height=52 id="puzzle9x16"><img src="blank.bmp" width=50 height=52 id="puzzle9x17"><img src="blank.bmp" width=50 height=52 id="puzzle9x18"><img src="blank.bmp" width=50 height=52 id="puzzle9x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle10x0"><img src="blank.bmp" width=50 height=52 id="puzzle10x1"><img src="blank.bmp" width=50 height=52 id="puzzle10x2"><img src="blank.bmp" width=50 height=52 id="puzzle10x3"><img src="blank.bmp" width=50 height=52 id="puzzle10x4"><img src="blank.bmp" width=50 height=52 id="puzzle10x5"><img src="blank.bmp" width=50 height=52 id="puzzle10x6"><img src="blank.bmp" width=50 height=52 id="puzzle10x7"><img src="blank.bmp" width=50 height=52 id="puzzle10x8"><img src="blank.bmp" width=50 height=52 id="puzzle10x9"><img src="blank.bmp" width=50 height=52 id="puzzle10x10"><img src="blank.bmp" width=50 height=52 id="puzzle10x11"><img src="blank.bmp" width=50 height=52 id="puzzle10x12"><img src="blank.bmp" width=50 height=52 id="puzzle10x13"><img src="blank.bmp" width=50 height=52 id="puzzle10x14"><img src="blank.bmp" width=50 height=52 id="puzzle10x15"><img src="blank.bmp" width=50 height=52 id="puzzle10x16"><img src="blank.bmp" width=50 height=52 id="puzzle10x17"><img src="blank.bmp" width=50 height=52 id="puzzle10x18"><img src="blank.bmp" width=50 height=52 id="puzzle10x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle11x0"><img src="blank.bmp" width=50 height=52 id="puzzle11x1"><img src="blank.bmp" width=50 height=52 id="puzzle11x2"><img src="blank.bmp" width=50 height=52 id="puzzle11x3"><img src="blank.bmp" width=50 height=52 id="puzzle11x4"><img src="blank.bmp" width=50 height=52 id="puzzle11x5"><img src="blank.bmp" width=50 height=52 id="puzzle11x6"><img src="blank.bmp" width=50 height=52 id="puzzle11x7"><img src="blank.bmp" width=50 height=52 id="puzzle11x8"><img src="blank.bmp" width=50 height=52 id="puzzle11x9"><img src="blank.bmp" width=50 height=52 id="puzzle11x10"><img src="blank.bmp" width=50 height=52 id="puzzle11x11"><img src="blank.bmp" width=50 height=52 id="puzzle11x12"><img src="blank.bmp" width=50 height=52 id="puzzle11x13"><img src="blank.bmp" width=50 height=52 id="puzzle11x14"><img src="blank.bmp" width=50 height=52 id="puzzle11x15"><img src="blank.bmp" width=50 height=52 id="puzzle11x16"><img src="blank.bmp" width=50 height=52 id="puzzle11x17"><img src="blank.bmp" width=50 height=52 id="puzzle11x18"><img src="blank.bmp" width=50 height=52 id="puzzle11x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle12x0"><img src="blank.bmp" width=50 height=52 id="puzzle12x1"><img src="blank.bmp" width=50 height=52 id="puzzle12x2"><img src="blank.bmp" width=50 height=52 id="puzzle12x3"><img src="blank.bmp" width=50 height=52 id="puzzle12x4"><img src="blank.bmp" width=50 height=52 id="puzzle12x5"><img src="blank.bmp" width=50 height=52 id="puzzle12x6"><img src="blank.bmp" width=50 height=52 id="puzzle12x7"><img src="blank.bmp" width=50 height=52 id="puzzle12x8"><img src="blank.bmp" width=50 height=52 id="puzzle12x9"><img src="blank.bmp" width=50 height=52 id="puzzle12x10"><img src="blank.bmp" width=50 height=52 id="puzzle12x11"><img src="blank.bmp" width=50 height=52 id="puzzle12x12"><img src="blank.bmp" width=50 height=52 id="puzzle12x13"><img src="blank.bmp" width=50 height=52 id="puzzle12x14"><img src="blank.bmp" width=50 height=52 id="puzzle12x15"><img src="blank.bmp" width=50 height=52 id="puzzle12x16"><img src="blank.bmp" width=50 height=52 id="puzzle12x17"><img src="blank.bmp" width=50 height=52 id="puzzle12x18"><img src="blank.bmp" width=50 height=52 id="puzzle12x19"><br>
</p>

I think this is all relevant code, but if something else is missing and you deem it appropriate, I will add it (just didn't want to add unnecessary code that is already long enough as it is).

If anyone has a solution to one of the problems I mentioned I would be very happy to hear how to fix them.

Thank!

+3


source to share


2 answers


Getting coordinates is pretty simple:

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

But it looks like you are trying to set the code snippets exactly x,y

on the screen.

So, start with the installation of padding

, margin

, border

and, perhaps, line-height

of all [relevant] elements on 0

.

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

Then either put the images absolutely:



<style type='text/css'>
  img.tile {
    position: absolute;
    width: 50px;
    height: 52px;
  }
</style>

<img class='tile' style='top: 1px; left: 51px;' />
<img class='tile' style='top: 1px; left: 101px;' />
<img class='tile' style='top: 1px; left: 151px;' />
<img class='tile' style='top: 51px; left: 1px;' />

<!-- etc. -->

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

<style type='text/css'>

  table.gameboard {
    width: 500px;
    height: 520px;
  }

  table.gameboard td {
    width: 50px;
    height: 52px;
    border-spacing: 0px;
    border-collapse: collapse;
  }

</style>

<table class='gameboard'>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <!-- etc. -->
</table>

Bonus Points: Don't rely solely on the pre-calculated position of each tile. Create real objects specific to each slab 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 object GameBoard

that either iterates through the likely chunks, naming tile.contains()

for each using the xy coordinates of the mouse. You can either turn on your magic: "I am a well-defined XY tile contains an x, y coordinate" here or , you can create an index as tiles are added to the board. Though, to be honest, if you're only working with 300-hectare slabs, repeating all 300 may not mean a noticeable performance issue.

+2


source


That's a lot of code and questions for one simple idea mentioned in the title.

From what I can tell, you are trying to find the position of an element and display it based on which client / browser is being used. You need to specify if the content of your puzzle will be displayed on a given client / browser using @media css rules

To accomplish this, you need to find the position of each element using javascript:

document.element.offsetLeft, document.element.offsetTop

You can even find the client's viewport with:



document.element.clientWidth, document.element.clientHeight

Even though this is not a mobile app, you might also consider something like PhoneGap to deploy source files for different browsers / platforms.

http://www.w3schools.com/jsref/dom_obj_all.asp

http://phonegap.com/

http://www.w3schools.com/css/css_mediatypes.asp

0


source






More articles:


All Articles