Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.
$(document).keyup(function(e) {
if (e.keyCode === 27) {
console.log("esc pressed")
}
});
This only works when the view is not fullscreen!
Going fullscreen:
$('#fullscreen-button').unbind("click").on('click', function(){
viewer.setFullscreen();
});
setFullscreen: function() {
if(!viewer.isFullScreen()) {
console.log("window fullscreen --> ",viewer.isFullScreen());
document.body.webkitRequestFullscreen();
$("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
$("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
$('.fullscreen').width(screen.width);
$('.fullscreen').height(screen.height);
$('#slide-container').trigger('refresh.owl.carousel');
} else {
document.webkitCancelFullScreen();
console.log("window fullscreen --> ",viewer.isFullScreen());
$('.tenTwenty').width(1024); $('.tenTwenty').height(768);
$('.thirteenSix').width(1366); $('.thirteenSix').height(768);
$("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
$('#slide-container').trigger('refresh.owl.carousel');
}
},
isFullScreen: function(){
if ( document.webkitFullscreenElement) {
return true;
} else {
return false;
}
},
Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:
// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
if(!viewer.isFullScreen()) {
// you are out of fullscreen
} else {
// you are in fullscreen
}
});
EDIT:
As we talk in comments, vanilla js fits perfectly:
document.addEventListener('webkitfullscreenchange', function(e) {});
Related
I have a <div> element that is hidden. Following a click event the element opens in fullscreen.
When a user clicks ESC to exit fullscreen, I would like the <div> to automatically return to hidden in the regular view.
The following code allows ESC to hide the <div> in the normal view but is ignored when in fullscreen mode. This means it takes 2 clicks of ESC to hide the <div>. The first click exits fullscreen as per the normal browser functionality and returns to normal view with the <div> visible. A second click of ESC is then required to trigger the <div> to be hidden
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$('#Box').hide();
}})
Is it possible to have my code incorporated into the initial browser response to the ESC key being pressed so the element is never visible in regular view? Or is there another workaround?
You can listen for fullscreenchange events and then run your code when that event fires and it's a change from fullscreen -> normal.
For example:
$(document).on('fullscreenchange', function(e) {
if (document.fullscreenElement) {
// Entered fullscreen
} else {
// Left fullscreen; run your code here
$('#Box').hide();
}
});
I managed to solve my own question by extending ps4star's solution. To allow for cross browser compatibility I added moz and webkit variations but possibly still need to bug test and modify to cover as many browsers as possible.
function isFullScreen() {
$('#Box').show();
}
function notFullScreen() {
$('#Box').hide();
}
document.addEventListener("fullscreenchange", function () {
if (document.fullscreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);
document.addEventListener("mozfullscreenchange", function () {
if (document.mozFullScreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);
document.addEventListener("webkitfullscreenchange", function () {
if (document.webkitIsFullScreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);
is there a way to detect whether a 'mousedown' is a touch right click (hold the finger about 1 sec in place) or just a normal right click?
I think chrome can do this with "ev.originalEvent.sourceCapabilities.firesTouchEvents". But only chrome.
$('#container').mousedown(function(ev) {
if (ev.button === 2 && ev.comesFromTouch) return false
//...
}
edit:
current situation: after about one second after I pressed down my left mouse button, the browser automaticly triggers a 'mousedown' event with button = 2 (tested in the 'device toolbar' mode in chrome). I want to cancel this.
SOLUTION
If a right mousedown appears between a touchstart and touchend it is a right click on a touch screen.
it works something like this.
function onPcRight() { console.log(1);}
function onTouchRight() { console.log(2);}
$('#container').mousedown(function(ev) {
if (ev.button === BUTTON_RIGHT) {
if ($(this).prop('touchdown')) onTouchRight();
else onPcRight();
}
})
.on('touchstart', function() {
$(this).prop('touchdown', true);
})
.on('touchend', function() {
$(this).prop('touchdown', false);
});
I think you can use setTimeout/clearTimeout to count 1s. The pseudo code:
var global_timer = null;
$('#container').mousedown(function(ev) {
if (ev.button === 2) {
global_timer = setTimeout(fireTouchRightClick, 1000);
}
});
$('#container').mousemove(function(ev) {
cancelTouchRightClick();
});
$('#container').mouseleave(function(ev) {
cancelTouchRightClick();
});
$('#container').mouseup(function(ev) {
if (cancelTouchRightClick() && ev.button === 2) {
fireNormalRightClick();
}
});
function cancelTouchRightClick () {
if (global_timer) {
clearTimeout(global_timer);
global_timer = null;
return true;
}
return false;
}
function fireTouchRightClick () {
global_timer = null;
// TODO touch right click
}
I also found a repo to do mouse holding on Github: https://github.com/dna2github/dna2petal/tree/master/visualization
https://github.com/dna2github/dna2petal/blob/master/samples/visualization.html
Maybe you need to pass button type to the mousehold event callback
I have a function I use to intercept CTRL+V and COMMAND+V:
function paste() {
clip.val('').focus();
//wait until Browser insert text to textarea
self.oneTime(100, function() {
self.insert(clip.val());
clip.blur().val('');
});
}
clip is hidden textarea, right now it's hidden using black div on top of it (the only way I found to fix Andorid). And in keydown event I call that function:
} else if (e.which === 86) {
//CTRL+V
paste();
return true; // I return true because I have return false at the end
// of keydown event
}
But seems that it don't work on MacOSX Safari as you can check in this issue on github. Anybody know why is that happening and how to fix it?
I have a mobile based web application. Currently I am encountering an issue when ajax calls are being made. The wait spinner which is enclosed in a div can be clicked through on the ipad device. The javascript event being triggered is touchstart. Is there anyway to prevent this event from going through normal processing?
Tried to call the following, however it did not work.
Disable
document.ontouchstart = function(e){ e.preventDefault(); }
Enable
document.ontouchstart = function(e){ return true; }
How touchstart is handled
$(document).on('touchstart', function (eventObj) {
//toggle for view-icon
if (eventObj.target.id == "view-icon") {
$("#view-dropdown").toggle();
} else if ($(eventObj.target).hasClass("view-dropdown")) {
$("#view-dropdown").show();
} else {
$("#view-dropdown").hide();
}
});
As user3032973 commented, you can use a touchLocked variable, which is working perfectly.
I have used it in combination with the Cordova Keyboard-Plugin. Scrolling will be disabled the time the keyboard is shown up and reenabled the time the keyboard is hiding:
var touchLocked = false;
Keyboard.onshowing = function () {
touchLocked = true;
};
Keyboard.onhiding = function () {
touchLocked = false;
};
document.ontouchstart = function(e){
if(touchLocked){
e.preventDefault();
}
};
I am trying to use fullscreen in IE11 using Bigscreen.js.
But IE11 doesnt listen to "MSFullscreenChange" event.
document.addEventListener("MSFullscreenChange", function () {
if (document.msFullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
Putting this in console, it prints nothing on fullscreen.
What is the alternate way to detect this event?
Actually, the Microsoft documentation is wrong.
I'm testing against IE11 and it doesn't have the MSFullscreenChange event listener. Instead, it has the onmsfullscreenchange event handler.
So, just change this and your code should work.
I had a similar problem in my word game, the MSFullscreenChange listener was not called in Internet Explorer 11:
To fix the problem I had to attach the listener to the document instead of the DOM element (#fullDiv in my case). Even though all the other listeners where attached to the DOM element going fullscreen:
var domElem = document.getElementById('fullDiv');
domElem.addEventListener('fullscreenchange', updateFullCheck);
domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
domElem.addEventListener('mozfullscreenchange', updateFullCheck);
document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11
Below is my complete code working in IE11, Edge, Safari/MacOS, Chrome, Firefox, Opera:
'use strict';
function isFullscreenEnabled() {
return document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled;
}
function getFullscreenElement() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
jQuery(document).ready(function($) {
if (isFullscreenEnabled()) {
function updateFullCheck() {
if (getFullscreenElement()) {
$('#fullCheck').prop('checked', true).checkboxradio('refresh');
$('#leftDiv').css('padding', '24px 0 24px 24px');
$('#rightDiv').css('padding', '24px 24px 24px 0');
} else {
$('#fullCheck').prop('checked', false).checkboxradio('refresh');
$('#leftDiv').css('padding', '0');
$('#rightDiv').css('padding', '0');
}
}
var domElem = document.getElementById('fullDiv');
domElem.addEventListener('fullscreenchange', updateFullCheck);
domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
domElem.addEventListener('mozfullscreenchange', updateFullCheck);
document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11
$('#fullCheck').checkboxradio().click(function(ev) {
ev.preventDefault();
ev.stopPropagation();
if (getFullscreenElement()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (domElem.requestFullscreen) {
domElem.requestFullscreen();
} else if (domElem.mozRequestFullScreen) {
domElem.mozRequestFullScreen();
} else if (domElem.webkitRequestFullscreen) {
domElem.webkitRequestFullscreen();
} else if (domElem.msRequestFullscreen) {
domElem.msRequestFullscreen();
}
}
}).checkboxradio('enable');
}
});
If I navigate to http://brad.is/coding/BigScreen/, launch F12 Developer Tools, paste your script into the console, and click the “Run script” button, clicking the demo image displays the "Went full screen" message in the console as expected.
When pasting multiline scripts in the console, you have to click the “Run script” button or press Ctrl + Enter to actually submit the script for execution. Just pressing the Enter key inserts a newline in the script. Alternatively, you can change the script to be single-line. In this case, pressing the Enter key will submit the script for execution.
Disclosure: I am on the team that worked on Microsoft's implementation of the Fullscreen API.