Thursday, May 12, 2016

JavaScript - Fullscreen API JavaScript Code

<p>
  <label>Click the button below to toggle fullscreen</label><br>
  <button id="btnFullscreen" type="button">Toggle Fullscreen</button>
</p>
<p>
<img id="exampleImage" src="https://aftabhusain.files.wordpress.com/2016/06/my-wp-profile-page.png">
</p>

<script>
function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

document.getElementById('btnFullscreen').addEventListener('click', function() {
  toggleFullscreen();
});

document.getElementById('exampleImage').addEventListener('click', function() {
  toggleFullscreen(this);
});

/*
if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler()
{
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
        !document.webkitFullscreenElement && !document.msFullscreenElement) {
      jQuery('.click-to-full-scr').html('Full Screen');
      jQuery('#toPopup_photodet').removeClass('done-fullscreen');
  }
}*/
</script>

3 comments :

  1. Replies
    1. Thank you . It is my pleasure that my post has helped you.

      Delete
  2. Great Post.Thanks for sharing informative post.The competition and nature of the corporate world makes it crucial for web design & development to enhance its presence on a global basis.

    Magento Website Development Companies in Bangalore | Magento Development Service in Bangalore

    ReplyDelete