i have this tab in bootstrap:
<ul class="nav nav-tabs" id="feedtab">
<li class="active">Atlass</li>
<li>Aviation</li>
<li>Processing</li>
<li>IT&S</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="atlass"><div id="updates" data-id-type="1"><div class="alert alert-default well" style="background-color: #f1f1f1"><i class="fa fa-spinner fa-spin"></i> Portal is Initilizing... Please Wait.</div></div></div>
<div class="tab-pane" id="avi"><div class="well" style="background-color: lightsteelblue;">Aviation Feed Will go here.</div></div>
<div class="tab-pane" id="proc"><div class="well" style="background-color: lightsteelblue;">Processing Feed Will go here.</div></div>
<div class="tab-pane" id="it"><div class="well" style="background-color: lightsteelblue;">IT&S Feed will go here.</div></div>
</div>
How do i have an event or soemthing in jquery for when the active tab is changed?
i want to call a javascript function when the active tab is changed.
i've tried this but dosent work:
<script>
$('#feedtab [data-toggle="tab"]').on('shown.bs.tab', function (e)
{
alert('test');
})
</script>
Straight out of the documentation
There are two events that get fired
show.bs.tab & shown.bs.tab as their name implies one gets fired before the new content is shown, the other one right after.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//e.target -> activated tab
//e.relatedTarget -> previous tab
});
Related
I have a tab bootstarp and a title for my page and I want to change the title of page with click on tab is active but my jquery code donot work correctly.
$(document.body).on('click', '.chooseChangePass li a', function(e) {
if ($("#chPass").hasClass("active")) {
$("#TitlePage").html("change Password");
} else {
$("#TitlePage").html("change UserName");
}
if ($("#chUserName").hasClass("active")) {
$("#TitlePage").html("change UserName");
} else {
$("#TitlePage").html("change Password ");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="TitlePage">change password</h1>
<ul class="chooseChangePass">
<li class="active" id="chPass">change password</li>
<li id="chUserName">change UserName</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="changeUserName">
changeUserName
</div>
<div role="tabpanel" class="tab-pane fade in active" id="changePassword">
changePassword
</div>
</div>
You are missing code, that toggles active class. Add bootstrap.min.js file. Also, else statements in your code are redundant.
Correct way of changing page title after tab changes is to use Bootstrap navs events. You need to listen for shown.bs.tab event.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#page-title').html(e.target.text);
});
Here's working example with Bootstrap 4.1.3: https://codepen.io/anon/pen/OrJOQE?editors=1010
Be sure to lookup documentation for Boostrap version that you are using, as there were significant changes between version 3 and 4. And change tab selector to named one, if you are planning to have more tab groups on same page.
I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
I am using MVC-5 and in my view i have a number of divs arranged horizontally and just below each divs i have tabs.
Each div is arranged such that it contains tabs just below it.
Now what i have to do ?
I have to click on div and upon clicking the div must automatically click the tab just below it.(i don't want manual )
My try to do it :
I have created a Onclick event of div and i have assigned ID to that tab.
But the problem is that tab is never clicked on clicing to the respectivce div.
My code to do so is:
<div class="panel-body">
<div class="col-md-2" id="Active" onclick="activeCircleClick('tab1')">
<div id="active" style="height: 125px;">
//here is something
</div>
</div>
</div>
<div style="width:1300px;">
<div style="width:100%;">
<ul class="nav nav-tabs nav-pills nav-justified" role="tablist" id="myTab">
<li class="active" id="activeList">
Active device list
<span class="col-md-12" id="activeDeviceStatus" style="text-align: center;"></span>
</li>
</ul>
</div>
<script>
function activeCircleClick(el)
{
alert("test1:" +el);
selectTab(el);
}
function selectTab(tabId)
{
alert('test2:' + tabId);
var tab = $("#" + tabId);
if (typeof tab != 'undefined')
{
e.preventDefault()
tab.tab('show');
}
}
</script>
My both the alert message popups but it don't click the tab below this div which i have clicked.
How to make it happen ?
I just soved my issue by doing this:
function activeCircleClick(el)
{
$('#tab1').bind('click', function () { });
$('#tab1').trigger('click');
}
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'
The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.
Demo
HTML
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Account</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane fade active" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane fade active" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane fade active" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
JS
$('.nav-tabs > li').mouseover( function(){
$(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:
TAB1 CONTENT
TAB2 OTHER CONTENT
In my actual version you don't have to move as fast for the problem to occur.
It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the HTML:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
Updated your fiddle: http://jsfiddle.net/VPn52/1/
maybe you can try my solution.
i try this solution in my code and it works.
for hover solution, i follow solution from here:
http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery(this).tab('show');
});
add this line (line 3 or after .. e.preventDefault(); .. )
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
and this line (after .. jQuery(this).tab('show') .. )
jQuery(tabContentSelector).addClass('active');
so the code become like this:
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
jQuery(this).tab('show');
jQuery(tabContentSelector).addClass('active');
});
What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:
var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
var $tab = $(this).find('a');
if (!tabFadingIn) {
tabFadingIn = true;
$tab.one('shown.bs.tab', function() {
tabFadingIn = false;
});
$tab.tab('show');
}
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Found sollution for me.
Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.