Adding a Full Screen button in a HTML page using Java Script
Full Screen capability can be used in a HTML page to display content of a <div> or <form> alone on the screen. But you must know that such button should be accompanied with a "Close Full screen" to revert back to normal screen, otherwise the user might get confused and don't know how to go back. The code that we are showing here works on most of the browsers, such as chrome, firefox, safari and chrome.
Here bestrix.blogspot.com is displaying the code for full screen button.
Code:
<h2>Heading outside Full Screen</h2>
<form id='fullscreenarea' style="color:red">
<div id="full" style='float: right;'><input id=fullbutton type=button value="FullScreen" onclick=openFullscreen() /></div>
<h2>Heading inside Full Screen</h2>
<p>Content inside fullscreen block</p>
</form>
<p>Content outside fullscreen block</p>
<script type="text/javascript">
// Author : Prixit Parashar
var elem = document.getElementById("fullscreenarea");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById('full').innerHTML="<input id=fullbutton type=button value='Close FullScreen' onclick=closeFullscreen() />";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
document.getElementById('full').innerHTML="<input id=fullbutton type=button value='FullScreen' onclick=openFullscreen() />";
}
</script>
Working example of above code :
No comments:
Post a Comment