split div into any number of grid blocks
HTML
<script src="https://raw.github.com/bighostkim/gridLayout/master/jquery.gridLayout.js"></script>
Total <input id="num_box" size="1" type="number" value="10" /> boxes
<div id="container">
</div>
CSS
html,body {
margin:0px; height: 100%
}
#container {
width: 100%;
height: 95%;
background-color: #fff;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
#container div {
float: left;
background-color: #ccc;
border: 1px dotted grey;
width: 100%;
}
JavaScript
$( function() {
$("#num_box").change( function() {
$("#container").gridLayout($(this).val());
//$("#container div").addClass("rotateY90");
});
$("#num_box").trigger("change");
});