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.

You can't have duplicate ID's, it'll only use the first one, also you have a rogue double quote in one of your img tags — bruchowski
– bruchowski, Commented Oct 12, 2014 at 1:09
Each object has only one ID and one class, unless I'm gravely mistaken. Each class and ID definition is also unique, again unless I'm gravely mistaken. PS Thanks for catching the image tag misquote. — A Questioner
– A Questioner, Commented Oct 12, 2014 at 1:10
@user3501778 you are mistaken. Your ids are repeated.count how many times you see id="first_row" . I count three. — Crowcoder
– Crowcoder, Commented Oct 12, 2014 at 1:13
id's and classes do not create a composite key or anything, they are unique only to themselves. You have 3 declarations of the same ID, just use a class and you should be fine — bruchowski
– bruchowski, Commented Oct 12, 2014 at 1:13
jsfiddle.net/75wt5p8f/2 I forked your fiddle with that change — bruchowski
– bruchowski, Commented Oct 12, 2014 at 1:14

Troy Gizzi · Accepted Answer · 2014-10-12 01:14:34Z

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;
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related