Dropdown menu on mobile doesn't hide on second click - javascript

I'm trying to put this dropdown menu on my website:
*https://codepen.io/sean_codes/pen/WdzgdY*
My website is totally mobile-friendly.
When I click to open the menu on the phone, it opens normally, but when I click the second time, it doesn't close. It closes only when I click away.
How do I put that menu to close when I click the menu icon a second time?

It is best to avoid the usage of hover on mobile devices. You will first have to check if the browser supports it via #media and create some sort of fallback in case it does not.
Try using input html element and set the type to checkbox for your dropdown buttons and toggle your dropdown with checked.
No need to use javascript for this.

Related

iOS buttons in overlays fire additional clicks on elements below the overlay

I am facing a strange problem on iOS devices.
When clicking on buttons/links in an overlaying container, the element below fires also a click event. I have a "filter" button that opens an overlaying div with all the filter options. The closing button on the overlay is located directly over the button, that triggers the overlay. When I click on the close button, the overlay closes, and with a small delay, a click on the filter button is executed again and opens the overlay.
This also happend when I build my mobile menu, where I had a burger button on the top right which opens my mobile menu. The closing button was located where the burger button was. When clicking on the closing button, the click on the burger button is executed again and opens the menu.
I tried to bind a stopImmediatePropagation() to the buttons, but this doesn't work out. This only happens on iOS, Android and Desktop is fine. The functionality of the overlays comes from my used e-commerce system (Shopware 6). It is not only happening with buttons, but with other elements like divs and spans with a functionality to hide/close overlays.
Any ideas how to get rid of this?
Best regards,
Alex
I could solve it with fastclick.js
https://github.com/ftlabs/fastclick
Not what is designed for, but fortunately it solved the click issue on iOS.

Bootstrap modal shows all images and not limited to the images in any given Tab

My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.

click link in navbar menu

I'd like to use javascript to click on a link in a navbar dropdown menu. If the dropdown has been opened at least once $("#state_save").is(":visible") is true and I can use document.getElementById("state_save").click(); to click the link.
However, without activating the navigation bar manually first, document.getElementById("state_save").click(); won't work
I can get the list of all links in the navbar using $("#nav_radiant li:has(a)") but it is not clear how to click on #state_save.
EDIT:
Based on the comments I figured out that until the dropdown menu has been opened the href of the state_save element is blank.
Praveen: A (slightly) older version of the app is linked below. The id in this version is saveStateNav
https://vnijs.shinyapps.io/radiant/?SSUID=1f38b44126
FYI The code is generated using R and the shiny package

Bootstrap Umbraco menu Dropdown click

I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.

iPhone with iOS7 does not allow tap to select an option of an HTML select element

With a responsive site, I am trying to include functionality to allow users to tap to select an option of an html select element when viewed on iOS7 iPhone's native browser (safari). By default the native select menu will only make a selection when the user hits the "X" in the upper right hand corner of the select wheel popup menu. Our concern is that we would like to reduce the amount of steps for the user. Alternatively the user will tap the drop down menu on the page, then tap the option of the select element they want in the native menu. No need to confirm with the "Done" or "X" on the right hand side. Thanks for any incite.

Categories

Resources