In this article we are going to see how we can change any element or any page into full screen mode programmatically. To do this requirement we are going to use client side API requestFullscreen . To make it compatible to all the browsers, we will be using separate API calls for each browsers. By using requestFullscreen , you can easily make the items to be viewable in a full screen mode. That’s cool right? You can use Video’s, Audio’s, Images, Pages or anything. Now shall we go and see this in detail? I hope you will like this.
Download the source code
You can always download the source code here:
Background
Yesterday I have got a requirement to do the full screen option programmatically in one of my application, I was required to open a chart, which is already being loaded to a page, in full screen mode. I have done that with the help of full screen API. Here I am going to show you that. Now we will start our coding. I hope you will enjoy reading.
Create an Empty Website in Visual Studio
Click File-> New-> Web Site.
Empty Website In Visual Studio
Create a new HTML page
Now create a new page, start coding.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Programmatically Change The Element Or Page Into Full Screen Mode</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
[/html]
Using The Code
We will be using pure JavaScript code to do this requirement. Firs of all create the container element and one other element in which we can fire the full screen function in on click event.
[html]
<div id="container" align="center"></div>
<img src="full_screen.png" onclick="changeToFullScreen()" title="Click to change to full screen"/>
[/html]
Here changeToFullScreen() is the function which does the task.
[js]
<script>
function changeToFullScreen() {
var itm = document.getElementById("container");
if (itm.requestFullscreen) {
itm.requestFullscreen();
} else if (itm.msRequestFullscreen) {
itm.msRequestFullscreen();
} else if (itm.mozRequestFullScreen) {
itm.mozRequestFullScreen();
} else if (itm.webkitRequestFullscreen) {
itm.webkitRequestFullscreen();
}
}
</script>
[/js]
Now if you run your page in Google Chrome and fire the function, you will be given an output as preceding.
Chnage_Element_To_Full_Screen_In_Google_Chrome_Error
As you can see that the window is opened in full screen, but not the element. To fix this, you must add a custom CSS style as follows. This is a hot fix which is applicable only to Google Chrome.
[css]
#container:-webkit-full-screen {
width: 100%;
height: 100%;
}
[/css]
Now run your page again, and make sure the fix is applied.
Chnage_Element_To_Full_Screen_In_Google_Chrome
Now if you want to escape from full screen whenever user press any keys, you can do that too. You can add a new function as follows.
[js]
function changeToFullScreenOnKeyPress() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
[/js]
And you can call this function in keydown event as preceding.
[js]
document.addEventListener("keydown", function (e) {
changeToFullScreenOnKeyPress();
}, false);
[/js]
Run your page again and notice that the full screen is getting escaped whenever you press any keys.
Complete Code
[html]
<!DOCTYPE html>
<html>
<head>
<title>Programmatically Change The Element Or Page Into Full Screen Mode</title>
<meta charset="utf-8" />
<script>
function changeToFullScreen() {
var itm = document.getElementById("container");
if (itm.requestFullscreen) {
itm.requestFullscreen();
} else if (itm.msRequestFullscreen) {
itm.msRequestFullscreen();
} else if (itm.mozRequestFullScreen) {
itm.mozRequestFullScreen();
} else if (itm.webkitRequestFullscreen) {
itm.webkitRequestFullscreen();
}
}
function changeToFullScreenOnKeyPress() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.addEventListener("keydown", function (e) {
changeToFullScreenOnKeyPress();
}, false);
</script>
<style>
#container:-webkit-full-screen {
width: 100%;
height: 100%;
}
#container
{
width:72px;
height:148px;
background-image:url(‘sibeeshpassionLogoSmall.png’);
}
</style>
</head>
<body>
<div id="container" align="center"></div>
<img src="full_screen.png" onclick="changeToFullScreen()" title="Click to change to full screen"/>
</body>
</html>
[/html]
Here msRequestFullscreen, mozRequestFullScreen, webkitRequestFullscreen is for Internet Explorer, Mozilla Firefox, Google Chrome respectively.
We have done everything needed, Now it is time to see the output.
Output
Chnage_Element_To_Full_Screen_Click
Chnage_Element_To_Full_Screen_Output
Have a happy coding.
References
Conclusion
Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.
Your turn. What do you think?
A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.
Kindest Regards
Sibeesh Venu