Today I’m going to share how to view your webpage in fullscreen mode using jQuery and HTML5 API

Advantage of Full Screen Design is that it is equally functional both on desktop and mobile devices and across different browsers. This helps streamline programming while providing viewers with a polished, professional brand image that is consistent from big to small screen devices.

Other Benefits of Full Screen Design

  • Research shows that it helps boost conversion rates
  • Its clean formatting doesn’t distract with unnecessary page elements
  • Its imagery fuses intuitively with written content; and
  • Stunning full screen design imagery increases the likelihood that viewers will continue to explore the site instead of hitting the back button.

Fullscreen mode using HTMl5 API and jQuery

Step 1 : Include jQuery.js and Font Awesome Scripts in the Header

Include the below scripts in your header tag

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//use.fontawesome.com/aa03aaad2f.js"></script>

HTML code

<a href="javascript:;" class="fullscreen-toggle"><i class="fa fa-arrows-alt"></i> View Fullscreen</a>

jQuery and HTML4 API code to activate Fullscreen

$(".fullscreen-toggle").on("click", function() {
    document.fullScreenElement && null !== document.fullScreenElement || !document.mozFullScreen && !document.webkitIsFullScreen ? document.documentElement.requestFullScreen ? document.documentElement.requestFullScreen() : document.documentElement.mozRequestFullScreen ? document.documentElement.mozRequestFullScreen() : document.documentElement.webkitRequestFullScreen && document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) : document.cancelFullScreen ? document.cancelFullScreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
});

The Document.fullscreenElement read-only property returns the Element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use

  • document.fullScreenElement: the element which has been pushed to fullscreen.
  • document.fullScreenEnabled: notes if fullscreen is current enabled.

View Live Demo

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2016/07/fs.jpghttp://w3lessons.info/wp-content/uploads/2016/07/fs-150x150.jpgKarthikeyan Khtml5jqueryAPI,HTML5,Jquery
Today I'm going to share how to view your webpage in fullscreen mode using jQuery and HTML5 APIAdvantage of Full Screen Design is that it is equally functional both on desktop and mobile devices and across different browsers. This helps streamline programming while providing viewers with a polished, professional...