JavaScript Full Screen API (completely cross-browser!)

fullscreen3.js

// quando clicco su enterfullscreen:
    // vai in fullscreen

// all'entrata in fullscreen:
    // mostra pulsante exitfullscreen
    // nascondi header e footer 

// quando clicco su exitfullscreen:
    // esci da fullscreen

// all'uscita dal fullscreen:
    // mostra pulsante enterfullscreen
    // mostra header e footer

function toggleFullScreen() {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}

function toggleFullScreenButtons() {
    $(_objects.enterfullscreen).toggle();
    $(_objects.exitfullscreen).toggle();
}

function toggleHeaderFooter() {
    $('#header').slideToggle('slow');
    $('#footer').slideToggle('slow');
}

$(_objects.enterfullscreen).on('click', function () {
    toggleFullScreen();
});

$(_objects.exitfullscreen).on('click', function () {
    toggleFullScreen();
});

// event listeners

document.addEventListener("fullscreenchange", function () {
    toggleFullScreenButtons();
    toggleHeaderFooter();
}, false);

document.addEventListener("mozfullscreenchange", function () {
    toggleFullScreenButtons();
    toggleHeaderFooter();
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    toggleFullScreenButtons();
    toggleHeaderFooter();
}, false);

if (!Modernizr.fullscreen) // fallback for browsers who doesn't support the Full Screen API
{
    $(_objects.enterfullscreen).on('click', function() {
        toggleFullScreenButtons();
        toggleHeaderFooter();
    });

    $(_objects.exitfullscreen).on('click', function() {
        toggleFullScreenButtons();
        toggleHeaderFooter();
    });
}