JavaScript action on BS tab open - javascript

I'm trying to make a Javascript action when a bootstrap tab is opened. I can't get it to work. These are the scripts I've tried:
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
And
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
});
I have these scripts inside of the tabs themselves. I also tried:
$('ul.nav a').on('shown.bs.tab', function (e) {
instead of
$('.nav-tabs a').on('shown.bs.tab', function(){
Some HTML
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
<div id="2" class="tab-pane">
Tab 2 content...
</div>
What is going on?

You have to bind the event (addEventListener in terms of vanilla js)
$('ul.nav a').bind('click', function() { //bind whatever event you want
alert('User clicked on "foo."');
//vchart.redraw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>

Related

Reloading page when fetching new tab item in bootstrap card

I have this code in javascript that allows me to visit a page with a hashbang on it to visit a tab
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
This is an example link http://localhost/centosapp/info/configure#description
I am showing a tab on click using
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
this is the html
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url('info/configure'); ?>#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
...items are shown here
</div>
</div>
I want to be able to reload page so that to get new content from server when i click on a tab.How can i reload and show the tab clicked on bootstrap?
Solved it this way using a html data-* tag.
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#description" data-link="http://localhost/centosapp/info/configure#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" data-link="http://localhost/centosapp/info/configure#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals" data-link="http://localhost/centosapp/info/configure#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
and js
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show');
var links = $(this).attr("data-link");
window.location.href = links;
});
Works but a solution inside bootstrap would have worked better.

Clickable navigation with sub navigation?

I´ve got this navigation structure:
<nav class="navbar navbar-top mod_navigation " >
<div class="ws-navbar-collapse pull-left">
<ul class="nav navbar-nav">
<li class="submenu mega ncol-3 first nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Lösungen</span>
</a>
<div class="subnav-container">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Digitalisierung</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
And I would like the click effect from this page:
https://www.invisionapp.com/
I've tried it with this js script, but its not working:
$('ul li.nav-item').on('click', function() {
if(!$('.subnav-container').is(':visible')){
$(".subnav-container" ).slideDown();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
} else {
$(".subnav-container" ).slideUp();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
}
});
So if the main navigation point got the class "submenu", the sub navigation "subnav-container" should slide down on click.

How to activate the elements if different space?

This if the same column on the elements that we click
<li class="root-level">
<a href="#" class="levelentry">
MAN
<div class="level">
Back
</div>
</a>
</li>
<li class="root-level">
<a href="#" class="levelentry">
WOMAN
<div class="level">
Back
</div>
</a>
</li>
$(document).on('click', '.levelentry', function() {
$('.level', this).addClass('active');
});
But how if like this. Because the level is not within levelentry. But still one room at a root-level
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
How to use element $(this)? Is there any way other than using $(this).next()?
If i using
$(document).on('click', '.levelentry', function() {
$('.level').addClass('active');
});
So, all level to be active
Use .closest() to target root-level element then use .find() to level element
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
.active{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
You can use siblings() on $(this). DEMO
$(document).on('click', '.levelentry', function() {
$(this).siblings('.level').addClass('active');
});
If you want to select only first .level you can add :first DEMO to siblings('.level:first')

Goto a tab without using anchor links?

I'm using the Scroll Javascript and have found the problem with the tabs, which is that it is conflicting with the scroll javascript. i.e.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">menu1 </a></li>
<li><a data-toggle="tab" href="#menu2">Menu2 </a></li>
<li><a data-toggle="tab" href="#menu3">Menu3</a></li>
</ul>
Is it possible to link to tabs without using the anchor? (#menu1)
Kind Regards,
You can use data-target attribute instead:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a data-target="#tab1" role="tab" data-toggle="tab">First Tab</a></li>
<li role="presentation"><a data-target="#tab2" role="tab" data-toggle="tab">Second Tab</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Content 1</div>
<div role="tabpanel" class="tab-pane" id="tab2">Content 2</div>
</div>
Here is a Working Fiddle
Appears so:
<div id="tabs">
<ul class="super">
<li><a>title 1</a></li>
<li><a>title 2 </a></li>
</ul>
<div>
content1
</div>
<div>
content2
</div>
</div>
<script>
$(function () {
$("#tabs ul.super li a").each(function (index) {
$(this).attr("href", "#spec" + index.toString());
});
$("#tabs div").each(function (index) {
$(this).attr("id", "spec" + index.toString());
})
$("#tabs").tabs();
});
</script>
Source: is it possible to use Tabs without using anchor tag and id?
I solved this by changing the following line from
var d = $("#scroller-anchor").offset({scroll:false}).top;
to
var d = $("#scroller-anchor").offset().top;

bxslider doesn't load in bootstrap 3 tabs

I'm using bxSlider and Bootstrap tabs for a project. I used three sliders in three tabs. The active tab is showing bxSlider but when I click on other tabs it doesn't load slider anymore.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Home
</li>
<li role="presentation">
Profile
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<ul class="bxslider-two">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<ul class="bxslider">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
</div>
activation:
$(document).ready(function() {
$('.bxslider,.bxslider-two').bxSlider();
});
Sample project
In order to initialize correctly your slider should be visible. The slider on the first tab works because it is visible when bxSlider() is called. One idea is to wait to initiate until the tab is clicked. I modified your jsfiddle with an example.
New jQuery:
$(document).ready(function () {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function (e) {
$('.bxslider').bxSlider();
});
$(document).ready(function() {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function(e) {
$('.bxslider').bxSlider();
});
$( ".tabs-1").click(function() {
$('#tabs-1 .bx-viewport').css("height","433"); //manuall hight
$('#latest_pros .dishes-item').css("width","245"); //manuall width
});
$( ".tabs-2").click(function() {
$('#tabs-2 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});
$( ".tabs-3").click(function() {
$('#tabs-3 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});

Categories