Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

I am trying to make a button that would toggle (on/off) HTML5 fullscreen on a certain website.

After reading plenty of documentation, it appears there still are some inconsistencies among how browsers treat certain properties for it.

I went for kind of "cross-browser" approach which does work in Firefox and Safari/MacOS, partially works in Safari/Windows and totally fails to work in Chrome and Opera.

Some castrated code snippets:

// class init
initialize: function() {

    this.elmButtonFullscreen = $('fullscreen');
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));
},

// helper methods
_launchFullScreen: function(element) {

    if(element.requestFullScreen) { element.requestFullScreen(); }
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }
},
_cancelFullScreen: function() {

    if(document.cancelFullScreen) { document.cancelFullScreen(); }
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
},
_isFullScreen: function() {

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);
    return fullScreen;
},

// callbacks
onClickFullscreen: function(e) {

    e.stop();
    if(this._isFullScreen()) this._cancelFullScreen();
    else this._launchFullScreen(document.documentElement);
}
share|improve this question

2 Answers

up vote 1 down vote accepted

Changing the 1st line of _isFullScreen function to

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false;

Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)

share|improve this answer
up vote 0 down vote

Based on what I found on Mozilla's Developer Network the function for Webkit is actually spelt slightly different.

document.webkitRequestFullscreen with a lowercase "s" for screen.

And from W3 spec, it is meant to be with a lowercase "s".

On the MDN link they say:

Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here and other prefixed implementations may use a capital 'S'.

share|improve this answer
Thanks for your effort. I believe I've been there before, but that's not the main issue here; Safari/Mac still manages to launch fullscreen without problems. What I just checked is that Chrome answers true to document.webkitFullscreenEnabled even if we're not in the fullscreen view. Any clues? :) – kyeno May 4 at 7:35
Some playing around in the Chrome Console shows me that the document object doesn't actually have the webkitRequestFullscreen function however document.documentElement does. While I still couldn't get it to work yet, I thought I might mention that. – Turnerj May 4 at 7:43
1  
Okay - according to what I found out - Chrome treats document.webkitFullscreenEnabled as if "do we support fullscreen mode?" and document.webkitIsFullScreen as answering the question "are we in fullscreen mode?". Love them browser quirks, don't we? :) – kyeno May 4 at 7:49
1  
Definitely! Further looking into this demo in Chrome, it does only work on a click event and calling it from the console does nothing. – Turnerj May 4 at 7:51
1  
For it working on click event only - it is kind of understandable. Imagine what over-advertised sites could do if going fullscreen would be available from regular function calls... – kyeno May 4 at 7:58
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.