Display Div content in fullscreen window

Posts: 48

Display Div content in fullscreen window

Is it possible to display the content of a Div in full screen window with JavaScript?

There is fullscreen API in JavaScript, you can use the requestFullscreen() method to display a HTML element in full screen mode, documentation: Using fullscreen mode.
- Fullscreen requests need to be called from within an event handler generated by the user (like "click").

Code: Select all

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Title</title> <style> #dv1 { width: 100%; height: 100%; margin: 2px auto; background: #f8f9fe; border: 2px solid #33f; padding: 7px; text-align: center; } </style> </head> <body> <div id="dv1">Click on the button, will display the content of this Div in fullscreen:<br/> http://coursesweb.net/</div> <button id="btn1">Full-Screen</button> <script> var elem = document.getElementById('dv1'); function fullScreen(elm){ if(elm.requestFullscreen) elm.requestFullscreen(); else if(elm.msRequestFullscreen) elm.msRequestFullscreen(); else if(elm.mozRequestFullScreen) elm.mozRequestFullScreen(); else if(elm.webkitRequestFullscreen) elm.webkitRequestFullscreen(); } document.getElementById('btn1').addEventListener('click', function(){ fullScreen(elem);}); </script> </body> </html>
Click on the button, will display the content of this Div in fullscreen:

Similar Topics