So check out http://www.toyota.ca/toyota/en/vehicles/yaris-hatchback/gallery using ios 5/mobile safari 5 or simulator press an image on the scroller at the bottom and a lightbox pops. Try to press the next button, you noticed nothing happens. Now if you zoom in/out or change orientation or scroll the page, the image will change.
The js works because the next/prev will become enabled/disabled as you press them but it does not do the animation part until further action. Why is this? is this common? If you try the same page on ios 4 it will work fine.
Don't use a click() handler, use a mousedown() handler.
Mobile devices have a hard time discerning between a click() and a mousedown().
The necessary change is line 472 in common.js, change
var o=p(f,c.prev).click(function(){b.prev()}),q=p(f,c.next).click(function(){b.next()});
to
var o=p(f,c.prev).mousedown(function(){b.prev()}),q=p(f,c.next).mousedown(function(){b.next()});
Either that, or, for every such navigation button, on creation, use:
$(selector).bind('mousedown',$(selector).data("events").click[0].handler)
$(selector).unbind('click',$(selector).data("events").click[0])
Where selector is the jQuery selector for the particular element.
Or you can just use $(class).off to clear the handler once and for all.
Related
I am running a keyframe animation on the body element of my page that fades in and out the opacity of the background. The fade in animation is run directly on the body as a CSS rule, and the fade out is triggered by setting a class to the body element, when special links a clicked. The implementation works great on Android Chrome browser, and desktop Safari, Chrome, Firefox, IE11 and Edge.
The fadeout animation also works great when I click a link from an iOS device, but once I use the native back button in Safari it seems that the page just goes back to a previous view that it saved of the last page, without running the fadein animation again. Therefore the page looks broken.
How can I handle this? can I somehow force the iOS device to reload the page when I navigate back? or Would there be another way to handle it?
Safari does not "reload" the page when you hit the back button. One common workaround is to add some code to the footer of the page to tap into the pageshow event. You could then do something like.
const reloadAnimation = () => $("#my-element").removeClass("run-animation").addClass("run-animation");
window.addEventListener('pageshow', reloadAnimation)
The essence of the problem is releasing a touch on an element count as click event on an overlay element which is displayed during the touch and hold.
How can I prevent that from happening?
<https://jsfiddle.net/24r1s6nf/1/>
I have recreated this problem in jsfiddle. The problem only happens in mobile browser. Once your tap is finished, the overlay script gets triggered unexpectedly.
I have a script to display a modal on a webpage when an element is pressed/touched for over 1 second, and also display the overlay. The overlay has a function to hide modal when clicked.
The workflow works as follows:
press and hold element h1 for 1 second on z-index 1
display modal on z-index 3
display overlay on z-index 2
The problem is when I release the touch in mobile chrome IOS, the overlay has also been displayed under the touched location. So when I release the touch to display the modal, the click event is automatically triggered on the overlay and also the hide modal script, which is not what I intended to do.
Is there a way to force release a real touchend event on element so that I can use to call before overlay starts.
I tried the following which doesn't work.
var myevent = new Event("mouseup");
myelement.dispatchEvent(myevent);
or
var myevent = new Event("touchend");
myelement.dispatchEvent(myevent);
event.stopPropagation() doesn't work.
I solved it by adding event.preventDefault() inside touchend.
I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?
These would also trigger on clicking the right mouse button. ---> this is :active state of the element
Maybe this link will help you:
iPad/iPhone hover problem causes the user to double click a link
(sorry, I'm not allowed to add comment yet)
After having browser screen out of focus for a while and working in another window, going back to that screen mouse click event have stopped working and I'm not able to click any <a/> links or trigger any ngClick direcitves.
This doesn't happen on any other site, so my guess it has to do something with my angular app, but the problem is - I cannot 100% replicate the issue and I don't know where to look for the problem.
I'm wondering has anyone else had this same issue and if they have resolved it.
How to make the click event work: Click on any element in developer tools to highlight it and voila, the click works again.
Notes:
Left click / Context menu works
Mouse position events work
Mouse enter/leave events work
<a/> links are not wired with any jQuery or any other event handlers that I know of
Update 1: Cannot seem to replicate this issue in IE11
Browser set-up
Chrome: Version 49.0.2623.112 m
Developer tools always open
<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a>
Also:
- A setinterval refreshes the sibling's content every sec, shouldnt matter for this element, i disabled it and still wont work.
- it has a css3 transition effect on it (when hovered)
- normal chrome and chrome canary won't open these links, still, it appears at the bottom, and right click is possible, middle + left click aren't working.
- works in every other browser.
edit 1:
Long code comes, becouse i have no idea what causes this.
http://pastebin.com/bSnTYAEG
link at line: 79 - 86
edit 2: Without the transitions it still doesnt work, mouseover function keeps refreshing its content when the mouse moves / does something on the main container. (imo it shouldnt do this)
+Not working in safari too.
Changed mouseover to mouseenter, working now. I really should've read the JQuery event docs.