In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();
Related
I am using tab panes defined as
<ul class="nav nav-tabs">
<li>Personal Information</li>
<li class="active">Contact</li>
<li>Parent/Guardian Information</li>
<li>Educational Background</li>
<li>Study Prospects</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="personal"></div>
<div class="active tab-pane" id="contact"></div>
<div class="tab-pane" id="guardian"></div>
</div>
It can be seen that i have selected Contact as First selected Tab, however when I refresh the page< on full page load it automatically changes tab to Personal that is First tab.
Is there any way i can manually switch tabs via javascript etc?
There is a solution to change the tabs, so you will need to:
Keep the last tab some where.
Call the below function when the page refresh.
This how you can call it:
activeTab('tab1');
function activeTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
This is the code you need.
HTML:
<li id="contact">Contact</li>
JavaScript:
window.onload = function() {
document.getElementById('contact').classList.add('active');
};
I am developing an web app. In some of the web pages I am using Twitter Bootstrap pane tabs. below is my code.
I am trying to go to a specific tab when the page reloads.
For example: when I am in the www.mywebsite.com/c.html the first active tab is 'bc' when I go to 'cc' and refresh the page it goes back to 'bc'. I want it to stay in 'cc'. I need to be able to do something like this www.mywebsite.com/c.html#cc But this does not work.
I looked at Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? but could not find an answer that fits my code. I tried changing the class names still no luck.
<div class="wp">
<div class="widget">
<div class="tabs">
<ul class="nav nav-pills nav-justified">
<li class="active">bc</li>
<li>cc</li>
<li>lc</li>
<li>pc</li>
<li>sc</li>
</ul>
</div>
</div>
</div>
<div class="tab-content tab-content-inverse">
<div class="tab-pane active" id="bc">
...
</div>
<div class="tab-pane" id="cc">
...
</div>
<div class="tab-pane" id="lc">
...
</div>
<div class="tab-pane" id="pc">
...
</div>
<div class="tab-pane" id="sc">
...
</div>
</div>
Get the anchor part of the URL by using location.hash in your JavaScript/jQuery.
Then, append it into the following JavaScript:
document.querySelector('.nav li a[href="#lc"]').click();
You'll simply insert the value you pull using location.hash after the href= portion, which will then be clicked.
Change the value in the following Bootply example and run it to see how it works.
BOOTPLY
This worked for me. I changed the class names to tabs and the event to click event
$(document).ready(function () {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
$('.tabs a').on('click', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
You can write some code in JavaScript that will run when the page loads and check the # part of the url (window.location.hash). Take a look at the bootstrap website for how to toggle a certain tab: http://getbootstrap.com/javascript/#tabs
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
I did a very simple setup for bootstrap tabs navigation according to http://getbootstrap.com/javascript/#tabs and http://getbootstrap.com/components/#nav-tabs.
<ul class="nav nav-tabs" id="test_tab">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<span>Hello 1!</span>
</div>
<div class="tab-pane" id="tab2">
<span>Hello 2!</span>
</div>
</div>
$(function () {
$('#test_tab a').click(function (e) {
console.info("clicked!");
e.preventDefault()
$(this).tab('show');
});
});
However, it's not working correctly. When I click on a tab (e.g. tab2), it gets activated as desired, however I can't click it again. When I click on tab 1, tab 1 get's activated, but tab 2 stays activated aswell.
For clarification:
Start
Tab 1 | Tab 2
-----------------
Click on Tab 2
Tab 1 | Tab 2
-----------------
Hello 2!
Click on Tab 1
Tab 1 | Tab 2
-----------------
Hello 2!
Hello 1!
Using bootstrap's data-* syntax, you don't have to write any JS unless you want to manually show a tab (say you want to show a tab when a button is clicked or a function is ran, rather than clicking on it in the nav).
I couldn't reproduce your issue in jsFiddle, but what I suspect is going on is the click binding is manually showing tab 1, and preventing bootstrap from hiding the others.
Try removing the click handler, and relying only on bootstrap's data-toggle="tab"
Met exactly the same problem, actually need to add the 'active' class to the tab-pane as well.
<div class="tab-pane active" id="tab1">
<span>Hello 1!</span>
</div>
Found the reference here: http://getbootstrap.com/javascript/#fade-effect
my knowledge of js is very limited. I've already read the official docs and several threads on the web. Still I have some issues. I need to programmatically shows the tabs, because I have to do some operations when a tab is shown.
According to the twitter bootstrap documentation, here a small piece of code:
<ul id="tabs" class="nav nav-tabs">
<li>State</li>
<li>Graph</li>
<li>Setup</li>
</ul>
<div class="tab-content">
<div id="state" class="tab-pane fade">
</div>
<div id="graph" class="tab-pane fade">
</div>
<div id="setup" class="tab-pane fade">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('#tabs a').click(function (e) {
e.preventDefault();
console.log("Activating a tab");
$(this).tab('show');
})
$('a[data-toggle="tab"]').on('shown', function (e) {
console.log("Tab activated");
e.target // activated tab
e.relatedTarget // previous tab
})
</script>
The first script activate each tab - and it's working.
The second one should subscribe to the 'shown' event and e.target should contain the activated tab's reference.
I get the first console message ("Activating a tab") but not the second. So I bet there is something I'm missing to correctly subscribing to the event.
Two problems I cannot understand. In order to get the stuff working I can't use js to activate tabs but just rely on bootstrap data-toggle item. The other strange thing is only the 'show' event will fire, the 'shown' won't. Do you know why?
You need to add data-toggle="tab" to your links. So your first part should be rewritten like the following
<ul id="tabs" class="nav nav-tabs">
<li><a data-toggle="tab" href="#state">State</a></li>
<li><a data-toggle="tab" href="#graph">Graph</a></li>
<li><a data-toggle="tab" href="#setup">Setup</a></li>
</ul>
Then you should be able to see your Tab activated message in the console.