I have the fullscreen API working on the click of one button and exiting fullscreen on the click of another button. I would like to have the fullscreen toggle open and close with a single button.
var requestFullscreen = function(ele) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
} else {
console.log('Fullscreen API is not supported.');
}
};
var exitFullscreen = function() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
console.log('Fullscreen API is not supported.');
}
};
var fsDocButton = document.getElementById('fs-doc-button');
var fsExitDocButton = document.getElementById('fs-exit-doc-button');
fsDocButton.addEventListener('click', function(e) {
e.preventDefault();
requestFullscreen(document.documentElement);
});
fsExitDocButton.addEventListener('click', function(e) {
e.preventDefault();
exitFullscreen();
});
<button id="fs-doc-button">FULLSCREEN</button>
<button id="fs-exit-doc-button">EXIT FULLSCREEN</button>
var fsDocButton = $('#fs-doc-button');
fsDocButton.data('toggleState', 'first');
fsDocButton.on('click', function(e) {
e.preventDefault();
if ($(this).data('toggleState') == 'first'){
requestFullscreen(document.documentElement);
$(this).data('toggleState', 'second');
}
else{
exitFullscreen();
$(this).data('toggleState', 'first');
}
});
$(document).keydown(function(e){
if (e.keyCode == 27){
$('#fs-doc-button').data('toggleState', 'second');
}
});
Others are right in that you need some sort of a boolean to detect weither you should cancel or request the fullscreen.
But none takes into account that your users may cancel the fullscreen mode without using your button.
The only cross-browser way to check if you're in fullscreen already is to check for the document.fullcreenElement. If non-null, you're already in fullscreen and should exit it.
var isFullScreened = function(){
return document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
};
...
if(isFullScreened()){
exitFs()
}
else{
enterFS();
}
Related
At the moment I am trying to display an image in fullscreen via javascript. (Fullscreen API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
Javascript code:
var enterFullscreen = function(el) {
if(el.requestFullscreen) {
el.requestFullscreen();
} else if(el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if(el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if(el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
noFullscreenSupport();
}
var exitFullscreen = function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
noFullscreenSupport();
}
var initFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
$(this).bind('click', function() {
if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
exitFullscreen();
} else {
enterFullscreen(document.documentElement);
}
});
});
I get the fullscreen buttons and bind them to a click event which calls the function to enter the fullscreen.
Images:
Without fullscreen
Fullscreen
The result is that the image sometimes displays in fullscreen or in a semi-fullscreen, where the background of the page is displayed on the bottom of the page with the width/height of browser-taskbar and windows-taskbar.
Furthermore, as soon as I try to use the developer tool of the browser the visual bug dissappears.
I found the solution for my problem. Instead of passing document.documentElement (root-element) I have to pass document.body (body-element) to the function.
I want when my webpage is loading it will be auto fullscreen without clicking on the body.You can take a look at my website that I want to make a change: TV. When you click it anywhere, it will be fullscreen. But I want to make it automatically fullscreen without click anything. I was wondering if I could use auto click to change onClick on the body? Because using onload nothing happened. Can you help me?
I only use <body onclick="toggleFullScreen()"> in my html document.
And this is the javascript of toggleFullScreen:
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
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();
}
}
}
If you want to stick to javascript, then try this.
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
put it like this before body tag,
<script>
$(document).ready(function(){
toggleFullScreen();
});
</script>
The code below is a working example when you click the image it opens webpage browser in fullscreen, HOWEVER I don't know how to make the javascript toggle fullscreen mode when clicking image again.
So the script needs to open full screen mode when clicking image the first time, then exit full screen mode when clicking the same image the second time.
HTML:
<h1>Click image to toogle fullscreen mode</h1>
<img id="logo" src="http://i.imgur.com/lPZh57Y.png" alt="logo" />
JavaScript:
(function () {
var viewFullScreen = document.getElementById("logo");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
var cancelFullScreen = document.getElementById("logoCONFLICT");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
})();
A simple solution would be to keep track when you request the full screen & exit full screen calls. And run the appropriate code based on this value. You don't need two separate click listeners for this. Just another if else statement.
<script>
(function () {
var viewFullScreen = document.getElementById("logo");
var isFullScreen;
if(viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
if(!isFullScreen) {
var docElm = document.documentElement;
if(docElm.requestFullscreen) docElm.requestFullscreen();
else if(docElm.msRequestFullscreen) docElm.msRequestFullscreen();
else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen();
else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen();
isFullScreen = true;
} else {
if(document.exitFullscreen) document.exitFullscreen();
else if(document.msExitFullscreen) document.msExitFullscreen();
else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen();
isFullScreen = false;
}
}, false);
}
})();
</script>
Haven't tested it but should work. A better way would be to detect the fullscreen status initially and listen for the changes as described here. Instead of attempting to keep track of the status yourself.
Hope this helps! Good luck!
I'm trying to make a element of my website in fullscreen when we click on it, and it works with chrome, IE, but not with firefox.
I went to the microsoft fullscreen API, and I tested theire code, and there is no problems with any of this browsers.
Here the part of my web site I want to put in full screen.
<div class="wrap">
<div class="signin">
<div style="margin: 2px 0px -25px 10px;"><h1>Sign In or Signup</h1></div>
<?php echo $this->signin(); ?>
<span class="forget">
Forgotten Password? </span>
</div>
And here the script I use
<script type="text/javascript">
var inFullScreen = false; // flag to show when full screen
var fsClass = document.getElementsByClassName("wrap");
for (var i = 0; i < fsClass.length; i++) {
fsClass[i].addEventListener("click", function (evt) {
if (inFullScreen == false) {
makeFullScreen(evt.target); // open to full screen
} else {
reset();
}
}, false);
}
function makeFullScreen(divObj) {
alert (divObj);
if (divObj.requestFullscreen) {
alert ('standard');
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
alert ('ms');
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
alert ('moz');
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
alert ('webkit');
divObj.webkitRequestFullscreen();
}
inFullScreen = true;
return;
}
function reset() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
inFullScreen = false;
return;
}
</script>
And the last info who can be usefull, my website is a zent framework website, it's why there is some PHP.
This code segment should work for most browsers incl. Mozilla Firefox. Specifically, Mozilla Firefox insists that the code in the event handler executes under 1 second. Else Fullscreen requests are denied. Refer: Bug Report
HTML
<button id="view-fullscreen">Fullscreen</button>
Javascript
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function() {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
})
}
Refer to the FullScreen API for more details
Fullscreen API
The above code segment's working Demo: Fullscreen Demo
I have to use javascript to make links instead of for several unimportant reasons, and I want for it to behave like even though im not using it. Not the affects thats easy, but I want to be able to hold down shift while clicking to open a new window and to open it in a new tab if they are holding down ctrl. How would I do this? Also, it has to be compatible with IE9.
[edit] Also, this is going to be in an iframe
I guess you want something like this:
JSFiddle
http://jsfiddle.net/MXuVY/3/
JavaScript
var ctrlPressed = false;
$('#link').click(function () {
var link = 'http://stackoverflow.com/';
if (ctrlPressed) {
window.open(link,'_blank');
} else {
window.location = link;
}
return false;
});
$(document).keydown(function (e) {
if (e.keyCode === 17) {
ctrlPressed = true;
}
});
$(document).keyup(function (e) {
if (e.keyCode === 17) {
ctrlPressed = false;
}
});
HTML
<span id="link">Link to stackoverflow</span>
Version without jQuery
JSFiddle
http://jsfiddle.net/MXuVY/6/
JavaScript
function addEvent(el, eType, fn, uC) {
if (el.addEventListener) {
el.addEventListener(eType, fn, uC);
return true;
} else if (el.attachEvent) {
return el.attachEvent('on' + eType, fn);
} else {
el['on' + eType] = fn;
}
}
var ctrlPressed = false,
a = document.getElementById('link'),
link = 'http://stackoverflow.com/';
addEvent(a, 'click', function () {
if (ctrlPressed) {
window.open(link,'_blank');
} else {
window.location = link;
}
return false;
});
addEvent(document, 'keydown', function (e) {
if (e.keyCode === 17) {
ctrlPressed = true;
}
});
addEvent(document, 'keyup', function (e) {
if (e.keyCode === 17) {
ctrlPressed = false;
}
});
Bind a keystroke event listener to window or document and use it's callback function to do whatever you need.
If you use jquery, its a bit easier to make a more reliable keystroke listener, imho. http://blog.cnizz.com/2008/10/27/javascript-key-listener/
So, this is what you want: http://jsfiddle.net/DerekL/V8yzF/show
$("a").click(function(ev) {
if (ev.ctrlKey) { //If ctrl
window.open(this.attr("href"));
retrun false;
} else if (ev.shiftKey) { //If shift
window.open(this.attr("href"),"_blank", "width=400,height=300");
retrun false;
} else { //If nothing
//do nothing
}
});