ignore full screen canvas
Question
I have a canvas fullscreen over a webpage. The size gets handled in processingjs.
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
Behind the canvas is a lot of text. The problem is i can't scroll on a iPad anymore cause the canvas is on top. Is there a way to ignore the canvas but still show it on top? This is the current css:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
1 answers
solution1
0 2013-03-10 15:46:43
Here is how to let elements fall through to underlying elements:
If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. So, in CSS:
#topCanvas{ pointer-events: none; }
But in IE and Opera, you have to be tricky:
- Hide top canvas,
- Trigger event on bottom element,
- Show top canvas.
This code shows how to trigger events on underlying elements:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>
<script>
$(function(){
$('#top').click(function (e) {
$('#top').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#top').show();
});
$("#bottom").click(function(){ alert("bottom was clicked."); });
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.