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.
Related
I'm trying to create a "re-launch" button that should bring the user to an existing opened tab. So far, this is how it's implemented:
Using window.open() initially to create the tab and focusing to that tab using window.focus().
The relaunch button should basically call window.focus() and redirect to that tab.
This has been asked in $window.focus() doesn't work on existing tabs in iOS Safari but I'd like to get a more general overview on this question. I've looked everywhere but I couldn't find any lead to this question.
Apparently, it works in android browsers but I can't get it to work in ios browsers (safari, chrome). Does anyone have any clue about this issue?
This seems to be a bug in iOS browsers. As a workaround you may replace
focus() by a sequence of close() and open(...).
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.
Dropdownlist on my MVC4 application using modernizr 2.6.1 running on IE9 shows unexpected behavior. It works fine on FF and Chrome. It also works when modernizr 2.6.1 is unreferenced.
The problem is that when a page loads up some of dropdownlists open up by clicking on them, they also accept keyboard inputs but some of them don't accept inputs(mouse and keyboard) at all. But after few random clicks, some of them start working when they get and loss focus few times.
How do i troubleshoot this problem?
Edit
It is confirmed that something is wrong with modernizr, i removed all the scripts except modernizr and the problem is there and the problem is gone when just modernizr is removed.
I have a simalar problem with IE, Modernizr och jQuery UI Slider element. Works in Firefox, but not in IE. If I remove Modernizr, it works in IE as well.
Modernizr does not work with IE, simple !!!
Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.
contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/
It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.
If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.
If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/
I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.
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.