Skip to content

Instantly share code, notes, and snippets.

@evitolins

evitolins/app.js

Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evitolins/64ccb8fb3e110a46182e to your computer and use it in GitHub Desktop.
Save evitolins/64ccb8fb3e110a46182e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var addGrid = function(size, cssClass) {
var table = document.createElement('table'),
tr,td;
for(var i=0; i < size; i++) {
tr = document.createElement('tr');
for(var ii=0; ii < size; ii++) {
td = document.createElement('td');
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
table.classList.add(cssClass);
return table;
};
// Create Some Grids
var test = addGrid(50, 'light');
var test2 = addGrid(10, 'dark');
var test3 = addGrid(2, 'red');
var test4 = addGrid(1, 'light');
var sliderChange = function(e){
test.style.width = this.value + "px";
test.style.height = this.value + "px";
test2.style.width = this.value + "px";
test2.style.height= this.value + "px";
test3.style.width = this.value + "px";
test3.style.height = this.value + "px";
test4.style.width = this.value + "px";
test4.style.height = this.value + "px";
data.innerHTML = this.value;
};
// Add a test UI
var slider = document.getElementById('slider');
var data = document.getElementById('data');
slider.addEventListener('change', sliderChange);
slider.addEventListener('input', sliderChange);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Canvas Gridpaper" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div></div>
<input id='slider' type='range' step=50 min=0 max=1000 value=500>
<span id="data"></span>
</body>
</html>
Raw
style.css
table{
border-collapse:collapse;
position:absolute;
top:0px;
left:0px;
z-index: -1;
}
table td {
border: 1px solid #ccc;
overflow:none;
}
div{
position:absolute;
top:100px;
left:60px;
width:100px;
height:100px;
background: red;
border: none;
}
table.light td {
border: 1px solid #efefff;
}
table.dark td {
border: 1px solid #dde;
}
table.red td {
border: 1px solid #fbb;
}
input {
width: 800px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment