I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).
I thought this was an issue with the ontouchstart as suggested in some other posts dealing with Bootstrap 2 but I've tried that with a local file and have had no success:
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
I also don't want a solution where I have to modify the original javascript file since we're currently pulling that from a CDN.
I created a simple snippet here to test:
https://www.bootply.com/Bdzlt3G36C
Here's the original code that's in the bootply in case that link dies in the future:
<div class="col-sm-5 col-offset-2 top-buffer">
<div class="dropdown">
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
Action
</a>
<ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
<li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
Action
</a>
<ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
</a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
</li>
</ul></div>
</div>
I figured it out. I was missing the href="#" in my anchor tag. It was working fine in other browsers but not chrome or safari on IOS. Works fine now. Here's the final code for anyone that's interested:
<div class="dropdown">
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
Action
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
</li>
</ul>
</div>
And a working sample here:
http://www.bootply.com/104147
If you don't want to use an <a> tag, or add a redundant href attribute, you can just apply cursor:pointer css to the element, and it will work
safari versions we tested on iOS do not interpret z-index initial correctly. Increase the z-index on dropdown-menu. Instead of clicking on the item, it is hidden and the menu closes. To make Safari work we needed to override bootstrap z-index: initial.
.dropdown-menu {
z-index: 25000 !important;
}
You can also add a class to your a tag called clickable. This is a bootstrap class. It sets the css cursor: pointer.
<a class="clickable"></a>
I just had this issue - where the Bootstrap 3 navbar dropdown menu was not opening on an iPad mini 2 (but worked on an iPhone 7 and various desktops/laptops). After debugging directly on the iPad, I discovered the problem was using 'let' instead of 'var' inside a js function. Once I switched the 'let's to 'var's, everything was good to go. Just wanted to add this here in case it (or removing a similar obsolete feature) proves to be a fix for someone else too!
bootstrap target toggle was not working for me on iPhone/iPad WebKit. I ended up to toggle show class manually when clicked on the dropdown container
$scope.showDropdown = function(dropdownManuId) {
var element = document.getElementById(dropdownManuId);
if( element.classList.contains("show") ) {
element.classList.remove("show");
} else {
element.classList.add("show");
element.focus();
element.scrollIntoView();
}
};
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
Any ideas how to fix? This applies to the "Animations" and "Education" links. Click these should open a new page, but bootstrap.min just adds the .open class.
HTML
<li class="dropdown cases videos">
<a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
<ul class="dropdown-menu cases-body videos-drop">
<p style="padding-top:15px;" class="category-cases">Building a Park Out of Waste</p>
<p class="category-cases">Designing for Active Living</li>
<p class="category-cases">Designing Neighborhoods for People and Wildlife</p>
<p class="category-cases">The Edible City</li>
<p class="category-cases">Energy Efficient Home Landscapes</p>
<p class="category-cases">From Industrial Wasteland to Community Park</p>
<p class="category-cases">Infrastructure for All</p>
<p class="category-cases">Leveraging the Landscape to Manage Water</p>
<p class="category-cases">Revitalizing Communities with Parks</p>
<p class="category-cases">Urban Forests = Cleaner, Cooler Air</p>
</ul>
</li>
<li class="dropdown cases educations">
<a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
<ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
<p style="padding-top:15px; " class="category-cases">Brownfield Restoration / Ecosystem Rehabilitation</p>
<p class="category-cases">Design for Active Living</p>
<p class="category-cases">Designing for Biodiversity</p>
<p class="category-cases">Energy Efficiency</p>
<p class="category-cases">Green Infrastructure</p>
<p class="category-cases">Incorporating Sustainable Materials</p>
<p class="category-cases">Transforming Transportation Infrastructure</p>
<p class="category-cases">Urban Agriculture</p>
<p class="category-cases">Urban Forestry</p>
<p class="category-cases">Urban Parks</p>
</ul>
</li>
I tried this script but it didnt work.
$('.dropdown .dropdown-toggle a').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
Any ideas?
Site is here
Your selector is incorrect
You have:
$('.dropdown .dropdown-toggle a')
which is looking for a tags inside of .dropdown-toggle class elements, but it is actually your a tag that has the class.
You want:
$('.dropdown a.dropdown-toggle')
to select a elements with the .dropdown-toggle class
Just remove "data-toggle="dropdown"", But as say gwar9 in the comment that will prevent dropdown opening on mobile. So if you want that work for both you need detect if the device is mobile or not if it is not you erase the data toggle attribute.
I've created a jsfiddle to demonstrate how you could meet your requirements.
http://jsfiddle.net/DarrenS/pcav6v1g/
As you explained, you have a UX requirement to allow the following;
On Hover of the main menu, expand the menu to show sub menu items.
On Click of the main menu, follow the main menu link.
I explained that this is not default Bootstrap behaviour and the limitation of hover on touch devices.
To implement this solution I am using Modernizr to detect touch and then adding some custom jQuery to attach hover() and click() events to the menu.
I've implemented it this way because I still wanted to allow larger touch devices (such as a tablet) to access the sub menu. Which they wouldn't be able to do if you simply added a click event handler to the main menu.
//Non-Touch devices
//Hover expands menu (non default Bootstrap behaviour)
$('html.no-touch div.btn-group').hover(function(e) {
$(this).toggleClass('open');
});
//Non-Touch devices
//Click follows main link (non default Bootstrap behaviour)
$('html.no-touch div.btn-group a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
//Touch devices
//Touch (click) expands menu (default Bootstrap behaviour)
//Touch devices
//Allow touch (click) to follows main link when menu open (non default Bootstrap behaviour)
$('html.touch div.btn-group.open a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
.dropdown-menu{
margin-top: 0;
}
<div class="btn-group">
<a href="/page.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Google <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
</div>
I encountered this issue too, but realised that changing the behaviour would make the site harder to use for mobile users (who don't have a mouse to hover over controls). So, instead I inserted an "Overview" entry to the drop-down menu that links to the parent page. This makes the parent page clickable on all device types.
Details here: https://keasigmadelta.co.nz/blog/the-bootstrap-drop-down-menu-solution
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.
I am using bootstrap version 2.0
I have the following html structure -
Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
Here's the updated fiddle with the correct bootstrap version and the attribute removed.
Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.
The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.
I faced same problem with bootstrap framework and at the end got the solution (worked for me).
Import all your required javascripts, mainly jquery.js .
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.
The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.
We'll hide ul.nav-tabs and a.accordtion-toggle respectively with css. The tabs work here, but the a.accordion-toggle aren't working. Any ideas?
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active">Panel 1</li>
<li class="active">Panel 2</li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
In my case just copying tabs content into hidden accordion worked well.
Here is the source I extracted to small plugin - Bootstrap Tab Collapse
I tried a bit on this jsfiddle but it seems complicated to make both plugins work together.
It might be better opting for one of the plugin, using only the classes and JS of this plugin, and then implement your own triggers to complete the default behavior.
I think the accordion behavior of the collapse plugin needs the .accordion-group > .collapse.in structure to work properly - if you don't use your own JS.
I ended up nesting the tab triggers inside one div with the tabbed content (instead of a list above) and using css to position them like tabs for the full screen view. Not ideal but works as long as the data-toggle and data-target are in place.
Not sure if it helps but you could use window.onresize = function() {} and check for the width of your main container. When it is less than some width you could replace the content using js.