Web Development: How to view web site in fullscreen using HTML5 and jQuery?

July 18, 2016

Please follow below step and refer this link for more help.

1: First include following two JS in header part between <head> tab,

2: HTML code for just link

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

3: jQuery API code

$(".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()

});

For more details click Here!

Demo

Enjoy!

Web Development