I am currently trying to use the <video> tag to, obviously, display videos. If the user clicks on the video (or poster image) it will trigger my script to set the video to fullscreen through the requestFullScreen method. When I exit fullscreen mode, I attempt to catch this by using a listener like so:
document.addEventListener('fullscreenchange', function() {
// This is never triggered, I never arrive here.
if (isFullScreen) { // do something}
else { // do something else}
}
I have similar listeners for mozfullscreenchange, msfullscreenchange and webkitfullscreenchange.
Now my problem is that for some android devices with some browsers, the listener is not triggered. For instance, on a Samsung Galaxy Note the listener is not triggered when using Chrome, while when using Asus Transformer with Chrome it works. However, if I use Firefox on the same two devices, it only works on Samsung Galaxy Note and not the Asus Transformer.
Is there a simple explanation to this inconsistency? Have I done something wrong? Is there perhaps some different events I should listen to on different versions of Android and browsers?
You have missed the last outter right parenthesis.
Also two curly brackets are commented away.
Related
Does the touchmove event NOT work on the iPhone's Safari browser?
I'm not talking about an iOS App, just a regular old HTML page with some Javascript and jQuery that's loaded into the iPhone's Safari Browser.
I actually connected my iPhone to my Mac-mini - which is also running Safari, so I can see everything that's happening on the iPhone in the Mac-Mini's Safari console - and my touchstart and touchend events DO fire, but touchmove just does NOT respond.
Here's the code:
document.addEventListener("touchstart", onMobileTouchStart, false);
document.addEventListener("touchmove", onMobileTouchMove, false);
document.addEventListener("touchend", onMobileTouchEnd, false);
function onMobileTouchStart(touchStartEvent) {
console.log("\n==>'onMobileTouchStart'!!!");
touchStartEvent.preventDefault();
}
function onMobileTouchMove(moveEvent) {
console.log("\n==>onMobileTouchMOVE'!!!");
moveEvent.preventDefault();
}
function onMobileTouchEnd(touchEndEvent) {
console.log("\n==>onMobileTouchEnd'!!!");
}
What I'm ultimately trying to do is get a custom pinch-zoom type behavior going, and my understanding is that this has to be implemented in the touchmove event - so that's why I'm asking.
I can't see any other way of tackling this unless touchmove starts playing nicely.
Any thoughts, tips or workarounds for this?
I see the same problem in May 2021. I get the touchmove events just fine if i try it on Google Chrome, but Safari, on 14.4.2 (latest version), the Safari browser gives me the initial touchdown event, but subsequent touchmove events are not being fed to me.
Clearly the browser is stealing the touchmove event, because it wants to scroll something, and as usual scrolling is fouling up everything, because it is one of these things that HTML / JS spec doesn't really cover, as it is magical browser behavior.
I have a overflow:hidden on my body tag, so there shouldn't be any scrolling anyway. Not sure how to fix this browser quirk, since the iPad is a massively popular device, i must figure out how to fix it, but i am baffled at the moment.
I have built a website that uses some simple JavaScript. I make use of many events throughout the website such as the input and submit event for validating and processing a contact form, the focus event for some form-related things and a dynamically-created tab interface, etc. I register all of these handlers using element.addEventListener("event", handler).
My JavaScript works wonderfully everywhere that I have been able to test (Firefox and Chrome on Ubuntu; Firefox and Chrome on Android), except for on iOS devices (regardless of what browser is used), where it seems that very few events are being fired.
It has been difficult for me to debug what the issue is on iOS devices because I do not have an OSX computer to connect an iOS device to so that I can use the remote console. I have come to the conclusion that the events are not firing for a few reasons:
The contact form on the website is being submitted even though I make a call to event.preventDefault() in the form's submit event handler, and do not explicitly submit the form anywhere after that.
I have tried catching any errors and displaying them in an alert like so:
window.onerror(function(err) { alert(err) })
to no avail (i.e. no errors were caught).
I have adapted all my functions to make use of only the click event, and then they work perfectly!
The last point is a possible solution to the problem, but I think it is bad practice to adapt all my work to one specific platform and rely only on a single event when there are so many purpose-built events that can be used and that are supposedly supported by iOS in the first place.
Why are so many events not being fired on iOS devices?
The problem was actually that I had made a const declaration in strict mode, which is, according to caniuse, not recognized in the current versions of both Safari and iOS Safari (9.1 and 9.3, respectively, as of writing).
I have better documented this problem in another question and answer.
I'm trying to add swipe gestures to an image carousel, but I'm having issues with Safari on iOS.
My hammer.js initialization looks like this:
this.mc = new Hammer.Manager(this.$carousel[0]);
this.mc.add(new Hammer.Swipe({
direction: Hammer.DIRECTION_HORIZONTAL,
threshold: 0
}));
Where this.$carousel[0] is the div containing all the images, and the event binding is set like this:
this.mc.on('swipeleft', this.slideLeft.bind(this));
this.mc.on('swiperight', this.slideRight.bind(this));
However, this.slideLeft and this.slideRight never get called.
The weird thing is that the same code seems to be working ok on Chrome on different Android versions, and it fails to trigger the swipe* events only on Safari on iPhones.
Any ideas about what I may be missing?
Turns out there was a bug in version 2.0.1, the one I was using, where some of the events composing a swipe event were being fired in the wrong order; with version 2.0.6 it seems to be working as expected.
my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.
for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown
Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill
Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.
Last night, I thought I'd do a quick project to demonstrate HTML5 capabilities and to try some things out. However, I can't seem to figure out how to get drag and drop to work in Safari, while it works perfectly in Chrome and Firefox. More precisely, it seems that drop event does not fire in Safari, when you try to drag an image inside the website into the drop area. At the same time it does fire when you drag and drop a file from desktop.
I'm not really sure, but I'm pretty certain that when I tried the same script at work (where I have Safari 5.0.2 etc), it fired the drop event (going to check it tomorrow to be sure) and gave me the FileReader-related errors that were expected. But when I just installed Safari 5.1 on my own PC, I only get dragover, enter and leave events (and drop too if the file was dragged into the browser).
I've been Googling for some time now and don't seem to find a single example of drag and drop that actually works in Safari 5.1. Even Safari's dev-centre's sample doesn't work, let alone html5demo.com 1 and html5demo.com 2. This leads me to think whether the Safari has a bug, or maybe they have implemented something mandatory that isn't reflected in the dev-centre (last updated in 2009).
The script I'm trying to fix is at my site (sorry guys, no problem specific code to post, as it seems to be broken elsewhere too).
PS! I might have introduced some bugs into my own site while desperately trying to fix the drag and drop in Safari, but I'm too tired to fix them right now.
UPDATE: Just confirmed at work that the drop event does fire in Safari 5.0.2 on Mac OS X.
UPDATE 2: Also confirmed that everything works perfectly fine with Safari 5.0.6 on Win 7, the same computer that fails with 5.1
Testing with Safari 5.1.7 Mac:
To see the drop event fire, you have to handle the dragover event and call event.preventDefault().
Here's the (quite entertaining) discussion where I found the answer:
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
I don't know if this really solves the question because the asker's site (at least as of today) does this. It works fine on my machine (as do the HTML5 demo pages). But this may help someone coming to this thread with this problem who doesn't know about this rather unintuitive implementation detail.
I am using Safari 5.1.5 (7534.55.3) on a Windows 7 PC which I just installed the other day, no previous installs of Safari and I cannot get any of the online HTML5 drag-n-drop demos to work.
I am working on a project with drag-n-drop and Modernizr tells me that I'm good to go with Safari (Modernizr.draganddrop == true), but when I actually drop the item the drop event does not fire.
I've added alert debugging and nothing.
My testing shows that Safari 5.1.5 (7534.55.3) on a Windows 7 PC drop event is broken. All other drag events seem to work: dragstart, dragend, dragenter, dragleave, dragover.
Just to clarify: Visited your site and found no errors. Opened the console, no error, and everything appeared to function as designed. Tried all provided examples with no error.
All examples work fine Safari Version 5.1 (7534.48.3). Sorry, mate – Maybe it's a setting you've changed?
Allow me to suggest a possibility:
Go to Safari->Empty Cache... Then Safari->Reset Safari... Try reloading the page.
Likely, there's something cached that's creating a conflict. There seems to be nothing wrong with your script in the slightest.
Edit
Some things to check...
Are any of your function names containing reserved words? I've done this, had it not throw any errors, but it simply wouldn't work.
I've had some weird issues with Safari not running methods written as funcName = function(){}. If you can pin down the method that isn't firing (I add a little function when I'm developing called DBG which I'll add below – basically, if a debug flag is set, you log to the console), you can try rewriting the function.
// Some sort of boolean flag.
var debug = true;
// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
debug ? console.log(str) : return;
}
I still think ultimately this boils down to something caching wrong, but it's worth a try.
I encountered similar issues, the drop event appeared to not be firing. Safari apparently expects the "dragover" event to also be bound. As soon as I also added that, it worked. So ... I'm sharing in case it's relevant.
My first attempt:
$(document).bind
drop: (e) ->
// This never gets fired in safari (does work in chrome)
console.log e.originalEvent.dataTransfer.files
false
My "fix":
$(document).bind
dragover: (e) ->
console.log e
false
drop: (e) ->
// This does get fired (in chrome and safari)
console.log e.originalEvent.dataTransfer.files
false