Question

I’m using this jQuery fullscreen plugin, and I’d like to have it so that a “fullscreen”/”exit fullscreen” button will toggle correctly whether the button is used to exit fullscreen or the user hits Esc or uses the browser’s exit fullscreen button.

Currently the button will toggle correctly if the button is used exclusively. This can be seen here (button is in the top-right). However, if fullscreen mode is entered and then exited with any method other than the button, it will currently not toggle back to the enter fullscreen button.

Here’s the jQuery I have so far for setting up the buttons and toggling them:

$('#expand').toggle(
    $(document).fullScreen() != null
);

$('#expand').click(function() {
    $(document).toggleFullScreen();
    $(this).toggle();
    $('#contract').toggle();
});

$('#contract').click(function() {
    $(document).toggleFullScreen();
    $(this).toggle();
    $('#expand').toggle();
});

And here’s the markup for them:

<img src="images/expand.png" id="expand" class="screen_control fadein button" alt="Fullscreen">
<img src="images/contract.png" id="contract" class="screen_control fadein button" alt="Exit Fullscreen">

How can I have the fullscreen state detected so that the correct button will be shown regardless of how the user exits fullscreen mode?

Thanks!

Answer 1

I’ve seen more in detail your website, you should use this code:

$(document).on("fullscreenchange", function() {
   $('#expand,#contract').toggle();
}

You could use a variable for more advanced usage:

var isFullscreen;
$(document).on("fullscreenchange", function() {
   isFullscreen = !!$(document).fullScreen();
}