I'm having a bit of a problem with mobile safari's swipe animation:
I've created a popup window of sorts, for the search functionality (with a similar purpose and look to ebay's mobile site. Go to ebay on mobile, and focus on the search field and it will overlay a sort of popup over the entire site)
The difference, however, is that I've added a pushstate command so that when you open the search popup, it advances the browser history. That way, if a user wants hits "back" on the browser, it'll just close the popup instead of going to whatever previous page the user came from.
Another thing is that I've created an animation for the window's appearance and disappearance. So when you focus on the search field, the popup appears by sliding from right to left, and also goes away in a similar fashion.
Here's the problem, though: iPhone's swiping navigation functionality destroys the sliding effect -
when you open the popup, it advances you forward in the browser's history. Now, if you try to go back by using the swiping functionality, it shows the sliding animation of the previous page into view (iPhone's default), but then, as it's done, my code kicks in (because ultimately, it triggers the popstate event) and also does the sliding animation, so it looks broken. So, as a result, the way it looks is: you swipe to go back to the previous page which shows the search popup being pushed out of the view (just like my animation), and then when you're done, boom, the animation reappears, and plays again.
Ideally, I'd like to be able to detect the swipe functionality somehow. That is, some event, or something in the popstate event to indicate that a swipe navigation is, or has just occurred?
Or perhaps, being able to disable safari's default effect? (to which the answer, I suspect, is a big fat NO)
Is there anything I could do about any of that stuff short of disabling my custom animation when I detect safari, or doing away with the pushstate functionality?
Any advice towards a solution would be highly appreciated.
Related
I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).
I am new to JQuery Mobile (1.4.5) and have just finished my first project with it.
The only problem is with page transitions on iOS7+ (in my case the slide transition). While they work fine within the site and back/forward buttons, if someone swipes the left or right edge of the iOS device to navigate browser history, there's a double transition, since the native iOS slide and JQM's slide happen in succession. This appears to be an issue with any page transition (except "none" of course). It even happens on JQuery Mobile's demo pages. I've seen others report this issue with no reliable solution.
Since there is currently no way in iOS Safari to detect history swipe events, I figured the next best thing is to turn off transitions (set to 'none') but only if back/forward events are triggered (which I assume also applies to the swipe left/right for iOS7+). I know I'll lose the transition on the back/forward buttons, but they would still work within the site so that's a compromise I'm willing to make. However I'm not sure where to go in JQM's code to achieve this.
TL;DR: Is there a way to set JQuery Mobile page transitions to 'none' only when the browser's back (and/or forward) button is pressed?
According to this article, yes you can. When browser's buttons are used, options.direction returns either back or forward. And then change options.transition to none.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (data.options.direction == "back" || data.options.direction == "forward") {
data.options.transition = "none";
}
});
First things first: I'm not including the modal plugin twice as is the culprit on most similar questions - this issue only affect BB10 as far as I can tell - so that's clearly not the case.
As I said, in BB10, the modal is opening then disappearing right away. If you scroll the page a little bit then it opens and stays open, but this is intermittent and only works at certain scroll points...
2 questions:
Do you know what the issue is?
Is there a way to debug BB10 browser like the 'inspect element' through safari that iOS has.
Here is the site: http://www.thomasdexter.me/intravillage/
And some videos of the issue and the scrolling thing:
https://dl.dropboxusercontent.com/u/13675289/Video%20(1).MOV
https://dl.dropboxusercontent.com/u/13675289/Video.MOV
Edit: to get a popup click the 'sign in' link in the fixed menu bar or sign up now on the introduction slide/page
I've determined the underlying cause of the problem - it is a blackberry issue - and I've got a workaround that works but does not fix the blackberry issue that causes it.
I was able to deduce what's happening is that the blackberry is registering 2 touches instead of 1 for some reason. The first touch opened the popup and the second touch, if the button/touchpoint was in the same pixel area as either the 'close' button or the translucent black underlay that also closes on click, would register as a click on the button/underlay and close the popup right away. That is also why it was happening intermittently, if the button to open the popup was in the area of actual popup then it wouldn't close because the second click registers in a non 'closing' area.
TL;DR: It's a blackberry issue that they need to fix.
The solution was to disable the 'click to close backdrop' via 'data-backdrop="static"' only on blackberry.
I used the following in JS:
In the section where I check for supported stuff and add classes I have this:
if(/BB10/i.test(navigator.userAgent)) {
//BB10 Device
$('html').addClass('bbten');
}
Later on just before I register the click events to activate the modals, I have this to add the static (not click to closeable) backdrop if it's BB10 (3 different modals #contact, #signin and #signup):
//bb10 double click issue
$('html.bbten #contact, html.bbten #signin, html.bbten #signup').attr('data-backdrop','static');
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
In Opera, on some sites, pressing both mouse buttons simultaneously leads you to some other page,
for example, to the separate comments page, when watching a Youtube video.
Or to the sitemap on some other websites.
May be it is related to Mouse chording ? or is it something different ?
How to control this event (disable it or change the destination page) ?
This is one of Opera's shortcuts for quick back/forward navigation. Holding left button and clicking right takes you forward, holding right and clicking left takes you back.
Opera also uses some heuristics to try to guess what the best 'next' link is if a user tries to go 'forward' but there is no page in the navigation history to go forward to. To control this, you can for example use a rel=next LINK tag to point to the next page. This is most convenient if you have, say, an article split across several pages. On the first page you could put
<link rel="next" href="secondPageOfArticle.htm">
To indicate to the browsers (and search engines) what the next part of the article is.