How To Toggle Fullscreen in Javascript – Simple Examples

Welcome to a quick tutorial on how to toggle fullscreen mode in Javascript. Yes, the old grandmother’s age of the Internet is over now. Modern web browsers can be switched to full-screen mode in Javascript easily.

  • To engage fullscreen mode for the entire page  – document.documentElement.requestFullscreen()
  • To engage fullscreen mode for a specific element – document.getElementById("ID").requestFullscreen()
  • Lastly, use document.exitFullscreen() to exit fullscreen.

Yep, that’s all the basics. But read on if you need some actual examples!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK TUTORIAL

 

TABLE OF CONTENTS

Download & Notes JS Fullscreen Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

JAVASCRIPT FULLSCREEN

All right, let us now get on with the examples of toggling fullscreen mode in Javascript.

 

1) BASIC FULLSCREEN

THE DEMO

Some text here.

HTML & CSS

1-basic.html
<!-- (A) SECTION FOR TESTING FULL SCREEN -->
<div id="demoA">
  <img src="chick.jpg"/>
  <p>Some text here.</p>
</div>
 
<!-- (B) TOGGLE BUTTONS -->
<!-- (B1) TOGGLE ENTIRE PAGE -->
<input type="button" value="Entire Page"
       onclick="document.documentElement.requestFullscreen()"/>
 
<!-- (B2) TOGGLE <DIV> : IMAGE + CAPTION -->
<input type="button" value="Section"
       onclick="document.getElementById('demoA').requestFullscreen()"/>
 
<!-- (B3) EXIT FULLSCREEN -->
<input type="button" value="Exit"
       onclick="document.exitFullscreen();"/>

THE EXPLANATION

Yep, it is as advertised in the introduction. Use ELEMENT.requestFullscreen() to engage the fullscreen mode, and document.exitFullscreen() to exit full screen. That simple.

 

 

2) FULLSCREEN EVENTS

THE DEMO

HTML & CSS

2-events.html
 <!-- (A) SECTION FOR TESTING FULL SCREEN -->
<div id="demoB">
  <!-- (A1) THE RANDOM IMAGE -->
  <img src="chick.jpg"/>
 
  <!-- (A2) TOGGLE BUTTONS -->
  <div>
    <input type="button" id="demoFS" value="Fullscreen Section" />
    <input type="button" id="demoExit" value="Exit Fullscreen" disabled />
  </div>
</div>
 
 <!-- (B) JAVASCRIPT -->
<script>
window.addEventListener("DOMContentLoaded", function(){
  // (B1) ENGAGE FULLSCREEN
  document.getElementById('demoFS').addEventListener("click", function(){
    document.getElementById('demoB').requestFullscreen();
  });
 
  // (B2) DISENGAGE FULLSCREEN
  document.getElementById('demoExit').addEventListener("click", function(){
    document.exitFullscreen();
  });
 
  // (B3) LISTEN TO FULLSCREEN TOGGLE
  document.addEventListener("fullscreenchange", function(){
    // FULLSCREEN DISENGAGED
    if (document.fullscreenElement===null) {
      document.getElementById('demoFS').disabled = false;
      document.getElementById('demoExit').disabled = true;
    }
    // FULLSCREEN ENGAGED
    else {
      document.getElementById('demoFS').disabled = true;
      document.getElementById('demoExit').disabled = false;
    }
  });

  // (B4) ON FULLSCREEN ERROR
  document.addEventListener("fullscreenerror", function(){
    console.log("Fullscreen Change ERROR!");
    console.log(document.fullscreenElement);
  });
});
</script>

THE EXPLANATION

Right, this can be a little intimidating at first, but keep calm and look carefully.

  • A – We have one button to engage fullscreen <input type="button" id="demoFS"/>, another to exit fullscreen – <input type="button" id="demoExit"/>. The exit fullscreen button is disabled by default.
  • B1 & B2 – We will only attach the button onclick to engage/exit fullscreen when the window is fully loaded.
  • B3 – The important part here is the fullscreenchange event. This is triggered when the window goes in or out of fullscreen mode, we can use this to toggle the disabled status of the buttons.
  • B4 – fullscreenerror is fired when the window has trouble going in or out of fullscreen mode. Optional.

 

 

3) FULLSCREEN CSS

3-fs.css
#demoB:fullscreen {
  background: lightblue;
  padding: 10px;
  text-align: center;
}

Lastly, here is an extra bit – We can use the :fullscreen pseudo-class to attach styles only when a certain element is in fullscreen mode.

 

USEFUL BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY

Function/Property/Event Description Reference Link
ELEMENT.requestFullscreen() Engage in fullscreen mode. Click Here
document.exitFullscreen() Exit fullscreen mode. Click Here
document.onfullscreenchange Fired when the window is toggled between fullscreen mode. Click Here
document.onfullscreenerror Fired when the window is unable to toggle fullscreen mode. Click Here
document.fullscreenElement Read-only. The current fullscreen element. Click Here
:fullscreen CSS fullscreen pseudo-class. Click Here

 

 

EXTRA) MANUAL TOGGLE FULLSCREEN

For the beginners who somehow did not know, the shortcut key in most major browsers to go into fullscreen mode is F11. Just hit F11 or ESC again to exit fullscreen mode.

 

INFOGRAPHIC CHEAT SHEET

Toggle Fullscreen In Javascript (Click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *