I have a web application in which I have a div element with an onclick javascript action. This web application works fine on iPads and desktops alike.
When it is launched within an iFrame on an iPad, however, all of the sudden, my clicks/taps are rarely and inconsistently acted upon. When running in an iFrame on a desktop browser, I do not see this behavior.
Has anyone seen this type of behavior before?
I'm not sure about your exact situation, but I was having a similar problem when my botton had a "mouseenter" event trigger binded to it. The mouse enter would be called on the first "tap" and the button would be called on the "second". Because of the way ipad uses those two events.
My solution was to use the browser detection tool from http://detectmobilebrowsers.com/ and set a var ismolible = to true or false, depending on whether the browser was mobile or not, then I used an if statement to unbind my mouseenter immediately if the browser was mobile. You do have to modify the http://detectmobilebrowsers.com/ code for ipad.
Hope this helps!
Related
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
It is well know that Mobile Safari pauses Javascript execution on a webpage when
you switch to different browser tab
switch to a different iOS app (e.g. when you get an incoming call the phone app)
You can subscribe to the window's "pagehide" and "pageshow" events to detect imminent suspension and reactivation of Javascript.
The problem is, those events do not fire when tab-switching (1.) on an iPad Mobile Safari. On an iPhone Mobile Safari everything is fine, just as described above.
It's trivial to demonstrate:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener("pagehide", function(evt){
var logger = document.getElementById('log_id');
logger.innerText = logger.innerText + " pagehide fired!";
}, false);
</script>
</head>
<body>
<div id="log_id"></div>
</body>
</html>
It fires on iPads (iOS5 and iOS6 Preview3) only when doing app-switching (2.) and not on tab-switching (1.). All iPhones work fine..
Has anyone been able to detect an imminent tab-switching on the iPad browser?
The reactivation of Javascript when the tab becomes active again can be detected by a heart beat loop as described in this discussion of the same topic.
Try to check focus and blur on document.
Why you need Page Visibility API?
You can use storage event to say other pages, who is active.
You can use timers (setInterval) to check time from last timer fire. And if its more bigger than expected - page was hidden, because most browsers stop timer then page is hidden.
I agree with Pinal: Use focus/blur! But i suggest not on document, but rather on window.
Just register a listener to them and do your stuff in there.
As http://caniuse.com/#feat=pagevisibility states, the feature you want to use is not well implemented. (Edit: Just tested it in a mini test-case - it works on iOS 5/6 - even though caniuse.com asserts different)
If you try to use a timer, you could try requestAnimationFrame as an alternative to setInterval.
Fixed by Apple in iOS7.
(Just tried in the iPad Simulator)
Following from Sebastian's answer, these days (comparing 2013 to 2021) page visibility works reasonably well: see https://www.w3.org/TR/page-visibility/#example-1-visibility-aware-video-playback for more around subscribing to 'visibilitychange' for hidden/visible states.
This seems to be more useful than focus/blur these days as it covers visible-but-not-selected windows if concerned also about multi-window operating systems.
I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).
Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.
What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?
Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.
You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.
In PHP for example you could do something like:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)
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.
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.