$(".element").first().trigger('click') - not working iPad - javascript

I am using:
$(".first-image-gallery").first().trigger('click');
To create the action of clicking on a gallery of images.
The reason for this is I am using a 'Start Gallery' button elsewhere on the page and want this button to open up the first image of the gallery and then the user can move forward and back as they please.
I am using iLightBox for the gallery and can't find anything that it has build in to open up the gallery from another button or action via jQuery.
The current code I am using works fine elsewhere on desktop, but mobile iPad it wont work.

This is Mobile Safari oddity. Click events don't work properly on any elements without cursor: pointer; CSS property set on them.
Read more: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
This works on every standards-compliant browser. Mobile Safari chooses to differ, however. It does not generate click events for elements that do not have either or both of:
-Directly bound onclick handler.
-The cursor property set to pointer in CSS.
Therefore, your solution seems to be:
.first-image-gallery {
cursor: pointer;
}
I (almost) always resort to including cssua javascript library and including this bit of css, which solves this problem globally (page-wide), applying cursor: pointer; on whole page in Mobile Safari (but not in other browsers):
html.ua-safari.ua-ios {
cursor: pointer;
}

Try touchstart instead:
$(".first-image-gallery").first().trigger('touchstart');
And use this in click function too like .on('click touchstart',callback);

I have the same issue and I have tried set cursor:pointer to the element, it doesn't work.
It is pretty obvious that trigger 'touchstart' works pretty well with jQuery, but the problem is that I need to 'click' an existing element (button) programmatically, so I need to trigger 'click'.
In the end I found that using native javascript code works perfectly, so you can try:
document.querySelectorAll('.first-image-gallery')[0].click();
At least it works immediately for my case.

Related

iOS 3 - Click event on mobile safari

When I load my website on an old iPod Touch running iOS 3, my javascript (jQuery) doesn't work. I have a div that when clicked or tapped should toggle the display property of another div. It works on all other devices that I've tried it on, but all of them are newer. Here is what I'm working with:
$(document).ready(function () {
$("#mymenu").click(function(){
$("#listNav").toggle();
});
});
and
<a id="mymenu" class="clickable" onclick="" ><div class="clickable"><p>Menu ▼</p></div></a>
Some suggested creating a class that added cursor: pointer, which I have, but it doesn't help. I've also tried adding an empty onclick='' but that didn't help either.
I've also tried doing so with .on("touchstart"...) instead of .click, and even tried using a button instead of a div.
I wouldn't care for ensuring this backward compatibility but the problem is that this feature isn't working on the client's iPhone, so I HAVE to get it right.
jQuery only supports iOS3 up to version 1.12, so after that things could break.
Rather than downgrading your jQuery verision I would highly recommend telling the client to upgrade their equipment to something more modern. If you must support it, then use an older version of jQuery.

I have to click twice to activate any button action (Ionic/Angular)

I have an app which is an Ionic Project.
in android it is working fine. But when I build and run the project in ios I have to click Every button twice (double tap) in Simulator and in Device also.
I don't know what exactly is the issue. and how to debug.
Is their someone who knows what to do ?
Edit this is happening for Buttons and a tag.
I put this CSS:
.button:hover
{background-color:red;}
and when I run my project and click on button then this :hover css is applied and click event not triggers.
On iOS devices, I believe the first touch is seen as 'hovering' in a similar way to when you hover over something with your mouse. Essentially, the first touch on iOS is seen as hover and the second is seen as a real click.
You can listen for .hover events instead of .click events based on the browser, which will be Safari on iOS and Chrome on Android. Although some iOS devices may be running chrome, this could work for the majority of the cases, assuming it is possible with Ionic.

Show images with javascript Help needed

I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}

div top position on hover remembered after magnific popup initialisation

I've been working with magnific popup which is a fantastic little script. I've had one issue lately though.
I've made an example on codepen to isolate the problem - http://codepen.io/patrickwc/pen/xiajJ
Basically, when you hover over the figure element, figcaption moves up via changing the top value. Then I've made a link absolutely positioned over the entire of that figcaption element, so that when you click or tap again the link magnific popup window is activated. This part works fine, but for some reason in some browsers, when you exit the magnific popup window (close or clicking outside makes no difference) the figcaption element gets "stuck". I'd like it to return to where it was before the hover event, as it does in most browsers. But for some reason in IE11 and Chrome Canary (latest stable Chrome is fine) seem to remember that the element was hovered, and the figcaption box gets stuck there, unless you hover again.
Usual behaviour you can see in most browsers.
IE11 and Chrome Canary (Version 39.0.2152.0 canary) after closing popout window:
Interestingly this does not happen on browserstack. I have Windows 8.1 and Chrome Canary 37, as well as IE11 and the behaviour is fine on browserstack, but not on my or others PCs.
I realise I should probably use transform to get hardware accelerated transforms, but I need IE8 support. I'm going to see if transforms make any difference now, but I'm guessing they won't. Maybe I'll have to use js instead of the hover event to move the figcaption element?
So I got some help from the developer of magnific popup and a friend of mine who's a javascript wizz. The .open-popup-link a tag was being focussed, once the popup had closed. I found out about jquery's blur event and the following code fixed the issue, which only happened in IE11 and Chrome Canary (v38 and 39).
jQuery('.open-popup-link').on('focus',function(){
jQuery(this).blur();
})

Very strange iframe event behavior

This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.

Categories