How to view webpage in fullscreen using jQuery and HTML5 API

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

Advantage of view webpage in FullScreen using jQuery 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.

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.