CODEWITHSUNDEEP
asp.net-mvc-4fullscreen
amp
amp

Reputation: 12372

Toggle browser full screen programmatically

I'm using Fullscreen API to toggle the full screen on the browser. It works but I have two issues:

  1. When I'm in full screen, if I click on a link to go to another page (in my domain) the page leaves full screen. I want to continue in fullscreen mode.
  2. In Chrome, the background doesn't fill the full height of the screen.

Those issues doesn't occur when I use full screen with F11 key.

There is some solution to those problem? Some othe API or work around?

My javascript code:

// toggle fullscren
function toggleFullScreen(element) {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        launchFullScreen(element);
    } else {
        cancelFullscreen();
    }
}

// Find the right method, call on correct element
function launchFullScreen(element) {
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}

// Whack fullscreen
function cancelFullscreen() {
    if (document.cancelFullScreen) {
        document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}

My button to toggle full screen:

<a onclick="toggleFullScreen(document.documentElement);">
    <img src="~/Content/icons/fullscreen-launch-icon.svg" />
</a>

Upvotes: 2

Views: 2587

Answers (1)

Gilson
Gilson

Reputation: 1848

regarding your #1 question below is what Mozilla website says:

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

here is a link: Using Full Screen Mode

Upvotes: 1

Related Questions