Post
Ask Question

Programmatically Change The Element Or Page Into Full Screen Mode

Introduction

 
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 request fullscreen. To make it compatible with all the browsers, we will be using separate API calls for each browser. By using requestFullscreen, you can easily make the items viewable in a full-screen mode. That’s cool, right? You can use Videos, Audios, Images, Pages, or anything. Now shall we go and see this in detail? I hope you will like this.
 
You can always download the source code here: 
 
Background
 
Yesterday I got a requirement to do the full-screen option programmatically in one of my applications.c I was required to open a chart, which is already being loaded to a page, in full-screen mode. I did that with the help of a 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, then Web Site.
 
Figure: Empty Website In Visual Studio
 
Create a new HTML page
 
Now create a new page, start coding.
  1. <!DOCTYPE html>    
  2. <html>    
  3.     
  4. <head>    
  5.     <title>Programmatically Change The Element Or Page Into Full Screen Mode</title>    
  6.     <meta charset="utf-8" /> </head>    
  7.     
  8. <body> </body>    
  9.     
  10. </html>   
Using The Code
 
We will be using pure JavaScript code to do this requirement. First of all create the container element and one other element in which we can fire the full-screen function on click event.
  1. <div id="container" align="center"></div>    
  2. <img src="full_screen.png" onclick="changeToFullScreen()" title="Click to change to full screen"/>  
Here changeToFullScreen() is the function which does the task.
  1. <script>    
  2.     function changeToFullScreen()    
  3.     {    
  4.         var itm = document.getElementById("container");    
  5.         if(itm.requestFullscreen)    
  6.         {    
  7.             itm.requestFullscreen();    
  8.         }    
  9.         else if(itm.msRequestFullscreen)    
  10.         {    
  11.             itm.msRequestFullscreen();    
  12.         }    
  13.         else if(itm.mozRequestFullScreen)    
  14.         {    
  15.             itm.mozRequestFullScreen();    
  16.         }    
  17.         else if(itm.webkitRequestFullscreen)    
  18.         {    
  19.             itm.webkitRequestFullscreen();    
  20.         }    
  21.     }    
  22. </script>    
Now if you run your page in Google Chrome and fire the function, you will be given output as preceding.
 
Figure: Chnage_Element_To_Full_Screen_In_Google_Chrome_Error
 
As you can see 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.
  1. #container:-webkit-full-screen {    
  2.    width: 100%;    
  3.    height: 100%;    
  4. }    
Now run your page again, and make sure the fix is applied.
 
Figure: Chnage_Element_To_Full_Screen_In_Google_Chrome
 
Now if you want to escape from the full screen whenever the user presses any keys, you can do that too. You can add a new function as follows.
  1. function changeToFullScreenOnKeyPress()    
  2. {    
  3.     if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement)    
  4.     {    
  5.         if(document.documentElement.requestFullscreen)    
  6.         {    
  7.             document.documentElement.requestFullscreen();    
  8.         }    
  9.         else if(document.documentElement.msRequestFullscreen)    
  10.         {    
  11.             document.documentElement.msRequestFullscreen();    
  12.         }    
  13.         else if(document.documentElement.mozRequestFullScreen)    
  14.         {    
  15.             document.documentElement.mozRequestFullScreen();    
  16.         }    
  17.         else if(document.documentElement.webkitRequestFullscreen)    
  18.         {    
  19.             document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);    
  20.         }    
  21.     }    
  22.     else    
  23.     {    
  24.         if(document.exitFullscreen)    
  25.         {    
  26.             document.exitFullscreen();    
  27.         }    
  28.         else if(document.msExitFullscreen)    
  29.         {    
  30.             document.msExitFullscreen();    
  31.         }    
  32.         else if(document.mozCancelFullScreen)    
  33.         {    
  34.             document.mozCancelFullScreen();    
  35.         }    
  36.         else if(document.webkitExitFullscreen)    
  37.         {    
  38.             document.webkitExitFullscreen();    
  39.         }    
  40.     }    
  41. }    
