<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
* {margin:0px;
padding:0px;
border:0px;
outline:none;
box-sizing:border-box;
font:normal 18px/1.2 sans-serif;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
#all {top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
position:absolute;
}
#all a {width:25%;
height:25%;
margin:0px;
padding:8px;
float:left;
color:#DFDFDF;
display:inline-block;
text-decoration:none;
font:normal 12px/1.2 sans-serif;
}
.nav a {width:33%;
margin:auto;
padding:8px;
color:#000000;
text-align:center;
text-decoration:none;
display:inline-block;
border:0px solid #D4D4D4;
}
</style>
<script>
var obj="", i, c, s, h;
onload=function() {for (i=0;i<16;i++) {obj +="<a class=\"quad\" href=\"javascript:\" onclick=\"cols(this)\"></a>";
}
document.getElementById("all").innerHTML=obj;}
function cols(bg) {bg.style.backgroundColor="rgb("+Math.round(Math.random()*256/1)+","+Math.round(Math.random()*256/1)+","+Math.round(Math.random()*256/1)+")";bg.innerHTML=bg.style.backgroundColor;
}
function quad(c) {var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var grid=document.getElementById("all").querySelectorAll("A");
for (i=0;i<grid.length;i++) {if (w <= 640) grid[i].style.width = "100%";
if (c == "l") grid[i].style.width = "100%";
if (c == "g") grid[i].style.width = "25%";
if (c == "a") grid[i].style.width = "50%";
}
}
function show() {s=setTimeout(function(){document.getElementById("all").style.top="40px"}, 100);clearTimeout(h);
h=setTimeout(function(){document.getElementById("all").style.top="0px"}, 4000);}
document.onmousemove=show;
document.onmousedown=show;
document.onkeypress=show;
document.onkeydown=show;
window.onresize=quad;
</script>
</head>
<body>
<p align="center" class="nav">
<a href="javascript:quad('g')">G r i d</a><a href="javascript:quad('l')">L i s t</a><a href="javascript:quad('a')">A u t o</a></p>
<div id="all">
</div>
</body>
</html>
