I am trying to use bootstrap to create a dropdown toggle that allows the user to hide/unhide certain div sections. The code is seen below:
<div class="tabbable">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#">
Select an Area by:
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li>
<li><a data-toggle="tab" href="#Area">MLS Area</a></li>
<li><a data-toggle="tab" href="#City">City</a></li>
<li><a data-toggle="tab" href="#Zip">Zip</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /btn-toolbar -->
<div class="tab-content">
<div class="tab-pane active" id="Parish">
Parish
</div>
<div class="tab-pane" id="Area">
Area
</div>
<div class="tab-pane" id="City">
City
</div>
<div class="tab-pane" id="Zip">
Zip
</div>
</div>
It works (kind of), except for the fact that after selecting an option the first time, it never toggles off after selecting a new item. It also does not allow me to go back to an item that has already been selected. I have searched everywhere and used the web console in Firefox to debug, but do not see what the problem is. This happens in Chrome and IE too.
I have created a Bootstrap snippet that demonstrates the behavior here: http://bootply.com/102355
I would appreciate any help. Am I trying to do something with bootstrap that just can't be done yet?
I don't know if you've solved this, but here it is how I would do it using jQuery (I don't know bootstrap):
$('.dropdown-menu li a').click(function(){
DeselectCurrent();
});
var DeselectCurrent = function() {
jQuery('.dropdown-menu li').each(function(){
var attr = jQuery(this).attr('class');
if (typeof attr !== 'undefined' && attr !== false) {
jQuery(this).removeClass("active");
}
});
};
Here it's a working example: http://bootply.com/102465
By the way, in my example I named my function DeselectCurrent... It would make more sense if you named it DeselectPrevious.
Just a side note, I don't see in your markup an id with a value of myTab (like you are referencing it here $('#myTab a').click(function (e)) but I am assuming that's how you target your tabs in twitter-bootstrap...
Hope this helps.
Related
I'm currently working on a web project where you have the option to switch between two tabs using Bootstrap and Angularjs. Basically I want it to default the grid to active on desktop, but then default the list to active on mobile.
<div class="col-sm-2">
<div class="course-view-section">
<ul class="nav nav-tabs course-view-tab">
<li class="active"><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.grid"><i class="fa fa-th"></i> Grid</a></li>
<li><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.list"><i class="fa fa-list"></i> List</a></li>
</ul>
</div>
</div>
The angular
<div class="content" ng-switch="selection">
<div ng-if="selected === selection.grid">
<ng-include src="'/Content/template/course/grid-view.html'"></ng-include>
</div>
<div ng-if="selected === selection.list">
<ng-include src="'/Content/template/course/list-view.html'"></ng-include>
</div>
</div>
I've played around with media queries, ng-class etc, but couldn't get it work as intended. Anyone figured this one out before?
Try setting the state of selected when the page loads. How you do this depends a lot on how you are structuring the rest of the app. For example, if $scope is being intialized then perhaps similar to this in the controller might work:
$scope.init = function () {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
$scope.selected = selection.list
} else {
$scope.selected = selection.grid
}
}
I did see a page somewhere on internet, which made impressive tabs like below:
All|Fashion|Jewerry|Food
When user clicks on All then it will show all items.
when user clicks om Fashion or else then i will show only items of its category.
I remember that each item have something like All Fashion/All Food so that the tab control panel would show/hide item.
I tried to find some tutorial about tab on bootstrap. But i did not see any example like that in document.
Could someone please show how to do that with bootstrap and without bootstrap???
The reasons's is i am only good with back-end.
I am learning front-end.
Thanks in advance.
i did
it without bootstrap
html:
<ul id='list_tabs'>
<li><a data-filter='*' href='#'>All</a></li>
<li><a data-filter='meat' href='#'>meat</a></li>
<li><a data-filter='fish' href='#'>fish</a></li>
</ul>
<ul id='list_products'>
<li data-category='fish meat'>product 1 </li>
<li data-category='fish'>product 2 </li>
<li data-category='meat'>product 3 </li>
</ul>
My Javascript:
$(document).ready(function(){
$('#list_tabs').click(function(event){
var filter = $(event.target).attr('data-filter');
$('#list_products li').each(function(){
var item = $(this);
if(filter=='*'||(item.attr('data-category').indexOf(filter)!= -1))
item.show();
else
item.hide();
});
});
});
I'm still looking into how to do it with bootstrap.
Thank everyone for helping.
P/s: I did saw same control like that in this site
I am looking into it. But i still hope someone could help me.
I loved checking this too. You can improvise as you learn. I give you a setup for you to start here.
// optional code: Throw event on tab change and work with it.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var elem = $(e.target),
target = elem.attr("href");
if (target === hashify('Tab_1') || target === hashify('Tab_3') || target === hashify('Tab_5')) {
$(hashify('testImage')).attr('src', 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a');
}
else {
$(hashify('testImage')).attr('src', 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png');
}
});
function hashify(str){
return '#' + str;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1
</li>
<li class="">Tab 2
</li>
<li class="">Tab 3
</li>
<li class="">Tab 4
</li>
<li class="">Tab 5
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="Tab_1">
Tab 1
</div>
<div class="tab-pane" id="Tab_2">
Tab 2
</div>
<div class="tab-pane" id="Tab_3">
Tab 3
</div>
<div class="tab-pane" id="Tab_4">
Tab 4
</div>
<div class="tab-pane" id="Tab_5">
Tab 5
</div>
<img id = "testImage" src = "http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" alt="Logo" height="150" width="150">
</div>
<
There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});
Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...
I have an Isotope filter menu and I'm using hash history so the filters are still set if a user comes back to the page. Because we are using .slideDown to expand sub-menu items, the sub-menu items are hidden when you come back to the page even though some filters within them are selected.
I'm trying to use:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
However, since the class "selected" is being generated by the jQuery filter (Isotope), it's being ignored.
Fiddle: http://jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any</li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any</li>
<li>illuminated</li>
<li>non-illuminated</li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any</li>
<li>wall</li>
<li>ground</li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}
I guess you are missing a '.'
if ($('#option1').is('.selected')) {
$('.level-two').slideDown('fast');
}
Rather than copy the same process of each click with a repeated function you could always programatically trigger the clicks on the .selected anchors.
$('.option-combo a.selected').trigger('click');
A fiddle: http://jsfiddle.net/jgkwd/