Native Fullscreen JavaScript API toggle button

Question

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!

John Dyer · Accepted Answer · 2012-06-15 14:43:14Z

1

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

answered Jun 15, 2012 at 14:43

John Dyer

1,0059 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ALx Over a year ago

Thanks but FS button has disappeared now. Might be a missing bracket in the fullscreenObj variable?

ALx Over a year ago

Nope, it was the ?. So with var fullscreenObj = fullScreenApi.fullScreenEventName.indexOf('moz') > -1 ? document : container; it works like a charm. Thanks for pointing that out.

hrwath · Accepted Answer · 2012-06-15 13:46:31Z

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
}

asparagino · Accepted Answer · 2016-07-14 22:17:49Z

0

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

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

answered Jul 14, 2016 at 22:17

asparagino

6036 silver badges12 bronze badges

Collectives™ on Stack Overflow

Native Fullscreen JavaScript API toggle button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related