So my problem is this, I need to create a grid that in each cell there should be a 0 or a 1. These cells when clicked should toggle between 0 and 1. When hovered It should show the coordinates (ex: 1,5). Now the only way I got this to work was by creating three divs. One for the cell (which contains the number), one for the coordinates (this one is added dynamically) and another div (wrapper) that will on top of the other two and this one will have the event listeners. So basically I'm creating three divs for cell, now this work perfectly if its for a 10x10 grid, but when It gets to a more large (64x64) the browser starts to freeze.
This is how the HTML looks for a cell of the grid:
<div class="cell cellUnselected" id="cell_1_1" style="left: 0px; top: 0px;">0</div>
<div class="cellCoordinates cellCoordText" id="cell_1_1_coord" style="left: 0px; top: 0px;"></div>
<div class="cellWrapper" id="cell_1_1_wrapper" style="left: 0px; top: 0px;"></div>
I created a working fiddle please take a look:
http://jsfiddle.net/vicgonzalez25/Tfs2M/
The problem: Once the grid start getting to a bigger size (ex: 64x64) by creating these three divs the browser starts to freeze.
My question is: is there a more efficient way of doing this grid ? Maybe using a table ? Thanks
In order to reproduce:
HTML:
<div id="gridLayout" class="gridLayout">
<div id="gridHeader">
<h2>Aperture Configuration:</h2>
Grid Size:
<input id="rows" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
x
<input id="cols" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
</div>
<div id="grid" class="gridContainer"></div>
<div id="matrixHeader" style="position:absolute">
<h2>Auto Correlation:</h2>
</div>
<div id="matrix" class="autocorrMatrixContainer"></div>
</div>
Javascript:
(function(GRASP, $){
var GRID_ROWS,
GRID_COLS,
GRID_ELEMENT,
MATRIX_ROWS,
MATRIX_COLS,
MATRIXHEADER_ELEMENT,
MATRIX_ELEMENT,
A,C;
GRASP.config = {
gridContainer: "grid",
matrixContainer: "matrix",
matrixHeader: "matrixHeader"
};
GRASP.start = function(){
GRID_ROWS = $("#rows").val();
GRID_COLS = $("#cols").val();
MATRIX_ROWS = GRID_ROWS * 2 - 1;
MATRIX_COLS = GRID_COLS * 2 - 1;
createGrid();
createAutocorrelationMatrix();
};
function createGrid()
{
GRID_ELEMENT = $("#"+GRASP.config.gridContainer);
GRID_ELEMENT.html(""); // Clear Grid ;)
var coord;
var cell; // Contains the 1 or 0 based upon the cell selection
for(var i=1; i<=GRID_ROWS; i++){
for(var j=1; j<=GRID_COLS; j++){
coord = "" + i + "," + j;
$(document.createElement("div"))
.addClass("cellWrapper")
.attr("alt", coord)
.css("left", parseInt((j-1) * 36, 10) + "px")
.css("top", parseInt((i-1) * 36, 10) + "px")
.width(36).height(36)
.data("row", i).data("col", j)
.appendTo("#"+GRASP.config.gridContainer)
.on("click", cellClick)
.on("mouseenter", {isMatrix: false}, cellMouseEnter)
.on("mouseleave", cellMouseLeave);
$(document.createElement("div"))
.addClass("cell cellUnselected")
.attr("alt", coord)
.css("left", parseInt((j-1) * 36, 10) + "px")
.css("top", parseInt((i-1) * 36, 10) + "px")
.text("0")
.appendTo("#"+GRASP.config.gridContainer);
}
}
GRID_ELEMENT.height(36 * GRID_ROWS);
GRID_ELEMENT.width(36 * GRID_COLS);
}
function createAutocorrelationMatrix() {
MATRIXHEADER_ELEMENT = $("#" + GRASP.config.matrixHeader);
MATRIX_ELEMENT = $("#" + GRASP.config.matrixContainer);
MATRIX_ELEMENT.html("");
MATRIXHEADER_ELEMENT.css("top", parseInt(GRID_ELEMENT.offset().top + (GRID_ROWS * 36)) + "px");
MATRIX_ELEMENT.css("top", parseInt(MATRIXHEADER_ELEMENT.offset().top + MATRIXHEADER_ELEMENT.height()) + "px");
var cellSize = Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS);
var coord;
for (var i=1;i<=MATRIX_ROWS;i++){
for (var j=1;j<=MATRIX_COLS;j++){
coord = "" + i + "," + j;
$(document.createElement("div"))
.addClass("autocorrMatrixCellWrapper")
.attr("alt", coord)
.css("left", parseInt((j-1) * cellSize, 10) + "px")
.css("top", parseInt((i-1) * cellSize, 10) + "px")
.data("row", i).data("col", j)
.appendTo("#"+GRASP.config.matrixContainer)
.on("mouseenter", {isMatrix: true}, cellMouseEnter)
.on("mouseleave", cellMouseLeave);
$(document.createElement("div"))
.addClass("autocorrMatrixCell autocorrMatrixCellUnselected")
.attr("alt", coord)
.css("left", parseInt((j-1) * cellSize, 10) + "px")
.css("top", parseInt((i-1) * cellSize, 10) + "px")
.appendTo("#"+GRASP.config.matrixContainer);
}
}
MATRIX_ELEMENT.height(36 * GRID_ROWS);
MATRIX_ELEMENT.width(36 * GRID_COLS);
}
function cellClick(){
var cell = $(this).next();
if(cell.text() == "0"){
cell.text("1");
} else {
cell.text("0");
}
}
function cellMouseEnter(e){
var i = $(this).data("row");
var j = $(this).data("col");
var x = e.data.isMatrix ? Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS) : 36;
var div = $(document.createElement("div"))
.addClass("cellCoordinates cellCoordText")
.css("left", parseInt((j-1) * x, 10) + "px")
.css("top", parseInt((i-1) * x, 10) + "px")
.text(i + ", " + j);
$(this).before(div);
}
function cellMouseLeave(){
$(this).prev().remove();
}
}(window.GRASP = window.GRASP || {}, jQuery));
$(document).ready(function(){
GRASP.start();
});
CSS:
.gridContainer {
/* width: inherit; */
/* float: left; */
position: relative;
top: 10px;
padding: 0 0 0 0;
display: block;
background: none;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.cell {
width: 36px;
height: 36px;
position: absolute;
z-index: 0;
/*
font-size: 16pt;
*/
font-size: x-large;
font-weight: normal;
font-style: normal;
color: #888888;
text-align: center;
display: table-cell;
vertical-align: middle;
line-height: 2em;
/* padding-top: 0.25em; */
}
.cellSelected {
background: #00CCFF;
}
.cellUnselected {
background: none;
}
.cellCoordinates {
width: 36px;
height: 36px;
position: absolute;
background: none;
z-index: 1;
}
.autocorrMatrixContainer {
position: absolute;
/* float: left; */
/* bottom: 0px; */
display: block;
background: none;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.autocorrMatrixCell {
width: 16px;
height: 16px;
position: absolute;
z-index: 0;
font-size: xx-small;
font-weight: normal;
font-style: normal;
color: #FFFFFF;
text-align: center;
display: table-cell;
vertical-align: middle;
line-height: 2em;
/* padding-top: 0.25em; */
}
.autocorrMatrixCellWrapper {
width: 16px;
height: 16px;
position: absolute;
background: none;
z-index: 2;
border-style: solid outset;
border-width: 1px;
border-color: black;
font-size: x-small;
}
.autocorrMatrixCellCoordText {
font-size: xx-small;
font-weight: normal;
font-style: normal;
padding-top: 2px;
padding-left: 3px;
color: #444444;
text-align: left;
vertical-align: top;
}
.cellWrapper {
width: 36px;
height: 36px;
position: absolute;
background: none;
z-index: 2;
border-style: solid outset;
border-width: 1px;
border-color: black;
font-size: normal;
}
.cellCoordText {
font-size: x-small;
font-weight: normal;
font-style: normal;
padding-top: 2px;
padding-left: 3px;
color: #444444;
text-align: left;
vertical-align: top;
}
data
attributes. \$\endgroup\$ – konijn May 2 '14 at 18:53