Menu
I have a problem. Full screen request works good in Firefox, but in Chrome when I request and cancel full screen, I can't request it again (F11 works). Moreover when I reload the page it cancel full screen.
jQuery('.fullScreen').click(function(){
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
jQuery('.fullScreen').css({'display' : 'none'});
jQuery('.minimize').css({'display' : 'block'});
});
Minimize:
jQuery('.minimize').click(function(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
jQuery('.fullScreen').css({'display' : 'block'});
jQuery('.minimize').css({'display' : 'none'});
});
Moreover, when I press esc in full screen, it minimize, but I can't back to full screen using my button.
565
ok so a couple of ideas.
firstly the reason why it doesn't work when you press the escape button. is very simply because your jquery is not being executed. to solve the refresh issue you can place a cookie stating weather the browser is in full screen or not and if it is you can make it full screen on the page ready event. i would like to propose a new idea for you
below is a fully copy pasteable demo of the full screen api
i would like to highlight a snippet
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
you can add code in this event to handle when the user leaves full screen mode. and just run your minimize methhod
<!DOCTYPE html>
<html>
<head>
<title>FullScreen API</title>
<style>
body {
background: #F3F5FA;
}
#container {
width: 600px;
padding: 30px;
background: #F8F8F8;
border: solid 1px #ccc;
color: #111;
margin: 20px auto;
border-radius: 3px;
}
#specialstuff {
background: #33e;
padding: 20px;
margin: 20px;
color: #fff;
}
#specialstuff a {
color: #eee;
}
#fsstatus {
background: #e33;
color: #111;
}
#fsstatus.fullScreenSupported {
background: #3e3;
}
</style>
</head>
<body>
<div id="container">
<div id="specialstuff">
<p>Inside here is special stuff which will go fullscreen</p>
<p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>
<p>Status: <span id="fsstatus"></span>
</div>
<input type="button" value="Go Fullscreen" id="fsbutton" />
<p>
</p>
</div>
<script>
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
// do something interesting with fullscreen support
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';
}
</script>
</body>
</html>
below i have a updated version of your jquery
jQuery('.fullScreen').click(function(){
maximize();
});
jQuery('.minimize').click(function(){
minimize();
});
function maximize(){
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
jQuery('.fullScreen').css({'display' : 'none'});
jQuery('.minimize').css({'display' : 'block'});
}
function minimize(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
jQuery('.fullScreen').css({'display' : 'block'});
jQuery('.minimize').css({'display' : 'none'});
}
an importent note
FullScreenChanged event – The W3C and Webkit fire the fullscreenchanged event on the element going fullscreen, but Mozilla fires the event on the document object.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
