Ok, so lets say I'm trying to make a game that can be played on phone or computer. To do this I'm just going to use mousedown.
I'm creating a canvas, and then a <div> tag that will act as a grid over the canvas. I create an array like so,
var grid = [
'0000',
'0000',
'0000'
];
Now I programed the grid array to populate in the div tag sitting on top of the canvas. What happens on the canvas depends on which grid box is clicked. How can I detect which grid box is clicked? I know it's probably using "this" but I seem to have trouble using that. I DON'T WANT A JQUERY SOLUTION. After I do that, how can i find the position that that specific grid box is in? meaning the css left and top.
I understand everything said and asked except what the meaning of your grid array is.
Is that supposed to mean that the overlay <div> is divided into 3 rows of 4 columns each?
If so, are you wanting the JS code to automatically calculate the size of each cell in the grid?
You think to litereally. The code I put was just an example. All i want to know is how to detect which div i clicked on. and what it's position it is on the screen
a <div> tag that will act as a grid over the canvas
So you are saying you just want to know where IN THAT ONE <div> that the user clicked?
Then what in the heck was the purpose of showing that useless dummy array??? If I think too literally, you write too irrelevant?
Not hard, but if you want to worry about older MSIE you have to write one very tiny line of conditional code.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#overlay {
position: relative;
height: 550px;
width: 730px;
border: solid blue 3px;
background-color: lightblue;
margin-left: 120px;
}
</style>
</head>
<body>
Stuff.<br/>
Stuff.<br/>
<br/>
<div id="overlay"></div>
<script type="text/javascript">
(
function()
{
var div = document.getElementById("overlay");
div.onclick = showWhere;
function showWhere( evt )
{
if ( evt == null ) evt = window.event; // handle older MSIE
// find where the click occurred
var x = evt.clientX;
var y = evt.clientY;
// but those are absolute on the screen
// we need to find them relative to the div
var node = div;
while ( node != null )
{
x -= node.offsetLeft;
y -= node.offsetTop;
node = node.offsetParent;
}
alert("You clicked at x=" + x + ", y=" + y + " within the div");
}
}
)();
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
p.s.: You could instead use the computedStyle (again, you have to write browser-dependent code) to get the top left corner of the <div>. Google for "computedStyle" if you care.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
i wanted the array to build tiles of dives which would be clickable.
Ummm...that's what I thought, in the first place. That's why I wrote:
Quote:
Is that supposed to mean that the overlay <div> is divided into 3 rows of 4 columns each?
If so, are you wanting the JS code to automatically calculate the size of each cell in the grid?
That's exactly what I thought you wanted to do, with the array controlling how *MANY* tiles were created.
We can do that, still, if that's what you would prefer. Not hard at all.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Hmmm, for a master coder you're not good at helping. Again, not everyone is as experienced as you are, and does not know the best solution to things, that is why we come here. Not to be talked down to. Thanks
I give up. I *WAS* just trying to find out what you were after. Trying to give you an answer to fit your needs. I gave you one answer but it didn't seem to be what you wanted. So I tried again. But I *still* don't know what you were asking for.
If it is "talking down to" to ask for more information, then I won't do so with you any more. I just won't talk to you and that will solve everything.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
With a table. It's easy to find the clicked cells and ids which can give row and column.
See this grid
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Jeu enregistré</title>
<style type="text/css">
#pge {width:600px;margin:0 auto;}
p{text-align:center;font-size:large;}
table,td {margin:30px auto;border:1px solid black;border-collapse:collapse}
.clr {background-color:#008001}
.grs {background-color:#eee}
</style>
</head>
<body>
<p>Click on a cell to move the green cell</p>
<div id="pge"></div>
<script type="text/javascript">
// dmf is a fictionnal dimension to avoid edge effects
var dim=5,nmc=dim*dim,dmf=dim+2;
// Build a tableau dimxdim with nmc cells
var ctb='<table border="1" id="tbl">';
for (var i=0;i<nmc;i++) {j=Math.floor(i/dim)*dmf+i%dim+1;
if (i%dim==0) ctb+='<tr height="50">';// new line
ctb+='<td width="50" id="t'+j+'">'+j+'</td>';// nouvelle cellule
if (i%dim==dim-1) ctb+='</tr>';// fin de ligne
}
document.getElementById('pge').innerHTML=ctb+'</table>';
// to add value for adjacent cells
vsn=[-1-dmf,-dmf,1-dmf,-1,1,dmf-1,dmf,dmf-(-1)];
// initial green cell and a string of moves
var csV=8,chC='';
vrt(csV,true);
// click event to replace
document.getElementById('tbl').onclick=dpl;
// we find the cliked cell with its id
function dpl(e){var i,j,t=e?e.target:window.event.srcElement,n;
if (t.id.substr(0,1)!='t') return;
// its number
n=parseInt(t.id.substr(1));
// Loop on adjacent cases
for (i=0;i<vsn.length;i++) {j=n-vsn[i];
// to avoid false cells
if (!document.getElementById('t'+j)) continue;
if (j==csV) {// we move
vrt(csV,false);vrt(n,true);csV=n;chC+=','+n;return}}
alert("Illégal move");
return false;
}
function vrt(c,o){var i,f=o?'grs':'';
document.getElementById('t'+c).className=o?'clr':'';
for (i=0;i<vsn.length;i++) {j=c-vsn[i];
if (!document.getElementById('t'+j)) continue;
document.getElementById('t'+j).className=f;}
}
</script>
</body>
</html>
Last edited by 007julien; 01-02-2013 at 11:33 PM..
I give up. I *WAS* just trying to find out what you were after. Trying to give you an answer to fit your needs. I gave you one answer but it didn't seem to be what you wanted. So I tried again. But I *still* don't know what you were asking for.
If it is "talking down to" to ask for more information, then I won't do so with you any more. I just won't talk to you and that will solve everything.
Before you post, read our: 
