Sibeesh Passion

Top Menu

  • Home
  • Communities
  • Search
  • About

Main Menu

  • Articles
    • Client Side Technologies
      • JavaScript
      • Angular
      • Node JS
      • JQuery
      • Knockout JS
      • Jasmine Framework
      • Json
      • CSS3
      • HTML5
    • Database
      • SQL
      • MongoDB
      • MySQL
    • Tools
      • IIS
      • Wamp Server
      • WordPress
      • Visual Studio
    • How to
    • Career Advice
    • Interview
    • ASP.NET
    • MVC
    • Azure
    • Web API
    • C#
    • PHP
    • SEO
    • Office Development
  • Product Reviews
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect With Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
  • Achievements
    • Awards And Recognitions
    • Community Achievements
  • Authors
    • Andrew Jackson
    • Ashish Ratan Singh
    • Sibeesh Venu
  • Home
  • Communities
  • Search
  • About

logo

Sibeesh Passion

  • Articles
    • Client Side Technologies
      • JavaScript
      • Angular
      • Node JS
      • JQuery
      • Knockout JS
      • Jasmine Framework
      • Json
      • CSS3
      • HTML5
    • Database
      • SQL
      • MongoDB
      • MySQL
    • Tools
      • IIS
      • Wamp Server
      • WordPress
      • Visual Studio
    • How to
    • Career Advice
    • Interview
    • ASP.NET
    • MVC
    • Azure
    • Web API
    • C#
    • PHP
    • SEO
    • Office Development
  • Product Reviews
    • Office 365 Export PST Tool - Great Results with 100% Accuracy

      March 17, 2018
      0
    • Migrate Files From OneDrive to OneDrive for Business by SysTools

      March 17, 2018
      0
    • Data Recovery

      Recover your lost data in any Windows machine easily

      October 12, 2017
      0
    • Ignite_UI_Chart_Control

      Working With IgniteUI Chart igDataChart Control

      July 14, 2016
      0
    • Apply License Key

      Working With IgniteUI Grid Control

      July 10, 2016
      0
    • Grid with check box selection

      Implement radio button selection in JQWidgets JQXGrid using checkbox

      June 29, 2016
      0
    • High Chart

      Client Side Exporting In HighChart

      May 27, 2016
      0
    • Chart Widgets With Server Side Data In MVC Using Angular JS And Web API Output

      Chart Widgets With Server Side Data In MVC Using Angular JS And ...

      March 17, 2016
      0
    • jQuery Datatable With Server Side Data

      jQuery Datatable With Server Side Data

      February 25, 2016
      0
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect With Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
    • Video: 21 Easy Tips for Healthy Life

      February 22, 2018
      0
    • Azure Face API

      Webinar: Azure Cognitive Service Face API

      July 23, 2017
      0
    • Custom Stylish Handlebar Mirror in Royal Enfield Thunderbird

      June 25, 2017
      0
    • Wrapping Rope in Royal Enfield Crash Guard Or Bumper

      April 22, 2017
      0
    • How to Change Handlebar in Royal Enfield Thunderbird

      April 22, 2017
      0
    • Video: How to be a successful software engineer

      April 22, 2017
      0
    • Webinar: Why Visual Studio 2017? Few Features of VS2017 You May Love

      April 10, 2017
      0
    • Do You Know A Wow Game Is Already Installed In Your Android ...

      April 6, 2017
      0
    • The Cool New Refactoring and Text Editor Options in VS2017

      April 2, 2017
      2
  • Achievements
    • Awards And Recognitions
    • Community Achievements
  • Authors
    • Andrew Jackson
    • Ashish Ratan Singh
    • Sibeesh Venu
  • Implementing Guard in Angular 5 App

  • Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io

  • Using MongoDB on Node JS Application Using Mongoose

  • Implement Validations in Angular 5 App

  • Generating Your First Components And Modules in Angular 5 App

ArticleCodeProjectHow toHTML5JavaScript
Home›Article›Programmatically Change The Element Or Page Into Full Screen Mode

Programmatically Change The Element Or Page Into Full Screen Mode

