Fullscreen with JavaScript

Klik op 'Open Fullscreen' om naar volledig scherm te gaan. Met 'Close Fullscreen' of ESC kun je sluiten!

Open FullscreenClose Fullscreen

Script 1

Select & Copy Hosted by Tooljunkie  
<script src="//tooljunkie.eu/js/fullscreen.js"></script> <button onclick="openFullscreen();">Open Fullscreen</button> <button onclick="closeFullscreen();">Close</button>

Open FullscreenClose

Script 2

Select & Copy Volledige script 
<!-- Buttons --> <button onclick="openFullscreen();">Open Fullscreen</button> <button onclick="closeFullscreen();">Close</button> <!-- Style --> <style type="text/css">/* Style the button */ button { text-align: center; box-shadow: 0 8px 12px -6px #525252; background-color: #eee; border-radius: 5px; border: 1px solid #777; display: inline-block; color: #333; margin: 0 5px; padding: 1px 5px 2px 5px; font-size: 11px; } button:hover { background-color: #fff; } </style> <!-- Script --> <script> var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } } </script>
 

Script 3

Select & Copy Andere stijl  
<!-- HTML buttons --> <button class="knop1" onclick="openFullscreen();">Fullscreen</a> <button class="knop1" onclick="closeFullscreen();">Close</a> <!-- Style --> <style> .knop1, .knop1:link, .knop1:visited { margin: 5px 3px 5px 3px; display: inline-block; width: 80px; text-align: center; vertical-align: middle; padding: 1px 10px 2px 10px; border: 1px solid #4d4d4d; border-radius: 8px; box-shadow: #bfbaba 0px 0px 5px 1px; // text-shadow: #888 0px 0px 4px; font: normal normal bold 10px verdana; margin: 8px 5px; border: 1px solid #aaa; color: #444; text-decoration: none; } .knop1:hover { background: #cdcdcd; color: #fff; background: #444; text-shadow: #eee 0px 0px 4px; } .knop1:active, .knop1:focus { background: #555; color: #ddd; } </style> <!-- Script --> <script> var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } } </script>

FullscreenClose