'Getting fullscreen mode to my browser using jquery

How can I enter full screen mode using just Javascript/JQuery code? The goal is to enter fullscreen mode like when you press F11 in the browser, but then programmatically.

jquery


Solution 1:[1]

You can activate full screen mode using vanilla JavaScript without jQuery.

<!DOCTYPE html>

<html>

<head>
    <title>Full Screen Test</title>
</head>

<body id="body">
    <h1>test</h1>

    <script>
    var elem = document.getElementById("body");

    elem.onclick = function() {
        req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
        req.call(elem);
    }
    </script>
</body>

</html>

One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action[1] (e.g. on page load).

Here is a cross browser function to toggle full screen mode (as obtained from the MDN):

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.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();
    }
  }
}

For more information, check out the MDN page on full screen APIs.

Solution 2:[2]

Here's a working demo for making the browser full screen

http://johndyer.name/lab/fullscreenapi/

Solution 3:[3]

You can use freely available jquery plugins for this purpose, check these- jquery full screen, Jquery full screen,jquery full screen

Solution 4:[4]

If you need a plugin that supports versions of IE prior to IE11 (IE8-10), take a look at jQuery.fullscreen. IE did not support this feature natively until IE11.

Solution 5:[5]

If you need JQuery to get ease of element selection, then you can do this:

var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
    rFS.call(viewer);

Solution 6:[6]

Please try below code

var el = document.documentElement,
  rfs = el.requestFullscreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
    || el.msRequestFullscreen 
;

rfs.call(el);

Solution 7:[7]

This is an old question but maybe somebody could need this. I was looking for a solution for getting fullsreen mode for browser by jQuery and i've found this solution. I highly recommend Sindre Sorhus's screenfull.js plugin. Here you can get the file.

https://github.com/sindresorhus/screenfull.js

There are also how tos and demos available in the page.

Solution 8:[8]

Try with window.resizeTo(x,y) method.

var  w = window.open('','', 'width=100,height=100');

w.resizeTo(w.screen.availHeight, w.screen.availWidth);

 w.focus();

Solution 9:[9]

  1. Download the full screen JQuery which is given into the GitHub. File downloading link [GitHub]:https://github.com/private-face/jquery.fullscreen

2.add the release folder into the footer section and also add Jquery.min.js file into the page. 3.Give an id #open is an id of button where we apply the click event on it.

<!-- On click button, where we change full screen -->
    <a data-toggle="tooltip" data-placement="top" id="open" data-myval="1" title="FullScreen"> </a>
<!-- Js File add into the footer-->
 <script src="<?= base_url('assets/vendors/jquery/dist/jquery.min.js') ?>"></script>
 <script src="<?= base_url('assets/release/jquery.fullscreen.min.js') ?>"></script>

 <script type="text/javascript"> 
     $(function() {   $('#open').click(function() 
      {
          var value = $('#open').attr('data-myval');
          if(value == 1 )
          {
          var values = $('#open').attr('data-myval',2);
          console.log(values);
             $('body').fullscreen();
             return false;
          }
          else
          {
             var values = $('#open').attr('data-myval',1);
             $.fullscreen.exit();
             return false;
          }       
          });
    });
 </script>

Solution 10:[10]

In case have a button or anything else, We can use this script :

<script language="JavaScript">
function fullScreen() {
    var el = document.documentElement
        , rfs = // for newer Webkit and Firefox
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
            || el.msRequestFullScreen
    ;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        // for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }

}
// End -->

With a button. Everything is easy by <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
But How can I load that script on pageload. That's mean that webform will be fullscreen on pageload without any click on anything.

Related Questions