By SibeeshVenu
March 7, 2016
976
0
Share:
Chnage_Element_To_Full_Screen_In_Google_Chrome_Error

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:

  • Programmatically Change The Element Or Page Into Full Screen Mode
  • 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

    Empty Website In Visual Studio

    Create a new HTML page

    Now create a new page, start coding.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Programmatically Change The Element Or Page Into Full Screen Mode</title>
        <meta charset="utf-8" />
    </head>
    <body>
    </body>
    </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.

      <div id="container" align="center"></div>
        <img src="full_screen.png" onclick="changeToFullScreen()" title="Click to change to full screen"/>
    

    Here changeToFullScreen() is the function which does the task.

     <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>
    

    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

    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.

    #container:-webkit-full-screen {
                width: 100%;
                height: 100%;
            }
    

    Now run your page again, and make sure the fix is applied.

    Chnage_Element_To_Full_Screen_In_Google_Chrome

    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.

    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();
                    }
                }
            }
    

    And you can call this function in keydown event as preceding.

    document.addEventListener("keydown", function (e) {
                changeToFullScreenOnKeyPress();
            }, false);
    

    Run your page again and notice that the full screen is getting escaped whenever you press any keys.

    Complete Code

    <!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>
    

    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_Click

    Chnage_Element_To_Full_Screen_Output

    Chnage_Element_To_Full_Screen_Output

    Have a happy coding.

    References

  • Fullscreen_API
  • 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

    TagsClient Side APIHTML5JavascriptPage Into Full Screen ModerequestFullscreen
    Previous Article

    Change The Page Title Dynamically Using Angular ...

    Next Article

    Asp Net Article Of The Day Mar ...

    0
    Shares
    • 0
    • +
    • 0
    • 0
    • 0
    • 0

    SibeeshVenu

    I'm neither an expert nor a guru. I have been awarded Microsoft MVP 2 times , C# Corner MVP 4 times, DZone MVB( Most Valuable Blogger). I always love to learn new technologies, I believe the one who stop learning is old. You are always welcome to ask any doubts if you have any, I would be more than happy to help. Please feel free to follow me on any social media network, I really like to get connected with you.

    Related articles More from author

    • ArticleHTML5

      HTML 5 Elements in a Look: Part 3

      January 29, 2015
      By SibeeshVenu
    • ArticleCodeProjectHTMLHTML5JavaScriptJQuery

      Check whether an array contains a particular element

      June 30, 2015
      By SibeeshVenu
    • Hoisting In JavaScript
      ArticleCodeProjectJavaScriptJQuery

      Hoisting In JavaScript

      November 6, 2015
      By SibeeshVenu
    • ArticleCodeProjectHTML5

      Working With Client Side Local Storage

      August 3, 2015
      By SibeeshVenu
    • Code SnippetsJavaScriptJQuery

      Regex to remove a word from a string

      November 2, 2015
      By SibeeshVenu
    • Check for any unsaved changes in page
      ArticleCodeProjectHTMLHTML5JQuery

      Check for any unsaved changes in page

      September 29, 2015
      By SibeeshVenu

    Recommends for you

    • Microsoft Azure Technical Guru
      AchievementsThe TechNet Guru Awards

      Microsoft Azure Technical Guru – May 2016

    • Visual C# Technical Guru - March 2016
      AchievementsThe TechNet Guru Awards

      Visual C# Technical Guru – March 2016

    • Code SnippetsSQLSQL Server

      Get the Count of Entries in Each Table in a DB in SQL

    • empty_project
      ArticleCodeProjectHow toJasmine FrameworkJavaScriptJQueryUnit Testing

      Writing JavaScript Tests Using Jasmine Framework

    MICROSOFT MVP (2)

    profile for Sibeesh Venu - Microsoft MVP

    Stack Overflow

    profile for Sibeesh Venu at Stack Overflow, Q&A for professional and enthusiast programmers

    C# CORNER MVP

    profile for Sibeesh C# Corner - A Social Community of Developers and Programmers

    DZONE MVB

    profile for Sibeesh Venu - DZone MVB

    CODE PROJECT

    TIMELINE

    • April 21, 2018

      What is SharePoint? Explore its Top 10 Benefits & Advantages

    • April 7, 2018

      What’s the Difference Between OneDrive and Onedrive for Business Win 10

    • March 28, 2018

      How to Fix Exchange Server Dirty Shutdown State Errors

    • March 26, 2018

      Implementing Guard in Angular 5 App

    • March 17, 2018

      Office 365 Export PST Tool – Great Results with 100% Accuracy

    • March 17, 2018

      Migrate Files From OneDrive to OneDrive for Business by SysTools

    • March 7, 2018

      Continue With Learning Indexes in MongoDB

    • March 2, 2018

      Learn MongoDB With Me – Part 2

    • ArticleSharePoint

      What is SharePoint? Explore its Top 10 Benefits & Advantages

      Introduction In this era of cloud computing and collaborative platform, SharePoint is a familiar name to the people of the business industry. The fact that more than 85% of Fortune ...
    • ArticleMicrosoft WindowsWindows 10

      What’s the Difference Between OneDrive and Onedrive for Business Win 10

      Introduction Unless you are completely ignorant of cloud technology, you must have heard of the term OneDrive. These days we also hear about OneDrive for Business (ODfB). Some people even ...
    • Article

      How to Fix Exchange Server Dirty Shutdown State Errors

      Introduction About Dirty Shutdown State Error Microsoft Exchange Server database works with Extensible Storage Engine (ESE), which is also known as the JET engine at the core. This Jet engine ...
    • AngularArticle

      Implementing Guard in Angular 5 App

      Introduction This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do ...
    • ArticleMicrosoft OfficeMicrosoft WindowsProductsSoftwareWindows 10Windows 7Windows 8.1

      Office 365 Export PST Tool – Great Results with 100% Accuracy

      Introduction Generally, users do not consider backing up their data. Once they start working on any specific application, they do not think about other hindrances which can come in between. ...

    Archives

    • April 2018
    • March 2018
    • February 2018
    • December 2017
    • November 2017
    • October 2017
    • September 2017
    • July 2017
    • June 2017
    • May 2017
    • April 2017
    • March 2017
    • February 2017
    • January 2017
    • December 2016
    • November 2016
    • October 2016
    • August 2016
    • July 2016
    • June 2016
    • May 2016
    • April 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • November 2015
    • October 2015
    • September 2015
    • August 2015
    • July 2015
    • June 2015
    • May 2015
    • April 2015
    • March 2015
    • January 2015
    • December 2014
    • November 2014
    • October 2014
    • August 2014
    • December 2013

    Recent Posts

    • What is SharePoint? Explore its Top 10 Benefits & Advantages
    • What’s the Difference Between OneDrive and Onedrive for Business Win 10
    • How to Fix Exchange Server Dirty Shutdown State Errors
    • Implementing Guard in Angular 5 App
    • Office 365 Export PST Tool – Great Results with 100% Accuracy
    • Migrate Files From OneDrive to OneDrive for Business by SysTools
    • Continue With Learning Indexes in MongoDB
    • Learn MongoDB With Me – Part 2
    • Video: 21 Easy Tips for Healthy Life
    • Learn MongoDB With Me
    • Why Office 365 Calendar Permissions Not Working- Solution
    • SQL Log File Corruption and Possible Recovery Methods
    • Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io
    • Using MongoDB on Node JS Application Using Mongoose
    • Implement Validations in Angular 5 App

    ABOUT ME

    I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP, C# Corner MVP, DZone MVB. My hobbies are reading, writing, blogging and riding my Royal Enfield Thunderbird.

    Sibeesh Passion is a non-profit organization which is created for sharing knowledge and widen our thoughts. You are welcome to be a part of it.

    CONTACT ME

    • X 384 / A, Katrikkal House, Vembilly Post, Kunnathunadu Panchayat, Ernakulam - 683565, Kerala, India
    • 08893 08893 2
    • info@sibeeshpassion.com

    TAG CLOUD

    Achievements ADOMD Angular Angular 5 Angular JS article Article Of The Day Asp.Net Azure C# c-sharp corner Career Advice chart code snippet CSharp CSS CSS3 Database HighChart How To HTML5 HTML5 Chart Interview Javascript JQuery jquery functions JQWidgets JQX Grid Json Microsoft MongoDB MVC News Node JS Products Royal Enfield SQL SQL Server Visual Studio Visual Studio 2017 VS2017 Web API Windows Windows 10 Wordpress

    Follow Me

    HOW MAY I HELP YOU

    • Home
    • About
    • Communities
    • Search
    © Copyright Sibeesh Passion 2018-2019. All Rights Reserved.