Automatically scroll through tabs using jQuery - javascript

I have a tab list code posted below.
//TabList
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a id="t1" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t2" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t3" href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t4" href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab"></a>
</li>
</ul>
Each tab has a pic and some info. I want to automatically scroll through each tab every 5 seconds and then start at the first when the end is reached.
Using a setInterval function (Posted Below) i can get it to work but the infomation does not change. That is because it doesn't add an active class to the hyperlink.
//setInterval Function
setInterval(function () {
//get currently-on tab
var onTab = tabs.filter('.active');
//click either next tab, if exists, else first one
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
nextTab.click();
}, 1000);
var tabs = $('#tabs li');
//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function () {
$(this).addClass('active').siblings('.active').removeClass('active');
}
});
To get it working with the information showing when tab changes i use this code.
tabs.click(function () {
var curr = $('li.active');
curr.removeClass('active');
curr.next().find("a").click();
curr.next().addClass('active');
});
The Problem is when it reaches the end of the it does not go back to the start i have looked at answers on stack-overflow like this but can't get it to work. I feel like i cant see the forest for the trees and that it is a simple answer. Any Help will be greatly appreciated.

var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
hi yo:) Here when u get last element, u should add 'active' class to your first element of list:) Smth like:
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first().addClass('active');

Related

Laravel: Click event on tab pane

I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.
In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.
In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.
Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.
Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.
I want to load the liquidations, for example when I clicked the liquidations tab.
Question: Why does my click event is not working?
Tab pane
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
Javascript
<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
// .... code
}
$(document).ready(function(){
var vendor_id = "<?= $vendor->id; ?>";
var start_date = "<?= $start_date;?>";
var end_date = "<?= $end_date;?>";
if ($('.purchases-payments').length > 0) {
$('div').click('.purchases-payments',function(e){
// $('.purchases-payments').click(function(e){
$('.purchases-payments-details').html('');
getPurchasesPayments(vendor_id,start_date,end_date);
e.preventDefault();
return false;
})
}
if ($('.liquidations').length > 0) {
$('div').click('.liquidations',function(e){
// $('.liquidations').click(function(e){
alert('test');
e.preventDefault();
return false;
})
}
// if ($('.liquidations').hasClass('active')) {
// alert('liquidations active');
// }
})
You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.
Add ids to your a elements
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a id="purchases" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li id="liquidations" class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
</ul>
and in your javascript:
$(document).ready(function(){
$('#purchases').click(function(e){
// your code
});
$('#liquidations').click(function(e){
// your code
});
})

Bootstrap Tabs with Next Arrow If Multiple tabs exist

I hope someone will be able to help me on this issue. I'm having hard time converting it to latest bootstrap 4 tabs.
Here's the source: https://codepen.io/srees/pen/pgVLbm
But the problem is that it used the bootstrap 3 version and it doesn't have tab content.
Basically what i need to do is this
If there's a multiple tabs you can click the arrow to slide to another tabs, just like in the browser
This is where i want to do
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
I hope this will help you out
assign data-id to anchor tags with number like
HTML
Home
Home
Home
JQuery
$(document).ready(function(){
var maxTabs = $(".nav-item").length; //Get total number of Tabs
$("#next").click(function(e){
e.preventDefault();
var activeAnchor = $("ul").find("a").hasClass("active"); //Get a tag with class active
// OR you can use var activeAnchor = $("li > a").hasClass("active");
if(activeAnchor === true){ // check if any "a" has class "active"
$(this).removeClass("active"); // remove "active" class for current element
var current = $(this).attr("data-id"); // get the data-id of current element
if(current < maxTabs){ // checks if id is the last one
var nextId = current + 1; //adding 1 to current id to get the next element
$("#nextId").addClass("active"); //Adding the active class to next element
}
}
});
});
Please let me know if it works. I am not sure but maybe you encounter problem on line $(this).removeClass("active");. If you come across this issue. Please let me know I will provide an alternative solution.

How to find the next and previous element in <li>tree and make it focusable: [duplicate]

This question already has answers here:
Shift focus with arrow keys in JavaScript
(6 answers)
Closed 5 years ago.
My code looks like this
<ul role="tablist>
<li role="presentation" tabindex="0">
<a role="tab" href='#' data-toggle="tab">One</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Two</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Three</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Four</a>
</li>
</ul>
I want to find the element and make it focusable whenever arrow key is pressed.
Thanks in Advance :)
I don't know how much do you spend for finding answers for your problem. But there are few on Stackoverflow.
Take a look over this question
Shift focus with arrow keys in Javascript
Something like this would work for you:
// wait to load DOM
$('document').ready(function() {
// active li holder
var active = 0;
// add keypress listener
$('body').on('keypress', function() {
// get the keycode
var code = e.keyCode || e.which;
// check for arrow keys
if(code == 37) { //left
active++;
} else if(code == 39) { // right
active--;
}
// this is the active li element you can process it as per your need
$('ul li').eq(active);
});
});

bootstrap tabs not working for history.back option

I have used the bootstrap tabs in my webpage
<ul id="myTab" class="nav nav-tabs tab_new_vir" role="tablist">
<li role="presentation" class="active">Tab 1<span> | </span></li>
<li role="presentation">Tab 2<span> | </span></li>
<li role="presentation">Tab 3<span> | </span></li>
<li role="presentation">Tab 4</li>
</ul>
By clicking the links the corresponding tabs opened.
By clicking the browser back button the corresponding tabs not opened.
For this I used the following code:
$('.goto').click(function (e) {
e.preventDefault();
history.pushState( null, null, $(this).attr('href') );
});
This is working.
By default, the tab1 is opened.Now I click tab2, and 3, and 4.
BY clicking the browser back button, it correspondingly opens the tab 3,2
But tab 1 is not opened. At that time the url is (http://url.com instead of http://url.com/#tab1)
How to fix this. Please help me
remove class="active" and let him or her choose ^^ and normally it should work.
<li role="presentation">
<a href="#tab1" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-tab" aria-expanded="true" class="goto">
Tab 1
</a>
<span> | </span>
</li>

How can I get this href value?

I would like to get the value "3 Sent" from the hmtl below. How can I do this?
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
EDIT: Apologies everyone, I wasn't clear on what I was after.
The value "3 Sent" changes all the time, can be "1 Sent, 2 Sent" etc. It is a clickable link so I want to be able to click on it.,
Thanks.
Possible with xpath text based search. I believe you are looking for a selector
//a[.='3 Sent']
Edit
Just simply use css selector then,
a[href='#sent']
Try this
The anchor tag when gets clicked it search for the text
$('.nav li a').on('click', function(e){
e.preventDefault();
console.log("Value is " + $(this).text());
});
You can simply get it using below code:
$(document).ready(function(){
$('li').find('a').each(function() {
if($(this).attr('href')=="#sent")
{
alert($(this).text());
}
});
});
Here is JSFiddle
From the class .active in the next list element get the text in anchor.
var textInAnchor = document.querySelector(".active + li a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
from the class .some-tabs find the child list element in the second position then return his anchor text
var textInAnchor = document.querySelector(".some-tabs > li:nth-child(2) a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
Get the href with value = #sent the return the text
var textInAnchor = document.querySelector("[href='#sent']").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>

Categories

Resources