The Fullscreen API allows you to present individual elements of your site in full-screen mode & exit when required.
This is useful if certain areas of the site would benefit from being in full screen so that full attention can be given to that part when needed, such as videos, games, charts, etc.
The very simple example below has 2 elements that have been "enabled" for full screen mode (fullScreenElement1, fullScreenElement2) a user clicking on one of these will initiate a requestFullscreen on it.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Static Template</title>
</head>
<body>
<div class="main">
<div class="wrapper">
<div
id="fullScreenElement1"
class="button"
onclick="document.getElementById('fullScreenElement1').requestFullscreen()"
>
<p>🍔</p>
Click to go fullscreen
</div>
<div
id="fullScreenElement2"
class="button"
onclick="toggleFullScreen('fullScreenElement2')"
>
<p>🌶️</p>
Click to go fullscreen
</div>
</div>
<!-- <script src="main.js"></script> -->
<script>
function toggleFullScreen(id) {
document.getElementById(id).requestFullscreen()
}
</script>
</body>
</html>
If you enjoyed this little snippet you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (0)