And you can call this function in keydown event as preceding.
  1. document.addEventListener("keydown", function (e) {    
  2.    changeToFullScreenOnKeyPress();    
  3. }, false);    
Run your page again and notice that the full screen is being escaped whenever you press any key.
 
Complete Code
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <title>Programmatically Change The Element Or Page Into Full Screen Mode</title>    
  5.         <meta charset="utf-8" />    
  6.         <script>    
  7.         function changeToFullScreen()    
  8.         {    
  9.             var itm = document.getElementById("container");    
  10.             if(itm.requestFullscreen)    
  11.             {    
  12.                 itm.requestFullscreen();    
  13.             }    
  14.             else if(itm.msRequestFullscreen)    
  15.             {    
  16.                 itm.msRequestFullscreen();    
  17.             }    
  18.             else if(itm.mozRequestFullScreen)    
  19.             {    
  20.                 itm.mozRequestFullScreen();    
  21.             }    
  22.             else if(itm.webkitRequestFullscreen)    
  23.             {    
  24.                 itm.webkitRequestFullscreen();    
  25.             }    
  26.         }    
  27.     
  28.         function changeToFullScreenOnKeyPress()    
  29.         {    
  30.             if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement)    
  31.             {    
  32.                 if(document.documentElement.requestFullscreen)    
  33.                 {    
  34.                     document.documentElement.requestFullscreen();    
  35.                 }    
  36.                 else if(document.documentElement.msRequestFullscreen)    
  37.                 {    
  38.                     document.documentElement.msRequestFullscreen();    
  39.                 }    
  40.                 else if(document.documentElement.mozRequestFullScreen)    
  41.                 {    
  42.                     document.documentElement.mozRequestFullScreen();    
  43.                 }    
  44.                 else if(document.documentElement.webkitRequestFullscreen)    
  45.                 {    
  46.                     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);    
  47.                 }    
  48.             }    
  49.             else    
  50.             {    
  51.                 if(document.exitFullscreen)    
  52.                 {    
  53.                     document.exitFullscreen();    
  54.                 }    
  55.                 else if(document.msExitFullscreen)    
  56.                 {    
  57.                     document.msExitFullscreen();    
  58.                 }    
  59.                 else if(document.mozCancelFullScreen)    
  60.                 {    
  61.                     document.mozCancelFullScreen();    
  62.                 }    
  63.                 else if(document.webkitExitFullscreen)    
  64.                 {    
  65.                     document.webkitExitFullscreen();    
  66.                 }    
  67.             }    
  68.         }    
  69.         document.addEventListener("keydown", function(e)    
  70.         {    
  71.             changeToFullScreenOnKeyPress();    
  72.         }, false);    
  73.     </script>    
  74.         <style>    
  75.         #container:-webkit-full-screen {    
  76.             width: 100%;    
  77.             height: 100%;    
  78.         }    
  79.           
  80.         #container {    
  81.             width: 72px;    
  82.             height: 148px;    
  83.             background-image: url('SibeeshPassionLogoSmall.png');    
  84.         }    
  85.     </style>    
  86.     </head>    
  87.     <body>    
  88.         <div id="container" align="center"></div>    
  89.         <img src="full_screen.png" onclick="changeToFullScreen()" title="Click to change to full screen" />    
  90.     </body>    
  91. </html>   
Here, msRequestFullscreen, mozRequestFullScreen, webkitRequestFullscreen is for Internet Explorer, Mozilla Firefox, and Google Chrome respectively. 
 
We have done everything needed, now it is time to see the output.
 
Output
 
Figure: Change_Element_To_Full_Screen_Click
 
Figure: Change_Element_To_Full_Screen_Output
 
References

Conclusion

 
Did I miss anything that you may think is needed? Have you ever wanted to do this requirement? did you find this post useful? I hope you liked this article. Please share with 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.
 
Please read this article in my blog here.
 
Read more articles on JavaScript


Similar Articles