Mobile Browsers - Tap event/psuedo event for navigating a site - javascript

I am looking to try and make my current mobile site have the look and feel of a native app for iOS, Android and Windows Phone by giving the user some feedback when they click a link.
What I am looking to do is when a user clicks a link it changes the background colour of that element to show that they have interacted with that element. I've tried using :active, :focus and :focus for these but they have different interactions on all the different platforms.
For instance if you use :hover on an element, when scrolling on iOS in Safari the background colour changes even though you're trying to scroll.
An example of what I'd like to do can be seen on http://bbc.co.uk/news but it seems they're using JavaScript to add a class that changes the colour of the text.
If I can get away without using JavaScript I would be greatful, but if this is the only cross-platform way of doing this I guess I'll bite the bullet!
Thanks in advance

Related

How can I get a WKWebView to show the keyboard on iOS?

My iOS app uses a WKWebView with contenteditable = true on a specific div. I'd like to have code to make the keyboard show up for the web view, so the user can just start typing. Things I've tried that have had no effect:
Telling the web view to becomeFirstResponder (a long shot, because the web view wouldn't know what div to use).
Injecting JS to tell the div to focus(). (This works in other browsers, but sadly not in WKWebView)
Simulating touch events in JS via TouchEvent and dispatchEvent() in the hope of making it seem that the user had tapped on the div.
In the third case I also used addEventListener() to observe the simulated touches and compare them to real touch events from tapping the screen. It looks like the key difference is that the event's isTrusted value is false for the simulated touches.
I get that it's a potential security issue to let apps simulate touch events, but I didn't have any other ideas. I'm trying to get the keyboard to appear, what the user types is up to them and not something I want to mess with. Basically I want the same thing as calling becomeFirstResponder() on a UITextView.
This is very similar to a WebKit issue 142757 but I haven't figured out how to use the suggested workaround linked from there.
Clarification: I can set up and use an editable web view, but the keyboard doesn't appear until I tap on the web view. I'm trying to make the keyboard appear automatically, without requiring a tap to initiate editing.
I tried this in an iPad playground, and it works without any action on my part. It’s possible there is another view that is capturing touches, or “contenteditable” is misspelled, or something else?

How to use mobiscroller *instead of* input?

I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!
You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.

itemtap event not firing on all taps

I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?
This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.

Proper touch button behavior for MobileSafari

MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:
User touches button: Button highlights
User drags finger out of button: Button dims
User drags finger back into button: Button highlights
User drags finger out of button and releases: Button does not click
MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).
This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.
I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).
Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.
I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.
Live JSFiddle DEMO
Try it on your iOS device (and maybe your Android device??).
-
brian

How to prevent the 'Save (image) as' dialog on Ctrl+click in Opera

I have to create an image gallery where user can select some images and then process them. The selection should be done via Ctrl+LeftClick of the mouse. It works well in FF and IE8, but when I Ctrl+click in Opera, new dialog "Save as" appears which causes saving the clicked image.
How do I prevent opening the dialog in Opera? (it's probably system setting)
I haven't still found any solution. The question at Opera remains unanswered since June,2008 :(
Is it even possible? Ctrl+Click is standard way in OS, that's probably the problem - adapting desktop behaviour to web.
In Opera, it is possible to set this behavior in Tools->Preferences->Content->JavaScript Options->Allow script to detect context menu events. This is unchecked by default, which means that most users will see the browser's context menu.
This was added to prevent "context menu hijacking"; unfortunately, this limits all browser apps to the left mouse button. You could have the user rightclick->Edit site preferences->Scripting->Allow script to detect context menu events; this should allow your site to use this functionality.
I don't believe this is possible - I'd advise a different key mapping for Opera (or indeed all browsers)
For example, Opera has an option where the right click context menu cannot be disabled by javascript - as a protection for Opera users.
Can you make it just a click? that would toggle each picture. e.g. first click selects, then if you click it again, it deselects.
Something like this... where you can visually see what has been picked.
If you're attempting to prevent people from saving image it is pointless. All the user needs to do to get around context-menu-hijacking is disable JavaScript temporarily on that page, or press PRINT SCREEN.
This should work:
<img src="myImage.png" onclick="event.preventDefault();">

Categories