Tuesday, June 11, 2013
A simple html5 full screen demo
Using function mozRequestFullScreen in Firefox, webkitRequestFullScreen for Chrome and Safari
Reference:
https://wiki.mozilla.org/Gecko:FullScreenAPI
Demo code: using FullScreen API
<html>
<style>
section
{
display: block;
float: right;
width: 40%;
padding: 10px;
margin: 0;
border: 2px solid #ddd;
cursor: pointer;
}
section img
{
width: 100%;
}
section:full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
</style>
<section id="fullscreen">
<img src="http://www.orble.com/images/my-fish.jpg" alt="fish" />
<p>Click image or here to see FULL screen;</p>
</section>
<script>
var e = document.getElementById("fullscreen");
e.onclick = function() {
if (e.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
e.mozRequestFullScreen();
} else if (e.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
e.webkitRequestFullScreen();
}
// Now we're in fullscreen mode!
}
</script>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment