I have implemented Navigation Tabs using Bootstrap. I am trying to get the width of a div when one particular tab becomes active. While the active tab is detected correctly, the width is returned 0. I'm not sure why this is happening.
Here is a fiddle: http://jsfiddle.net/pThn6/811/
HTML:
<ul class="nav nav-tabs">
<li>AAA</li>
<li class="active">BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">
<div class='col-md-9'>
...Content vol...
</div>
</div>
<div class="tab-pane active" id="bbb">
</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
JS:
$(function() {
$('a[data-toggle="tab"]').on('click', function(e) {
var s = "" + (e.target);
if(s.search('aaa') != -1) {
alert($('.col-md-9').css("width"));
}
});
})
How can I solve this?
timing issue, the tab hasn't opened yet so it hasn't resized the column, try this
http://jsfiddle.net/pThn6/812/
setTimeout(function() {
alert($('.col-md-9').width());
}, 100);
a better solution would be to hook into the open event provided by bootstrap, something like this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var tab = "" + (e.target);
if(tab.search('aaa') != -1) {
alert($('.col-md-9').width());
}
});
fiddle: http://jsfiddle.net/pThn6/819/
Related
I am using a bootstrap tabpanel like this:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
I created a site in codepen.io that links to a list of twitch streams, then displays the online streamers in one tab, offline in another, and both in a third. Each user is appended to the appropriate tab via a JQuery function. (this works)
I'm attempting to search through the tab with an input element and display the matched twitch streams.
I've gotten as far as using an at keyup function on the text element, but I do not know how to apply this to a tab that has its elements appended to it. The only similar questions asked have to do with simple lists, not tabs.
Thanks for any and all help.
This is where I've gotten so far:
The html:
<h1 id="head">
<input type="text" id="inputBox" class="rounded" value="">
</h1>
<ul class="nav nav-tabs" id = "list">
<li class="nav active" id ="AllTab">All</li>
<li class="nav" id ="OnlineTab">Online</li>
<li class="nav" id="OfflineTab">Offline</li>
</ul>
<div class="tab-content" id="stuff">
<div class="tab-pane fade in active" id="All">
</div>
<div class="tab-pane fade" id="Online">
</div>
<div class="tab-pane fade" id="Offline" >
</div>
</div>
The javascript in question:
$('#inputBox').keyup(function(){
var valThis = $(this).val();
$('.nav active').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) != -1) ? $(this).show() : $(this).hide();
});
});
Try this - fiddle
$('#inputBox').keyup(function () {
var valThis = $(this).val().toLowerCase();
$('.nav,.tab-pane').hide();
$('.nav').each(function () {
var text = $(this).text().toLowerCase();
if (text.indexOf(valThis) > -1) {
$(this).show();
$('#'+$(this).attr("id").replace('Tab','')).show();
} else {
$(this).hide();
$('#'+$(this).attr("id").replace('Tab','')).hide();
}
});
});
Also Angular JS makes impementing such type of functionalities on large data very easy. You might want to check it out.
I've been Googling for the past 2 days trying to figure out how to add events to my tabs, but I'm having trouble getting any of the solutions to work. I'm completely over my head with this stuff, so please include simple explanations. What I have so far are some tabs (in which I just copied and pasted):
<div id="tabs" role="tabpanel">
<!-- Nav tabs -->
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
<li role="presentation">Retired</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Active"></div>
<div role="tabpanel" class="tab-pane" id="Inactive"></div>
<div role="tabpanel" class="tab-pane" id="Retired"></div>
</div>
</div>
I also copied and pasted a JavaScript function that looks unlike any other JavaScript function I've dealt with and it doesn't work(the alert statement is never fired):
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
alert(Tab 1!);
}
if ($activeTab == 2){}
if ($activeTab == 3){}
}
});
});
</script>
I'm using the Spring MVC and my intention is to send the value of the tab back to the controller through a JavaScript function (as I see no other way around it). Based on that value, a table on the page is populated with certain data ('modules' in this case). I've created a controller method and I'm not sure whether it should be get or post or how to get the tab values in there. Here's my attempted controller method code:
#RequestMapping(method = RequestMethod.POST, value = "/update")
public final String changeTab(final ModelMap model, #RequestParam(value = "id") String id) {
System.out.println(id);
//model.addAttribute("modules", moduleDao.sortStatus(status));
return "module/admin";
}
What can I do to my code to achieve this? Am I even on the right track? Any help is much appreciated.
There are couple of issues with you tab creation html. Attached is your modified code that works when I gave it a try. You were missing id attribute on tab div that should match href. Hope this helps with the jQuery part.
W.r.t to the second question on binding with spring, now that you have event handler attached to your tabs, you can trigger a AJAX post or get from the event handler based on the tab and send the values of tab (am not sure what value you wanted to send). You can check how to do get/post from "http://api.jquery.com/jquery.ajax/". Your question does not explain me what sort of response you are expecting from controller, so I cannot help you on that. Hope this helps.
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function(event ,ui){
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
alert("tab1");
}
}
});
});
</script>
<body>
<div id="tabs" role="tabpanel">
<!-- Nav tabs -->
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
<li role="presentation">Retired</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane active" ></div>
<div id="tabs-2" role="tabpanel" class="tab-pane" ></div>
<div id="tabs-3" role="tabpanel" class="tab-pane" ></div>
</div>
</div>
</body>
[edited]
There's something in your HTML that's breaking the jQuery tabs code.
Consider this fiddle: http://jsfiddle.net/1r712od4/2/ - it works fine.
Try taking the unneeded aria-controls and classes from your code and trying again.
The JS you need is something like:
$('#tabs').tabs({
activate: function (event, ui) {
var activeTab = ui.newTab.data("tabid");
if (activeTab == 1) {
alert ("Tab 1!");
}
}
});
As for the Spring code, someone else will have to help you out with that!
i want to run tabs within tabs. this is the first tab section which is running without problems.
<div id="tabs2" class="tabs">
<ul>
<li class="skew-25 active">
<a class="skew25" href="#"> 1 tab</a>
</li>
<li class="skew-25"></li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;"> 1 tab output</div>
<div class="tab-panel" style="display: none;">2 tab output</div>
<div class="tab-panel" style="display: none;">3 tab output</div>
</div>
</div>
Now I include another tab within the sections (called 'tab output') of the above:
<div id="tabs4" class="tabs tabs-vertical">
<ul>
<li class="skew-25 active">tab within tab section</li>
<li class="skew-25">
<a class="skew25" href="#"></a>
</li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;">content</div>
<div class="tab-panel" style="display: none;"></div>
<div class="tab-panel" style="display: none;"></div>
</div>
</div>
this second code i include in '1 tab output' '2 tab output' and '3 tab output'
Problem is they will ether not send output, not available to choose or not active when apply to a tab in first tab. How to fix this?
Javascripts are:
function(e) {
if (!$(this).parent().hasClass('active')) {
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
} else {
return false;
}
}
and
f = v.handle = function(e) {
return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}
normal
/* ================ Tabs. ================ */
$.fn.tabs = function(options) {
var defaults = {
direction: ''
};
var options = $.extend({}, defaults, options);
if(options.direction == "vertical"){
$(this).addClass('tabs-vertical');
}
var tabsUl = $(this).find(' > ul'),
activeTab = tabsUl.find('li.active').index(),
tabsPane = $(this).find('.tabs-pane');
tabsPane.find('.tab-panel').fadeOut();
tabsPane.find('.tab-panel').eq(activeTab).fadeIn();
tabsUl.find('li').find('a').click(function(e){
if(!$(this).parent().hasClass('active')){
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
}else{
return false;
}
});
}
Disable the div and all its contents with jQuery like so:
How to disable all div content
Also, instead of all that js code you can use jQueryUI Tabs or Bootstrap tabs (also explained here scroll down to the Toggable Tabs section at the bottom of the page).
In my page i use bootstrap's tab, but when i click each of tab, content of tab doesn't show correctly, this is my code:
<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">Home</li>
<li>Favoriets</li>
<li>Friends</li>
<li>Experience</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab-home">
HOME
</div>
<div class="tab-pane fade active" id="tab-fav">
My favoriets
</div>
<div class="tab-pane fade active" id="tab-fr">
My Friends
</div>
<div class="tab-pane fade active" id="tab-ex">
My experience
</div>
</div>
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
</div>
JSFIDDLE
Where am i wrong? How can i fix it?
You have active class on all tab-pane divs. Remove it from all of them but the first one. BTW, in bootstrap 3, the event it is not show, it is shown.bs.tab Bootstrap 3 tabs.
I personally use this code: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink, the only change I made, was to replace the on('show' with on('shown.bs.tab' .
On your JSFiddle a reference to the jQuery library is missing. Once adding a jQuery reference under Frameworks & Extensions it's switching tab content.
Under the Bootstrap documentation is states that jQuery is required for bootstrap javascript features: http://getbootstrap.com/getting-started/#whats-included
Also, your function is being using jQuery notation.