Develop Reference

Remove button hover effect after tap on mobile?

I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.
On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.
I'm using Bootstrap 4.1.
Here is my button code, but there's nothing unusual about it:
<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>
I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).
I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.
$(".btn").mouseup(function(){
$(this).blur();
});
Suggestions? Thanks!
Update
So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(
.btn.btn-info {
background-color: #17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
background-color: #117a8b;
border-color: #10707f;
}

You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:
document.querySelector(".btn").onmouseup = function(){
this.blur();
});
or:
document.querySelector(".btn").onmouseup = function(){
document.body.focus();
});

Bootstrap Responsive Navbar for Phones and other devices

This is the website I am working on.
http://ankursinha.net/TestSite/index.php
It's stacking up properly, it's responsive, everything is fine apart from the following.
When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.
I know this is happening due to:
data-toggle="collapse" data-target=".nav-collapse"
But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!
I checked with Responsinator and the same problem occurs there also.
Thank You

Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.

How to autohide YUI2 Menu on blur?

I have a YAHOO.widget.Button of the type "menu". My task is simple: The menu is shown when the user clicks on the button, and is hidden when the user clicks elsewhere on the screen.
Here's my code on jsfiddle:
http://jsfiddle.net/tRssn/
What I've tried so far:
1. Setting the clicktohide property of the Menu widget to true (see above code)
and
2. Subscribe to the blur event on the Button/Menu widget and close the menu if it's visible.
Approach 1 doesn't work for some reason and approach 2 works with IE and Mozilla, but not Chrome.
Shouldn't there be an easy way to do this?
Any help appreciated!

Okay, I was able to solve this by explicitly creating a YAHOO.widget.Menu object, rendering it, and then assigning it as the menu to the YAHOO.widget.Button object.
http://jsfiddle.net/tRssn/1/
Strangely, I have to set the config for the Menu widget like this instead of at the time of the creation:
oButton.getMenu().cfg.config.clicktohide.value = true;

rules for "prevent this page from creating additional dialogs"

I try to understand Firefox's behavior regarding the added "prevent this page from creating additional dialogs" on dialog boxes.
Using jquery, if I add the following listeners :
//html
<input class="testInput" />
//javascript
$('.testInput')
.click(function(){ alert('clicked') })
.keyup(function(){ alert('keyup') })
When clicking on the input, the alert box appears normally, until the
~13th time.
When hitting a key, on the other hand, the second message box already
appears with the message "prevent this page from creating additional
dialogs". Actually, there seems to be some tiemout, and if I wait
like 2 seconds between two keystrokes, the message disappears.
From my informal tests, 2. actually applies whenever the alert box is not called from within a onclick callback (e.g : keyup callback, displaying an alert box in answer to an ajax action...)
I am using Firefox 9.0.1 under Ubuntu, as far as I know I haven't tweaked firefox's settings regarding these thresholds.
I imagine it happens with any recent version of any browser.
I am using the jQuery library, but I don't think it is relevant here.
My question is :
What are the exact rules which make this warning appear in a dialog box ?
[Edit]
Using Chromium/Ubuntu (version 17.0.963.26), the threshold seems to be only the delay between two dialog boxes.
You can test this from jsfiddle here (thx Rory McCrossan)

The exact rule(s): A timed interval between the dialog boxes popping up.
The value used to determine this is set in SUCCESSIVE_DIALOG_TIME_LIMIT
Check out line 2614 in the link below the snippet:
nsGlobalWindow::DialogOpenAttempted()
TimeDuration dialogDuration(TimeStamp::Now() - topWindow->mLastDialogQuitTime);
if (dialogDuration.ToSeconds() < Preferences::GetInt("dom.successive_dialog_time_limit",SUCCESSIVE_DIALOG_TIME_LIMIT)){topWindow->mDialogAbuseCount++;return (topWindow->GetPopupControlState() > openAllowed || topWindow->mDialogAbuseCount > MAX_DIALOG_COUNT);}topWindow->mDialogAbuseCount = 0; return false;}
Link to source

You can kick around the Firefox source if you like. Note that different browsers will have different rules.
The relevant code for Firefox is in nsGlobalWindow.cpp and nsGlobalWindow.h (the links below are to line numbers, and so will slowly rot as the source changes). It appears to be controlled by the constants MAX_DIALOG_COUNT (10) in nsGlobalWindow.h and SUCCESSIVE_DIALOG_TIME_LIMIT (3, units are seconds). nsGlobalWindow.cpp keeps a count (mDialogAbuseCount). Apparently, the dialogDuration function either increments or clears mDialogAbuseCount depending on whether the dialog has been open longer than the SUCCESSIVE_DIALOG_TIME_LIMIT. The AreDialogsBlocked function uses the mDialogAbuseCount (in part) to decide whether they're blocked.
So in short: If you're repeatedly opening pop-ups and then closing them within three seconds, after 10 or so you'll trigger something.

cannot get thickbox to open / tb_show function ignored 2nd attempt

I have two links that should open up thickbox's in iframes but only one works (the one with the id of product_photo_zoom_url2). I have the following jquery code that works when this code (in first code box) s removed from the markup. This code loads a picture zoom function. See complete markup below. All that happens when the first zoom image is clicked is the page goes to the top so it seems that the .click bind is being ignored? How do I get this to work?
Here is a link to a sample page... When you hover over the product picture the zoom works but if you click on the picture it seems to follow the href"#" rather than the click bind. If I disable the zoom feature then all works fine. So why is the zoom messing up the click bind and what can I do to fix it so both Thickbox and the zoom work together.
sample page
onload="vZoom.add(this, '/v/vspfiles/photos/70367301P-2.jpg');" /
jquery code..
var titleattr = $("a#product_photo_zoom_url").attr("title");
function picurl()
{
tb_show(titleattr, '/PhotoDetails.asp?ShowDESC=N&ProductCode='+ global_URL_Encode_Current_ProductCode + '&TB_iframe=true&height=600&width=520');return false;
}
$("a#product_photo_zoom_url").click(picurl);
$("a#product_photo_zoom_url2").click(picurl);
$("a#product_photo_zoom_url").attr('href', '#');
$("a#product_photo_zoom_url2").attr('href', '#');
Here is the html code...
<a id="product_photo_zoom_url" href="/PhotoGallery.asp?ProductCode=70367301P"
title="70367301P Ignition Box">
<img id="product_photo" src="/v/vspfiles/photos/70367301P-2T.jpg"
border="0" alt="70367301P Ignition Box" onload="vZoom.add(this, '/v/vspfiles/photos /70367301P-2.jpg');" /></a>
<a id="product_photo_zoom_url2" href="/PhotoGallery.asp?ProductCode=70367301P" title="70367301P Ignition Box">

I assume you know that Firefox + Firebug are your best friends for debugging JS problems. If not, get thee to the addons.mozilla.org website pronto!