Getting fullscreen mode to my browser using jquery

Question

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.

you can see it here http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen — Ohad Milchgrub, Nov 09 '12 at 06:35

score 48 · Answer 1 · edited Feb 18 '15 at 16:54

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.

Is there any reason to not use short statement like `req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;` to get supported function, but use `else if` instead? — Max Yari, Mar 26 '15 at 18:40
@MaxYari At least Chrome will throw an "Illegal invocation" exception when storing `document.documentElement.webkitRequestFullscreen` in a variable `x` and then using `x()` or `x.call()`. — instanceofnull, Apr 01 '15 at 10:47

score 7 · Answer 2 · answered Nov 09 '12 at 06:40

7

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

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

answered Nov 09 '12 at 06:40

Vivek S

5,384
8
51
72

@deepthi: which version of mozilla browser you are using? For `Mozilla 16.0.2` version is working fine... – Manikandan Sethuraju Nov 09 '12 at 06:48
I am using mozilla 16.0.2 only – deepthi Nov 09 '12 at 06:57

score 2 · Answer 3 · answered Nov 09 '12 at 06:33

2

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

answered Nov 09 '12 at 06:33

Buzz

6,030
4
33
47

I tried these.. but it is working for mozilla, but the screen is looking different compare to the actual screen – deepthi Nov 09 '12 at 06:37
what is the difference you are finding, attach screen shot – Buzz Nov 09 '12 at 07:04

score 2 · Answer 4 · answered Sep 15 '15 at 14:45

2

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.

answered Sep 15 '15 at 14:45

Scott

1,223
2
16
35

score 2 · Answer 5 · answered Dec 01 '16 at 11:18

2

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);

answered Dec 01 '16 at 11:18

frazras

5,928
4
30
40

Works for modern browsers and without a plugin which deserves an up-vote. – Julian Knight Aug 06 '19 at 19:36

score 1 · Answer 6 · answered Jan 30 '18 at 12:06

1

Please try below code

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

rfs.call(el);

answered Jan 30 '18 at 12:06

Shivprasad P

67
5

1

Is there anything new in your answer or did you just copy stuff from the other answers? – Nico Haase Jan 30 '18 at 12:24
the significant part is `document.documentElement` for requesting and only `document` for exiting – alex025 Jul 30 '20 at 21:57

score 0 · Answer 7 · answered Oct 25 '18 at 17:24

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.

score 0 · Answer 8 · answered Dec 14 '18 at 07:17

0

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();

answered Dec 14 '18 at 07:17

Shivprasad P

67
5

Vikas Kisanrao Ravidas · Answer 9 · 2022-05-13T13:28:02.527

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>

score -2 · Answer 10 · answered Jul 30 '15 at 07:01

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.

Getting fullscreen mode to my browser using jquery

10 Answers10

Linked