JavaScript events for mobile web? - javascript

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

Related

Capturing scroll events on third party websites?

I am trying to compare scrolling behavior on a mobile vs desktop website. The plan is to let participants scroll on a mobile phone and desktop in a lab respectively for x minutes. Therefore, I have full control over the devices.
How do I capture the scrolling events on third-party websites such as Reddit? Google Chrome has a feature called performance insights to track user behavior, but it does not record scrolling.
What are some viable alternatives to record the scrolling of users on mobile and desktop?
I think the simplest way is to create a bookmarklet that injects a tracking script into the website you want to track.

Desktop HTML Kiosk with Touch support

I have to develop an application in html/js for a kiosk.
This Kiosk will be displayed on a Windows Touch screen, with "Windows Touch" capability.
It seems that there is some frameworks to use the gestures on mobile plateform, but I found nothing for a Desktop with a Touch Screen.
Is there a mean to use a "Slide gesture" on an html page, (for example to slide a big panel), opening the page in a browser in Windows 7, on a Desktop computer?
Thanx in advance for your help
Support for proper touch events in the browser is a browser-by-browser consideration. In IE 10 and 11, Microsoft have abstracted the concept away from Mouse and Touch events to what they call Pointer events and Gesture events respectively.
With your specific request for a "slide gesture" for interacting with a carousel, there's a specific IE Blog article on the topic.

Handheld device detection based on supporting js event

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.

debugging css ipad

I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.

Handle iPhone Events (like slide-left) in Mobile Web Site

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.

Categories