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.
Related
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'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.
Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div
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 have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.
I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow.com to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.
EDIT
Here is the menu layout:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>menu1</li>
<li class="dropdown open">
menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<div class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">go</span>
</div>
</div>
</div>
Thanks.
EDIT 2
DanDavis suggestion in the comments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.
This uses only css. working demo
Add a class to the dropdown ul (.stay-open)
<ul class="dropdown-menu stay-open">
then apply style display block with !important
.stay-open {display:block !important;}
I am assuming that you are using a bootstrap dropdown, give this a shot:
$('li.dropdown').on({
"shown.bs.dropdown": function() { this.close = false; },
"click": function() { this.close = true; },
"hide.bs.dropdown": function() { return this.close; }
});
The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.
Here is working proof bootply
Here is a working proof bootply that will always stay open