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);
Related
I have problem with my dropdown menu on iPhone. Whenever I have more than 6 links on my menu the list is too long and whenever I want to scroll it little bit down with finger I can't because I press on link and its instantly fire to another url. How I can avoid that and recognize that I want to scroll menu little bit down and how to recognize if I tapped a menu li to go into another url?
$(".content-bar--content").on("click", function() {
window.location.href = link;
});
This is what my code looks like.
Based on https://www.falise.com/blog/prevent-click-event-scrolling-ipad/ without jquery
First we check if the device is iOS or not
var iOS = agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0;
We also need a variable which will tell us if the screen is being touched and moved.
var touchMoving = false;
Then for iOS only add event listeners that listen for touchmove and touchend that will set touchMoving to the appropriate value.
if (iOS)
{
document.addEventListener("touchmove", function(e)
{
touchMoving = true;
});
document.addEventListener("touchend", function(e)
{
touchMoving = false;
});
}
Now when a link with a class content-bar--content is clicked while scrolling it will prevent the click event because touchMoving is true.
document.querySelectorAll('.content-bar--content').forEach(elem => {
elem.addEventListener('click', function(e) {
if (touchMoving) {
e.preventDefault();
}
}
});
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) {});
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 implement one event for a short press and a different for a long press. The short press is just doing the default action. The long press works, but also does the default action still. What am I missing?
HTML
<"Label for my Link"
Javascript
$(document).ready(function(){
$('.recordlongpress').each(function() {
var timeout, longtouch;
$(this).mousedown(function() {
timeout = setTimeout(function() {
longtouch = true;
}, 1000);
}).mouseup(function(e) {
if (longtouch) {
e.preventDefault();
$('#popupPanel').popup("open");
return false;
} else {
return;
}
longtouch = false;
clearTimeout(timeout);
});
});
});
I followed the jQuery documentation and was under the impress "preventDefault" should stop the short press default action. Any examples I have found online do not seem to be exactly my situation. I appreciate you taking the time to read this. Thank you for any input.
You're returning from your "mouseup" handler before clearing the timeout and setting "longtouch" to false.
Try:
}).mouseup(function(e) {
var returnval;
if (longtouch) {
e.preventDefault();
$('#popupPanel').popup("open");
returnval = false;
}
longtouch = false;
clearTimeout(timeout);
return returnVal;
});
I'd also clear "longtouch" in the "mousedown" handler. That said, I wouldn't do this with mouse events. I'd use "touchstart" and "touchend". On touch screen devices, "mouse" events are simulated from touch events, and there's a distinct delay involved. (You may also want to detect whether the finger moved during the touch period.)
jsFiddle Demo
In your code these lines are unreachable
longtouch = false;
clearTimeout(timeout);
JS:
$('.recordlongpress').each(function () {
var timeout, longtouch = false;
$(this).mousedown(function () {
timeout = setTimeout(function () {
longtouch = true;
}, 1000);
e.preventDefault();
}).mouseup(function (e) {
clearTimeout(timeout);
if (longtouch == true) {
longtouch = false;
$('body').append("long press" + longtouch);
return false;
} else {
return;
}
});
});
#Pointy lead me towards a working solution for clicking events.
$(document).ready(function(){
$('.recordlongpress').bind('tap', function(event) {
return;
});
$('.recordlongpress').bind('taphold', function(event) {
$('#popupPanel').popup("open");
});
});
Something still needs to be added because upon a long press on my mobile device, the default options screen with the four options; open, save link, copy link URL and select text still pops up as well. I will add on the fix for that once I find it.