I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
Related
I'm having trouble with bootstraps tabs and tabpanels not working with the active class as intended. I know there are many questions about this, but in all the ones I have read, adding and removing the inactive class is not working at all. In my case, it works... but kind of. First I'll provide the HTML:
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
</div>
</div>
The JavaScript comes from just including all the bootstrap 4 stuff.
So here's the thing, it starts off with some issues, being that as you click between the 3 tabs it will usually show 2 of them, but after clicking around for about 10 seconds it seems to fix itself and work completely as intended, showing only the content for the currently selected tab. I also use the same exact code with different names in other locations on my site, and it works perfectly fine.
Does anyone have any intuition into what would be causing the content to show incorrectly only the first 10 or so times clicking through the tabs, but then it works perfectly well until the page is refreshed?
First of all you have to apply active class properly.You have given active class to a link but it should be into li.nav-item and also in your nav items you have given your active class to #b-tab and in below given active class to a-tab content. Look at updated HTML code
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
a-tab content
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
b-tab content
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
c-tab content
</div>
</div>
I think there was a bug in the initial Bootstrap 4 code, I was using Bootstrap 4.0.0 beta when I encountered this issue. I downloaded Bootstrap version 4.1.3 and now the active class gets removed from the tab-pane as expected.
I have a website at: https://www.romaheritage.co.uk
The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.
Can anyone view the source for the page and point me in the direction of what I've done wrong?
I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.
The css is not good then but I believe you can make this right.
Here's the code
<div class="collapse navbar-collapse" id="tb-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>BMD</li>
<li>Census</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>Queen Victorias Journals</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li>
</ul>
</div>
try this one...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
If you go to this dev site (it's a Joomla site using bootstrap) and view on 1023px wide screen or smaller (or any smartphone), there is a hamburger menu. If you click it, it drops down a menu and if you click "Learn More", it jumps to a form (because it's really just an anchor). However, the dropdown menu stays open (because it's not going to a new page I guess).
Is there an easy way to add some code that basically says "any dropdown menu click should CLOSE the dropdown menu"?
Here is the code for the menu when it's expanded (first nav tag is probably all that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
Home
</li>
<li class="dropdown">
Features <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Scheduling & Routing
</li><li>
Billing & Invoicing
</li><li>
Mobile Workforce
</li><li>
Office Staff Persona
</li><li>
Owner Persona
</li><li>
Field Worker Persona
</li></ul></li>
<li class="dropdown">
Industries <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Cleaning
</li><li>
Lawn
</li><li>
Pest
</li><li>
HVAC
</li></ul></li>
<li>
Pricing
</li>
<li class="active dropdown">
About <b class="caret"></b>
<ul class="level1 dropdown-menu"><li class="current active">
Resources
</li><li>
Support
</li><li>
Security
</li></ul></li>
<li class="">
Learn More
</li>
<li>
Contact
</li>
<li>
Log In
</li>
</ul></nav>
And then when it collapses again, the classes in the nav tag look like this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
So it looks like that class of "in" needs to go away. Therefore, I am trying this jquery, but it isn't working. Shouldn't this work?
jQuery(function($) {
$("li a").click(function() {
$("nav.t3-navbar-collapse").removeClass( "in" );
});
});
Sorry for the bad luck on the first question, I actually just did this recently so I have a snippet on hand for you.
Basically what you want to tell the code to do is close the nav when you click an anchor, so you target the a and use a slideUp property.
$(document).ready(function(){
$("a").click(function(){
$("Your_Nav_ID").slideUp('slow');
});
});
I am trying to replicate the "tabs" section as explained in this tutorial: Google material Design. Everthing works fine except when I insert a date which uses a datepicker widget from this url: Datepicker. As soon as I select the date all the tabs in Megamenu become unresponsive
HTML code for the tabs:
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">Home</li>
<li>Reminder</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">
Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Insurance History Between Dates</li>
<li class="divider"></li>
<li>Insurance history of Account</li>
<li class="divider"></li>
<li>Insurance Amount between dates</li>
</ul>
</li>
<li>Bulletin Board</li>
<p class="user" data-toggle="tab">Welcome Wasim(1117004017)</p>
</ul>
Script for datepicker:
$("#dtBox").DateTimePicker();
This renders Megamenu like this:
One more strange thing I came across is that as soon as tabs become unresponsive and I click on "Reports" tab I get this:
It was the fault of the DatePicker plugin. This line of code
$(document).unbind('click')
stopped bootstrap's propagation of the menu.