Menu
I'm busy writing a servlet that generates HTML code. The goal is to create a heatmap of where people click on a website from stored data of those clicks. I've found javascript to create the heatmap in a canvas, and i now want to overlay that canvas over the webpage that the click information is about.
This is my HTML so far, which results in the successful generation of the heatmap, and the creation of an iframe. The iframe is overlayed over the heatmap. Currently i dont know how to make the iframe the same size as the webpage so that it appears that the website is being viewed with the heatmap overlayed over it:
<html>
<head>
<style>
#heatmapArea{
position:relative;
float:left;
width:410px;
height:410px;
z-index:1000;
border:1px dashed black;
#iframeArea{
position:relative;
float:left;
width:100%;
height:100%
z-index:1;
}
}
</style>
</head>
<body>
<div id="main">
<div id="heatmapArea">
<div id="iframeArea">
<iframe src="www.google.com"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript">
window.onload = function(){
var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":10, "visible":true});
var el = "{max: 100, data: [{x: 20, y: 20, count: 10},{x: 200, y: 200, count: 43},{x: 200, y: 400, count: 7},{x: 380, y: 400, count: 6},{x: 400, y: 400, count: 4},{x: 280, y: 260, count: 100},{x: 80, y: 60, count: 40},{x: 166, y: 260, count: 85},{x: 300, y: 400, count: 34},]}";
var obj = eval('('+el+')');
xx.store.setDataSet(obj);
};
</script>
</body>
im a serious HTML newbie - what can i do to make what i want happen?
thanks a ton!
621
As I understand you want to do it in html and css. Then maybe:
Step 1:
Add this to your CSS: html, body {height: 100%;}
Step 2
Add this to your iframe class: position: absolute; width: 100%; height: 100%;
I created a quick fiddle to show you, how it works: http://jsfiddle.net/hobobne/a3muZ/
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
