Bootstrap modal showing then disappearing right away only in BB10? - javascript

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');

Related

Different behavior with pointerType mouse vs touch in dom-event

I am trying to develop a simple UI for my Web application where a client can click on an image and
a popup appears explaining the content of the image to the user. The way I intended this feature to
work is that by clicking on the image the popup appears and by clicking anywhere on the page, INCLUDING on that image,
the popup should close and you are free to click on it again to show it once more. On the desktop version, everything is working like a charm.
But on the other hand, when I switch to the mobile version of my UI in my browser, when I click on the image, the popup appears but when i click on it again,
an other popup just go stack on top of the other. If i click anywhere else on the screen, it close them but not when i click on the image like it should.
My question is: Does anyone knows why this type of behavior is happening and how i can fix this ?

Iphone - Safari - detect swipe navigation

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.

What would cause click events to stop working in Internet Explorer 11?

I'm sorry for the vague question, but I'm dealing with a very vague bug.
Sometimes, in IE 11, my app just "dies." The pointer changes when you hover over a clickable element, but left-clicking does nothing, nor does right-clicking. Hover also stops working... if you hover over an element that has :hover CSS, the :hover CSS doesn't work. This only happens on specific pages, but not all the time... sometimes you load the page and clicking works, sometimes you load the page and clicking doesn't work.
If I hit refresh, clicking starts to work again.
If I use the keyboard to tab to an element and press "enter," I am able to follow a link I wasn't able to click on.
No errors in the console window.
IE version is RTM 11.0.9600.16428, running on Windows Server 2008 R2. I think it has also happened on Windows 7 and 7 Pro machines. I can't reproduce it on my Windows 8.1 machine with IE 11.0.9600.17728--clicking works consistently there.
Is it possible that, somehow, all the click handlers are getting taken off of everything? Even the window itself? That would explain why right-click stops working as well as left... I can't even get a context menu to use "View Source" or "Inspect Element." Nothing!
In case anyone else stumbles upon this: The problem turned out to be a bug specific to IE 11 for Win 7/Server 2008 R2. It doesn't happen in IE 11 for Win8.1+ or for any other browser.
Here's more info on the bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/205775/
I "fixed" it with one line of CSS:
use {
pointer-events: none;
}
I had a similar problem.
The text was entered into the input, after pressing Enter, an event onKeyDown was called, and the data was reloaded with recreating input element as well.
After that, the interface elements did not respond to mouse clicks. But as soon as you click on the different elements - it started working again.
My solution: before reloading the data, I had to trigger blur for the input.

Android fastclick issue

I have two different pages with a clickable element
located on the same position. On the first page there is
a menu button which will open up if a user clicks on it and
on the second one, in the exact same position there is a back
button which will redirect the user to the first page.
Now to the problem; whenever a user clicks the back
button on the second page he will be redirected to the
first page which is intended, but it will also open
up the menu automatically which it shouldn't do.
I am building an app with PhoneGap where i am utilizing
the fastclick library in order to eliminate the 300ms click
delay. If the fastclick library isn't used, the
application works as expected but then it wont feel as responsive.
The fastclick library works perfectly under iOS environment.
What could be causing this undesirable effect?
I think the problem is more because the click on loaded on a mouse event and not a touch event that you are experiencing this issue. Can you try loading the event handler on a touch event instead ?

Dynamically generated onclick triggering the wrong event in IE

So I have a 4 window frameset that is setup so that when the main content page loads, it changes the menu options on the left frame menu. Everything works correctly in FF and Chrome, but IE is giving me a problem. I think the problem lies in the javascript.
In IE, the menu items correctly change text, but when clicked on seem to trigger the wrong link. I have an example setup here.
Click on Customer Login on the left, then Sign Up in the main content area. From here, if you click on New Order/Browse, you'll arrive at the Create Order screen when using FF or Chrome. In IE, you'll find yourself back at the login screen.
I need help in getting the menu links on the left working correctly in IE7.

Categories