Hi,
I have a page with 4 divs - a header, left, right and footer. Left and right are held in another wrapper div. I am trying to draw a grid in my right div but am not quite sure how to this. My code so far is as follows:
Any help gratefully received!
Thanks
Ed
I have a page with 4 divs - a header, left, right and footer. Left and right are held in another wrapper div. I am trying to draw a grid in my right div but am not quite sure how to this. My code so far is as follows:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<style>
*{margin:0px;padding:0px;}
body {
background: lightblue;
top:0xp;left:0px;
}
canvas {
background: #fff;
margin: 20px;
}
div{position:absolute}
div#header{top:0px;left:0px;right:0px;height:54px;}
div#wrapper{top:54px;left:0px;right:0px;bottom:30px;border-top:1px dotted #A9D0F5;}
div#right{top:0px;bottom:0px;left:17%;width:83%;overflow-y:auto;}
div#left{top:0px;bottom:0px;left:0px;width:17%;overflow:hidden;height:1500px;background-color:#E6E6E6;}
div#footer{bottom:-1px;left:0px;width:100%;overflow:hidden;height:30px;border-top:1px #A9D0F5 dotted;background-color:#E6E6E6;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="wrapper">
<div id="left">
</div>
<div id="right">
<script>
//grid width and height
var bw = 6000;
var bh = 3000;
//padding around grid
var p = 10;
//size of canvas
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
var context = canvas.get(0).getContext("2d");
function drawBoard(){
for (var x = 0; x <= bw; x += 40) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
for (var x = 0; x <= bh; x += 40) {
context.moveTo(p, 0.5 + x + p);
context.lineTo(bw + p, 0.5 + x + p);
}
context.strokeStyle = "#E6E6E6";
context.stroke();
}
drawBoard();
</script>
</div>
</div>
<div id="footer">
</div>
</body>
</html>Any help gratefully received!
Thanks
Ed
