We Keep Coding

Switching from an open Bootstrap 3 dropdown menu to a different dropdown menu requires an extra tap on mobile

When a bootstrap dropdown is open, opening another dropdown requires two taps. This is because of an overlaying div that swallows all other input in order to close the first dropdown.
This is a known bug. According to the bootstrap documentation:
On mobile devices, opening a dropdown adds a .dropdown-backdrop as a
tap area for closing dropdown menus when tapping outside the menu, a
requirement for proper iOS support. This means that switching from an
open dropdown menu to a different dropdown menu requires an extra tap
on mobile.
However, the behaviour is not consistent. The backdrop overlay is not applied to dropdowns within a .navbar-nav, and as far as I can tell, everything appears to work just fine for me on my iPhone (Safari).
Check out this jsfiddle to see the different behaviours.
Does anyone know more about the iOS-specific issue that this is supposed to be for, and does anyone have a browser-compatible workaround for this?

I've posted some potential solutions in this jsfiddle.
1) Hiding the backdrop
.dropdown-backdrop {
display: none;
}
2) Applying .navbar-nav to the dropdowns (and removing the negative margins).
Working on Windows (Chrome) and iPhone (Safari). Not tested any more than that. Does anyone know any issues with these approaches? It seems too easy...

Apparently this is due to "click" events not bubbling up to the body properly in iOS Safari, which would make Bootstrap unable to listen for dismiss clicks with one global handler. It appears that a different workaround has been added for Bootstrap 4 so that a backdrop is no longer required:
https://github.com/twbs/bootstrap/pull/22426

Make menu go away when an item is clicked on mobile/tablet

I have a pretty specific problem which i am hoping someone can guide me in the right direction with.
Here is the website link : http://rimowaedition.com/
When on a tablet or mobile device the menu is condensed into a button. To chose anything on the menu
1. i have to click the button and it brings a drop down list.
2. Click on the page i want to go to.
3. click the menu button to close the drop down list or else it takes up the whole screen and i cannot see the page in the back.
Here is a screenshot of how it is: http://imgur.com/aV7RHwb
Is there any way to make it so that when i click an item in the drop down it automatically closes the menu and goes to that page.
Any guidlines or clues as to how i would go about doing this would be much appreciated since as of now i am pulling my hair out .

You can set a click event on any item in the menu lists that you click.
So...
If you're using jQuery
$('list-item').click(function() {
//Remove the class that causes the menu to be open
//Perform any actions that you need after the button is clicked
//such as loading another page
});
This can also be done in vanilla javascript. Just search up click events in javascript.

Use JavaScript Use JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
on the click event of any of the
> <a href>'s
in the menu to hide the meUse JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
nu.

JavaScript onFocus and onClick forcing 2 clicks on a dropdown menu in IE7

$('fltr1').onfocus = function() {
$('fltr1').setStyle({width: "auto"});
}
Using Prototype.js, I'm trying to make an IE7 compatible dropdown menu box change width to auto when the user clicks it. As it is now, when the user clicks this box, it successfully expands it's width, but the box doesn't open until you click again, requiring 2 clicks. The first click expands, the second click opens the box allowing you to select an item. It's like the first click triggers the set width event, then stops everything else and forces the dropdown shut. I've tried onclick and it does the same thing, adjusts the width but closes the dropdown until you second click.
How can I stop this from requiring two clicks? What is causing the dropdown to close when setting the width?

I don't think you can make this work with your current approach in IE7. When the browser repaints the select box it closes the dropdown. You'd think it would be possible to manually re-open it with the click event but that isn't possible with the native select box, see this discussion:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
As a workaround, you could move the resize to the mouseover event? Maybe for IE7 only if you want to preserve the behaviour in other browsers?
$('fltr1').onmouseover = function() {
this.setStyle({width: "auto"});
}

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.

Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?

Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

Designing UI for a Google Chrome extension

I'm writing a plugin for Google chrome that works similarly to the Adobe's web-capture plugin for Mozilla Firefox. I need some help designing the UI for the extension. As of now, the extension has a button, next to the wrench icon, that, when clicked, converts the page to a PDF file. I need to add a drop-down menu, just as it is on Firefox, which should display other options for conversion, and providing the same functions in context menu as well. I'm not sure if it's possible to have a main button and a drop-down menu button, where the main button initiates conversion directly, and the drop-down menu button shows the drop down menu showing other options, in Google Chrome as nothing is mentioned about it's possibility on the Chrome Extension development page. I could probably have a pop-up page but that would come up when I would click the main button. Could someone help me with this? If it is possible to have a both main button, and a drop-down menu button, then how should I go about doing it? Or if it is that I would have to use a pop-up page to show the options, then where should I place my functions, which will be used by context menu APIs as well.

As far as i understand i wouldn't prefer having 2 buttons. What you can do is, have a drop down button and once that appears after clicking, you can have a big button inside that saying "PDFy my current page" and below you can have rest of the options. I guess having two button will unnecessarily bring confusion and will make browser cluttered.