Toggle fullscreen and normal mode with JavaScript
Question:
How to toggle fullscreen and normal mode with JavaScript? Answer:
const toggleBtn = document.getElementById('toggle-btn');
toggleBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
Description:
To allow site visitors to easily toggle between fullscreen and normal mode you can use the Fullscreen API. The Fullscreen API adds methods to present a specific Element in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.
Reference:
Fullscreen API reference
Share "How to toggle fullscreen and normal mode with JavaScript?"
Related snippets:
Tags:
fullscreen, Technical term:
Toggle fullscreen and normal mode with JavaScript