CODEWITHSUNDEEP
javascriptdom-eventsfullscreen
ALx
ALx

Reputation: 639

Native Fullscreen JavaScript API toggle button

I can't figure out how to modify the below code to include a toggle button. When in 'normal' mode the button would make the element go fullscreen and then change its function to go back to 'normal' state.

I've modified the code from John Dyer's Native Fullscreen JavaScript API example:

var fsButton = document.getElementById('fsbutton'),
    fsElement = document.getElementById('specialstuff'),
    fsStatus = document.getElementById('fsstatus');


if (window.fullScreenApi.supportsFullScreen) {
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
    fsStatus.className = 'fullScreenSupported';

    // handle button click
    fsButton.addEventListener('click', function() {
        window.fullScreenApi.requestFullScreen(fsElement);
    }, true);

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            fsStatus.innerHTML = 'Whoa, you went fullscreen';
        } else {
            fsStatus.innerHTML = 'Back to normal';
        }
    }, true);

} else {
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

to this:

var container = document.getElementById('canvas'),
fsButton = document.getElementById('fsbutton');

if (window.fullScreenApi.supportsFullScreen) { // fullscreen supported
    fsButton.style.display = 'block';

    container.addEventListener(fullScreenApi.fullScreenEventName, function() {
        fsButton.addEventListener('click', function() {
            if (fullScreenApi.isFullScreen()) { // fullscreen is on
                window.fullScreenApi.CancelFullScreen( container );
                fsButton.className = 'fs-off';
            } else { // fullscreen is off
                window.fullScreenApi.requestFullScreen( container );
                container.style.width = "100%";
                container.style.height = "100%";
                fsButton.className = 'fs-on';
            }
        }, true)

    }, true);

} else {
    // no fullscreen support - do nothing
}

But it doesn't work. Any suggestions much appreciated!

Upvotes: 0

Views: 2397

Answers (3)

asparagino
asparagino

Reputation: 603

I'd advise using something like https://github.com/sindresorhus/screenfull.js/

This wraps most of the browser quirks in a cleaner interface.

Upvotes: 0

John Dyer
John Dyer

Reputation: 1005

The other problem you'll have is that Mozilla wants you to listen to the fullscreenchange event on the document element, not the element that is going fullscreen.

// which object can handle a fullscreen event
var fullscreenObj = (fullScreenApi.fullScreenEventName.indexOf('moz') > -1 : document : container;

fullscreenObj.addEventListener(fullScreenApi.fullScreenEventName, function() {
    if (fullScreenApi.isFullScreen()) {
        container.style.width = container.style.height = '100%';
        fsButton.className = 'fs-on';
    } else {
        fsButton.className = 'fs-off';
    }
}, true);

Upvotes: 1

hrwath
hrwath

Reputation: 125

First of all, you shouldn't nest fsButton click event listener into fullScreenApi's event listener because it won't work until container goes fullscreen. fsButton's click is responsible for going fullscreen, event listener is being attached after going fullscreen so the action will never happen.

Here's a modified version of the code which should suit your needs:

var fsButton = document.getElementById('fsbutton'),
    container = document.getElementById('canvas');


if (window.fullScreenApi.supportsFullScreen) {
    fsButton.style.display = 'block';

    fsButton.addEventListener('click', function() {
        if (fsButton.className == 'fs-off') {
            window.fullScreenApi.requestFullScreen(container);
        } else {
            window.fullScreenApi.cancelFullScreen(container);
        }
    }, true);

    container.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            container.style.width = container.style.height = '100%';
            fsButton.className = 'fs-on';
        } else {
            fsButton.className = 'fs-off';
        }
    }, true);
} else {
    // no fullscreen support - do nothing
}

Upvotes: 0

Related Questions