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>

No comments:

Post a Comment