Skip to content

Instantly share code, notes, and snippets.

@idank

idank/gist:5332092

Created April 7, 2013 19:26
Show Gist options
  • Save idank/5332092 to your computer and use it in GitHub Desktop.
Save idank/5332092 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<body>
<div style="margin-right: auto; margin-left: auto; width: 940px;">
<div><h1>Title</h1></div>
<div style="height: 50px;"></div>
<svg id="canvas" style="width: 100%; position: absolute; left: 0px; z-index: -1;">
</svg>
<div id="div1">Hi</div>
<div id="div2"></div>
<div>Hi</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function draw() {
$("#canvas").empty();
var left = $("#div1")[0].getBoundingClientRect().left;
$("#div2").text('left = ' + left);
var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
r.setAttribute('x', left-5);
r.setAttribute('y', 0);
r.setAttribute('width', '100');
r.setAttribute('height', '100');
r.setAttribute('fill', 'none');
r.setAttribute('stroke-width', '1');
r.setAttribute('stroke', 'black');
$("#canvas").append(r);
$("#canvas").height(100);
}
draw();
$(window).resize(function() {
draw();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment