We Keep Coding

Button click requires double click or long-press on mobile

I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.
I have replicated my problem in this demo.
If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.
Why is this not working properly on mobile? How can I get the button to work when I tap it?
I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.
This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.
EDIT: Solved. See my answer.

Turns out it works if I fix the stacking of elements. I had nested my navbar component inside the MapContainer, but this was making things wonky mobile-side. I moved my component outside the MapContainer, and things worked.
I still don't understand why it went wonky mobile-side and in iOS only, but this problem at least is solvable.
Fixed example is here.
My map token has been removed, so you can use your own to substitute, but it is not necessary to have the map showing to see the problem/solution.

What is the event that occur on the browser when Firebug is enabled?

I am working with SPRFlat Boostrap template. I am facing a problem, when I maximize the browser window after I minimize it. That is some CanvasJS graphs overlap. I need to refresh the page to fix the issue. However, when I enable the Firebug to debug the issue, I noticed that all the panels get reset.
I try to work with jQuery reset but it create another issue. My question is when the Firebug is enable what is the event occur on the browser? If I know it then I can handle the issue.
But if anybody can give me a hint to fix my main issue, that's also appreciated.

Firebug does not expose any event to the website content.
To avoid Firebug influencing the viewport dimensions you can detach it using the button at the upper right side of the Firebug window.

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?

Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars

Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()

For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

Bootstrap modal showing then disappearing right away only in BB10?

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

jquery scrolling help

Is it possible without the help of a plugin to make a page scroll to a certain position on the click of a button?
Basically, if the user clicks a button a popup gets displayed in the center of the screen, if the user uses the button at the bottom of the page, the popup is sometimes out of view so I am wanting to couple the showing of the popup and scolling to the top of the popup on the clickup.
Is this possible?
Thanks

Using the CSS
position : fixed
is the best bet for your problem.
In case if you would like to know the way to scroll the page to certain position using jQuery then here it is.
Use jQuery's scrollTop() function in the following way.
jQuery(window).scrollTop(<position>);
Using jQuery to handle scrolling will also resolve any browser incompatibility.

You can get that effect with the scrollIntoView method. But it's probably better to centre your popup on the window rather than the document to avoid the problem in the first place ...

Sometimes lean and mean works nicely. No Plugins, No JQuery:
window.scrollTo()
Watch out for cross browser incompatibilities that might creep in. That's the point of JQuery ;)