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.
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
While testing my application with different devices I found one weird problem in android browser in android phones.
I have almost same design for PC and and mobile, in PC and in iPhone and mobile Chrome browser its working fine.
<a type="cart_type" onclick="ajax_submit_for_new_order_session(81, true);
return false;" id="81" href="javascript:void(0)">
<i class="icon-plus-sign"></i></a>
Above is the code for my anchor tag, When I click on this anchor tag sometimes its calling the specified method and sometimes its not.
I am totally confused and scratching my head from so long for finding the issue but no luck.
Is there any problem with onclick in mobile devices?
Solved the issue by updating the jQuery version to 1.11 earlier I am using 1.8
instead of using onclick now I am using touchstart or mousedown
this Solves the problem in all devices..
Its not problem with the code.. the delay taking by the browser is sometimes about 5 sec.
I am using jquery mobile 1.1.1 with android 4.0.3 and phonegap. Everything seems to be running smoothly and on iOS and the earlier android versions however, on this version of android stuff is displaying incorrectly. I am dynamically creating an unordered list and then calling $('#myList ul').listview('refresh'); on it. However when it displays it looks like this:
Then I click the screen and it flickers and displays as this(notice how I lose the footer):
Is this a bug with android 4.0.3? Is there a way to get this to display correctly off the bat?
I had it today. I don't know if you're in the same case as me, but I used -webkit-backface-visibility:hidden css attribute to "correct" the white flash with previous version of jQuery Mobile. But in the 1.1.1 with PhoneGap, I had the same thing than you.
So if you use it, just remove it ! If not, I'm sorry for you...
I have the following test, I've been slamming my head against the wall trying to make it to work on mobile safari, it works on Android aswell as all the major web browsers - but doesn't run on mobile safari on iPhone 4, iOS 5.0.1, Any help would be appreciated.
All the JS is there.
Edit: what's not working is the close 'X' button.
test case
This is a bug in jQuery 1.5! live() has some problems with mobile Safari!
Solutions:
Update to current jQuery
Add CSS cursor: pointer to the .close element
Use click() instead of live and place this event handler inside doc.ready()
Other problems: The div#install-notice is not inside the body tag! Fix your HTML. And validate it.
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
You may need to write this from scratch. Luckily, #ppk has coded up an example of drag and drop for iPhone.
Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.
You can use this library http://touchpunch.furf.com/
This provides touch events for all the jquery ui elements.
I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!
Link to source
You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.
I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.