I'm trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (code reproduced below).
The cited suggestion to stopPropagation() on the tabs anchors doesn't seem to help. Is there a better way?
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active">Home </li>
<li>Profile</li>
<li>Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
The cited suggestion doesn't work because the .tab('show') method should be invoked on the actual tab (i.e., the link) instead of the tab pane.
So the code should be:
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
Here is an updated fiddle: http://jsfiddle.net/pv2Lc/6/
Use the specific bootstrap events : the hide.bs.dropdown (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling e.preventDefault(). (doc here, list of specific bootstrap events for scrolldown components)
You can activate a special flag when the user clicks on a tab, and check that flag in the hide.bs.dropdown event on the dropdown :
$('#myTabs').on('click', '.nav-tabs a', function(){
// set a special class on the '.dropdown' element
$(this).closest('.dropdown').addClass('dontClose');
})
$('#myDropDown').on('hide.bs.dropdown', function(e) {
if ( $(this).hasClass('dontClose') ){
e.preventDefault();
}
$(this).removeClass('dontClose');
});
fiddle
(I added html ids to your example, change the selectors according to your needs)
Related
I have a bootstrap list-group-item with a badge as follows:
<a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0">
<span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" >
changed files:1
</span>
<ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;">
<li class="list-group-item changed-file">
release.groovy
</li>
</ul>
</a>
It contains a collapsed ul that is targeted by the badge.
At the same time, when clicked, the a element is selected(as it is part of a list-group with multiple selection possible).
I try to insert this bit of code:
$('.badge').on('click', function(e){
//$('#'+this.id).click();
e.stopPropagation();
});
so that when clicking on the badge the a element is not selected.
If I use this code the ul element is not being shown. I guess bootstrap uses the on click function and so it has something to do with my function overriding the bootstrap one.
How can I stop propagation while keeping the collapse behavior?
I found the solution by using bootstrap's collapse function:
$('.badge').click( function(e){
$('#ul'+this.id.substring(5)).collapse("toggle");
e.stopPropagation();
});
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
I want my dropdown menu header to both open the related menu and show directly the content of the first element of the submenu which is actually an anchor link in the page.
Here is the HTML code of the Dropdown Menu:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Menu
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</div>
This is the HTML code of the anchored link:
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade" id="submenu1">
<p>submenu1</p>
</div>
</div>
And this is the JS code I'm trying to use with no success. It works if I write a whole URL like "www.google.com" but not with "#submenu1".
$(document).ready(function() {
$('.dropdown').on('click', function () {
window.location="#submenu1";
});
});
you can try with
location.hash=anchorname
location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;
fiddle link http://jsfiddle.net/420rL0h2/
Try using the window.location.hash instead?
window.location.hash=anchorname;
Edit
You're using Twitter bootstrap right? The tabs won't be visible until the active class is added, and since you have a fade class too, I think you'll also need the 'in' class... Try this JS:
$('.dropdown').on('click', function () {
// Remove any active classes from the tabs
$('.tab-pane').removeClass('active in');
// Set the specific #submenu1 to be active
$('#submenu1').addClass('active in');
// Scroll the window down to the tabs that are now visible
window.location.href="#submenu1";
});
I'm not entirely sure what you're trying to achieve though, the links in the dropdown should do the displaying for you... but if you're just trying to force a specific tab to be open when you first click the nav dropdown, then this should do the trick.
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I am developing bootstrap tabs with the use of data-target attribute to match the tab panes instead of using the href attribute, since i am developing angular app(href might spoil my route ).
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="home">Home</a></li>
<li><a data-target="profile">Profile</a></li>
<li><a data-target="messages">Messages</a></li>
<li><a data-target="settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
jQuery(function () {
jQuery('#myTab a:last').tab('show')
})
</script>
Please see this fiddle http://jsfiddle.net/xFW8t/4/. Where i recreated the whole .
I don't want the bootstrap style to be applied for my tabs, i want only the functionality, i want my styles to applied , is it anyway to stop bootstrap style to be applied?
Please help in this thanks in advance for any help.
Add data-toggle="tab" attribute in your markup
<a data-target="#home" data-toggle="tab">Home</a>
Js Fiddle Demo
try like this :
jQuery(function () {
jQuery('#myTab a').on('click', function() {
$(this).tab('show');
});
})
As mentioned by #Sachin, you have to specify the data-toggle attribute.
Other than that, make sure you correctly fill in your data-targets. These take jQuery selectors, not element ids, when used with `data-target.(link)
If you are using data-toggle="tab" - you can remove your js initialization -
<script>
jQuery(function () {
jQuery('#myTab a:last').tab('show')
})
</script>
Bootstrap will init tabs automatically.
If you want to init your tabs maually - you can remove data-toggle="tab" from the layout and itin all tabs separately:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})