How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

Question

Link to the code on JFiddle: http://jsfiddle.net/4v2n7wk9/1/

<html>
<head>
<title>A Grid Button Example</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
div{
    display:inline-block;
    margin-left:-2px;
    margin-right:-2px;
    margin-top:-4px;
    margin-bottom:-4px;
    position:relative;
}

.inl{
    position:absolute;
    display:block;
}

.top{
    position:absolute;
    z-index:auto;
}

.feature_layer{
    position:absolute;
    z-index:-2;
}

.unit_layer{
    position:absolute;
    z-index:-1;
}

.first_column{
    position:absolute;
    margin-left:0;
}

.second_column{
    position:absolute;
    margin-left:64px;
}

.third_column{
    position:absolute;
    margin-left:128px;
}

#first_row{
    position:absolute;
    margin-top:0;
}

#second_row{
    position:absolute;
    margin-top:64px;
}

#third_row{
    position:absolute;
    margin-top:128px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
    $("#first_row").on("click",function(){
        console.log("First row clicked.");
    });
    $("#second_row").on("click",function(){
        console.log("Second row clicked.");
    });
    $("#third_row").on("click",function(){
        console.log("Third row clicked.");
    });

    $(".first_column").on("click",function(){
        console.log("First column clicked.");
    });
    $(".second_column").on("click",function(){
        console.log("Second column clicked.");
    });
    $(".third_column").on("click",function(){
        console.log("Third column clicked.");
    });
});
</script>
Menu Below<br>
<div id="first_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="second_column" id="first_row" > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div id="first_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
</body>
</html>

I have been thoroughly stumped. I have a simple example above (not tags, not sure they'd work, they're merely organizational, the CSS is properly loaded from a seperate .css in the actual implementation, and of course is simply inserted sans- into the CSS field on JSFiddle).

Nine divs, arranged in a simple three-by-three pattern, each an image. There are three types of IDs and three types of classes corresponding to rows and columns.

This works as expected for the first column, providing console logs (inspect the result field*) of row and column for the first column. However, only columns are noted for the two columns to the right, as if they didn't have row IDs.

I've been trying to wrap my head around this seemingly simple problem and simply can't. Help! Thanks.

*In Chrome right click on JSFiddle's Result screen (lower-right hand of the four panes) and then click on Inspect Element, along with other information the window will have a console that records console.log() calls.

Answer 1

Here's an updated version of that JSFiddle which uses classes instead of ids for the rows: http://jsfiddle.net/troygizzi/4v2n7wk9/5/

Modified excerpts below.

HTML:

<div class="first_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="first_row second_column"  > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="first_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

JavaScript:

$(".first_row").on("click",function(){
    console.log("First row clicked.");
});
$(".second_row").on("click",function(){
    console.log("Second row clicked.");
});
$(".third_row").on("click",function(){
    console.log("Third row clicked.");
});

CSS:

.first_row{
    position:absolute;
    margin-top:0;
}

.second_row{
    position:absolute;
    margin-top:64px;
}

.third_row{
    position:absolute;
    margin-top:128px;
}

How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

Question

1 answers

solution1
1 ACCPTED 2014-10-12 01:14:34

How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

Question

1 answers

solution1 1 ACCPTED 2014-10-12 01:14:34

solution1
1 ACCPTED 2014-10-12 01:14:34