JSFiddle - React, Tailwind, and code Playground
HTML
<div id="view-fullscreen">View fullscreen</div>
<div id="container">Container</div>
JavaScript
//View Fullscreen
$('#view-fullscreen').click(function(){
$('#container').css({'background': 'green'}).fullScreen({
'callback' : function(fullScreen){
if ( !fullScreen ) {
// Canceled
alert("escape")
}
}
});
$(this).hide();
return false;
});
/**
* @name jQuery FullScreen Plugin
* @author Martin Angelov, Morten Sjøgren
* @version 1.1
* @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
* @license MIT License
*/
/*jshint browser: true, jquery: true */
(function($){
"use strict";
// These helper functions available only to our plugin scope.
function supportFullScreen(){
var doc = document.documentElement;
return ('requestFullscreen' in doc) ||
('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
('webkitRequestFullScreen' in doc);
}
function requestFullScreen(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}
function fullScreenStatus(){
return document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
false;
}
function cancelFullScreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
$(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
}
function onFullScreenEvent(callback){
$(document).on("fullscreenchange...