Does the iPhone browser have special events that I can hook into with Javascript? For instance, if the users slides to the left, I would like to perform a certain action. If there are events like this available, it would be nice to see a reference for all of them. ideally, there will someday be a standard for all touch-screen mobile browsers.
You can access multi-touch events and gestures, but there is a fair amount of under-the-hood plumbing you'll likely have to handle yourself. Here is Apple's guide:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
As an example of what can be done with a MobileSafari web app, check out this article on Apple's in-house "PastryKit":
https://daringfireball.net/2009/12/pastrykit
Particularly, you can use Safari on Windows or Mac (if you enable the developer menu in the preferences and set the useragent to MobileSafari 3.x) and check out the way it works.
Another UI library to look at is jQTouch:
http://www.jqtouch.com/
jQTouch really does the thing.
http://jqtouch.com
http://code.google.com/p/jqtouch/wiki/CallbackEvents
Do you really mean "when the device orientation changes", perhaps? If so, you may want to bind to the onorientationchange event.
There's a useful reference of all on* events at Apple's Safari Reference Library.
Perhaps the onscroll, ontouchstart, ontouchmove, or similiar events are what you're looking for. All listed on the Safari HTML Reference page.
Related
I'm searching for a method how to detect if the device is handheld.
Currently I'm using http://detectmobilebrowsers.com/ but I don't like the whole userAgent string detection method.
I came across this script (http://kangax.github.com/iseventsupported/) that tests the support of events in browser and it made me thinking what if I'll just test "mouseover" or "touchstart" event or both to deside if the device is handheld.
In my project I need to detect if the input password supports showing the last typed character like in iPhone or Android.
So what do you think, is the event detection approach good or is there any better solution?
UPDATE:
I decided to use (detect) the support of orientationchange event in browser.
I simply can't find anything in the docs or anywhere on how to detect a simple pinch-zoom Gesture on a touchdevice with jQuery Mobile? I would also considering using another library or anything. I just want to detect if the user is trying to scale the content on the website.
So I don't need to handle a pinch gesture on an element of the site but on the site itself. I just want to listen for a pinch gesture on my website.
Any idea how to do that?
thank you
The vendor support varies and iOS the only platform whereto use multi-touch Javascript events reliably.
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW8
From Apple's own documentation.
There are JavaScript events for desktop web, e.g. mouse over, key press, etc. etc.
My question is why there is no JavaScript events for mobile web? e.g. fling? orientation change? etc. etc.
What if a web developer wants to write web pages specifically for mobile devices? How can they take advantage of phone specified user interaction (like the ones I mentioned)?
jQuery and other mobile application frameworks offer extended events for mobile devices. See some of the options below:
Sencha Touch
jQuery Mobile
There are JavaScript events for desktop web, e.g. mouse over, key press, etc.etc. My question is why there is no JavaScript events for mobile web?
There have been (relatively speaking) decent web browsers for desktops for a lot longer then there have been decent web browsers for mobile devices, so these things haven't been standardised. That doesn't mean they don't exist though.
A decade later and they are well supported and standardised.
Some events you can listen for include touchstart, ScreenOrientation.onchange, and devicemotion
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)
Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
Another solution is to use .mousemove() instead of .mouseover().
iOS ignores the .mousemove() event and triggers a click on the first touch.