After going through a YouTube tutorial on how to create scrollable tabs, I have successfully managed to do so while incorporating Bootstrap 5. However, I'm having difficulty getting multiple scrollable tabs to work on one page. While the tabs and tab-content work correctly, I can only get the arrow buttons to work for the initial scrollable tabs.
Here's the code:
const tabsBox = document.querySelector(".tabs-box"),
allTabs = tabsBox.querySelectorAll(".scroll-tab"),
arrowIcons = document.querySelectorAll(".arrow-icon i");
let isDragging = false;
const handleIcons = (scrollVal) => {
let maxScrollableWidth = tabsBox.scrollWidth - tabsBox.clientWidth;
arrowIcons[0].parentElement.style.display = scrollVal <= 0 ? "none" : "flex";
arrowIcons[1].parentElement.style.display = maxScrollableWidth - scrollVal <= 1 ? "none" : "flex";
}
arrowIcons.forEach(icon => {
icon.addEventListener("click", () => {
// if clicked icon is left, reduce 200 from tabsBox scrollLeft else add
let scrollWidth = tabsBox.scrollLeft += icon.id === "left" ? -200 : 200;
handleIcons(scrollWidth);
});
});
allTabs.forEach(tab => {
tab.addEventListener("click", () => {
tabsBox.querySelector(".active").classList.remove("active");
tab.classList.add("active");
});
});
const dragg = (e) => {
if(!isDragg) return;
tabsBox.classList.add("dragging");
tabsBox.scrollLeft -= e.movementX;
handleIcons(tabsBox.scrollLeft)
}
const dragStop = () => {
isDragg = false;
tabsBox.classList.remove("dragging");
}
tabsBox.addEventListener("mousedown", () => isDragg = true);
tabsBox.addEventListener("mousemove", dragg);
document.addEventListener("mouseup", dragStop);
.wrapper {
margin: 0 auto;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
max-width: 1200px;
border-radius: 0px;
}
.wrapper .arrow-icon {
position: absolute;
top: 0;
height: 100%;
width: 100px;
display: flex;
align-items: center;
pointer-events: none;
}
.arrow-icon:first-child {
left: 0;
display: none;
background: linear-gradient(90deg, #fff 20%, transparent);
}
.arrow-icon:last-child {
right: 0;
justify-content: flex-end;
background: linear-gradient(-90deg, #fff 20%, transparent);
}
.arrow-icon i {
width: 24px;
height: 38px;
cursor: pointer;
font-size: 1.2rem;
text-align: center;
line-height: 38px;
border-radius: 50%;
pointer-events: auto;
}
.arrow-icon i:hover {
color: #00f;
}
.arrow-icon:first-child i {
margin-left: -7px;
}
.arrow-icon:last-child i {
margin-right: -6px;
}
.wrapper .tabs-box {
display: flex;
gap: 12px;
list-style: none;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
.tabs-box.dragging {
scroll-behavior: auto;
cursor: grab;
}
.tabs-box .scroll-tab {
display: inline-block;
cursor: pointer;
font-size: 1rem;
white-space: nowrap;
background: transparent;
padding: 4px 20px;
border-radius: 0px;
border: 1px solid transparent;
margin: 0 auto;
text-align: center;
}
.tabs-box .scroll-tab:hover {
background: #666;
color: #000;
}
.tabs-box.dragging .scroll-tab {
user-select: none;
pointer-events: none;
}
.tabs-box .scroll-tab.active {
color: #fff;
background: #5372F0;
border-color: transparent;
}
<div class="wrapper">
<div class="arrow-icon"><i id="left" class="fa-solid fa-angle-left"></i></div>
<ul class="tabs-box nav nav-tabs" id="myTab" role="tablist" style="flex-wrap: nowrap;border-bottom:none;">
<li>
<div class="scroll-tab active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="tab1" aria-selected="true" style="text-align: center;">Information</div>
</li>
<li>
<div class="scroll-tab" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Products</div>
</li>
<li>
<div class="scroll-tab" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Podcasts</div>
</li>
<li>
<div class="scroll-tab" id="tab4-tab" data-bs-toggle="tab" data-bs-target="#tab4" role="tab" aria-controls="tab4" aria-selected="false">Databases</div>
</li>
<li>
<div class="scroll-tab" id="tab5-tab" data-bs-toggle="tab" data-bs-target="#tab5" role="tab" aria-controls="tab5" aria-selected="false">Web Development</div>
</li>
<li>
<div class="scroll-tab" id="tab6-tab" data-bs-toggle="tab" data-bs-target="#tab6" role="tab" aria-controls="tab6" aria-selected="false">Unboxing</div>
</li>
</ul>
<div class="arrow-icon"><i id="right" class="fa-solid fa-angle-right"></i></div>
</div>
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="tab1-tab">This is the content of Tabulation Link 1...
</div>
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="tab2-tab"> This is the content of Tabulation Link 2... </div>
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="tab3-tab"> This is the content of Tabulation Link 3... </div>
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="tab4-tab"> This is the content of Tabulation Link 4... </div>
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="tab5-tab"> This is the content of Tabulation Link 5... </div>
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="tab6-tab"> This is the content of Tabulation Link 6... </div>
</div><br><br>
<div class="wrapper">
<div class="arrow-icon"><i id="left2" class="fa-solid fa-angle-left"></i></div>
<ul class="tabs-box nav nav-tabs" id="myTab2" role="tablist" style="flex-wrap: nowrap;border-bottom:none;">
<li>
<div class="scroll-tab active" id="ytab1-tab" data-bs-toggle="tab" data-bs-target="#ytab1" role="tab" aria-controls="ytab1" aria-selected="true" style="text-align: center;">Requests</div>
</li>
<li>
<div class="scroll-tab" id="ytab2-tab" data-bs-toggle="tab" data-bs-target="#ytab2" role="tab" aria-controls="ytab2" aria-selected="false">Contacts</div>
</li>
<li>
<div class="scroll-tab" id="ytab3-tab" data-bs-toggle="tab" data-bs-target="#ytab3" role="tab" aria-controls="ytab3" aria-selected="false">Resources</div>
</li>
<li>
<div class="scroll-tab" id="ytab4-tab" data-bs-toggle="tab" data-bs-target="#ytab4" role="tab" aria-controls="ytab4" aria-selected="false">Settings</div>
</li>
<li>
<div class="scroll-tab" id="ytab5-tab" data-bs-toggle="tab" data-bs-target="#ytab5" role="tab" aria-controls="ytab5" aria-selected="false">Subscriptions</div>
</li>
<li>
<div class="scroll-tab" id="ytab6-tab" data-bs-toggle="tab" data-bs-target="#ytab6" role="tab" aria-controls="ytab6" aria-selected="false">Social Media</div>
</li>
</ul>
<div class="arrow-icon"><i id="right2" class="fa-solid fa-angle-right"></i></div>
</div>
<div class="tab-content" id="myTabContent2">
<div role="tabpanel" class="tab-pane fade active show mt-2" id="ytab1" aria-labelledby="ytab1-tab">This is the content of Tabulation Link 1a...
</div>
<div class="tab-pane fade mt-2" id="ytab2" role="tabpanel" aria-labelledby="ytab2-tab"> This is the content of Tabulation Link 2a... </div>
<div class="tab-pane fade mt-2" id="ytab3" role="tabpanel" aria-labelledby="ytab3-tab"> This is the content of Tabulation Link 3a... </div>
<div class="tab-pane fade mt-2" id="ytab4" role="tabpanel" aria-labelledby="ytab4-tab"> This is the content of Tabulation Link 4a... </div>
<div class="tab-pane fade mt-2" id="ytab5" role="tabpanel" aria-labelledby="ytab5-tab"> This is the content of Tabulation Link 5a... </div>
<div class="tab-pane fade mt-2" id="ytab6" role="tabpanel" aria-labelledby="ytab6-tab"> This is the content of Tabulation Link 6a... </div>
</div>
Here's a jsfiddle showing the problem
Related
I am using Bootstrap 4 to make a tab slider and I want to handle the tabs from the top, bottom, left & right clicks. I wrote codes in jquery to do the same. But getting the RangeError like above as mentioned in the question title.
When I comment the jquery code related to Lower Tabs, it works perfectly for the top, left & right click, but the lower tabs don't work in the way as I want. Please find out the solution for me. Thanks in Advance...
HTML is as below:-
<body>
<h1 class="my-5 text-center">Tab Slider</h1>
<div class="col-sm-6 offset-sm-3">
<ul class="nav nav-tabs my-tab upper">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab5">Tab 5</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h1>This is Tab 1</h1>
<p>This is the paragraph for Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<h1>This is Tab 2</h1>
<p>This is the paragraph for Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<h1>This is Tab 3</h1>
<p>This is the paragraph for Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<h1>This is Tab 4</h1>
<p>This is the paragraph for Tab 4</p>
</div>
<div class="tab-pane fade" id="tab5">
<h1>This is Tab 5</h1>
<p>This is the paragraph for Tab 5</p>
</div>
<button class="tab-navigate tab-prev"><i class="fas fa-chevron-left"></i></button>
<button class="tab-navigate tab-next"><i class="fas fa-chevron-right"></i></button>
</div>
<ul class="nav nav-tabs my-tab lower">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab5">Tab 5</a>
</li>
</ul>
</div>
</body>
CSS code is:-
.my-tab.upper {
margin-top: 15px;
border-bottom: 3px solid blue;
}
.my-tab.upper .nav-link {
border-bottom: 5px solid transparent;
}
.my-tab.upper .nav-item.show .nav-link, .my-tab.upper .nav-link.active {
border-bottom: 5px solid blue;
}
.my-tab.lower {
border-top: 3px solid blue;
border-bottom: 0;
}
.my-tab.lower .nav-item.show .nav-link, .my-tab.lower .nav-link.active {
border-top: 5px solid blue;
}
.my-tab .nav-item.show .nav-link, .my-tab .nav-link.active {
color: blue;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
margin: 0 10px;
}
.my-tab .nav-link {
border: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #000;
font-family: 'GothamProNarrow-Bold';
font-size: 16px;
}
.tab-prev {
left: -75px;
}
.tab-navigate {
outline: 0;
width: 45px;
height: 45px;
text-align: center;
line-height: 42px;
border-radius: 50%;
border: 2px solid blue;
color: blue;
background-color: white;
position: absolute;
top: 50%;
}
.tab-next {
right: -75px;
}
Jquery code is:-
$(document).ready(function(){
var tabsUpper = $(".my-tab.upper");
var tabsLower = $(".my-tab.lower");
var $tabsUpperLinks = $(".my-tab.upper").find(".nav-link");
var $tabsLowerLinks = $(".my-tab.lower").find(".nav-link");
//When click on Upper Tabs
for(let i = 0; i < $tabsUpperLinks.length; i++){
let clickedUpperLink = $($tabsUpperLinks[i]);
clickedUpperLink.on("click", function(e){
let clickedLowerLink = $($tabsLowerLinks[i])
clickedLowerLink.click();
return;
});
}
//When click on Lower Tabs
for(let j = 0; j < $tabsLowerLinks.length; j++){
let lowerLink = $($tabsLowerLinks[j]);
lowerLink.on("click", function(){
let upperLink = $($tabsUpperLinks[j])
upperLink.click();
return;
});
}
//When click for next tab
$(".tab-next").on("click", function(){
$.each(tabsUpper, function(index, value){
let $navItems = $(this).find(".nav-link");
let navItemsLength = $navItems.length;
for(let i = 0; i < navItemsLength; i++){
let activeTabLink = $($navItems[i]);
if(activeTabLink.hasClass("active")){
nextTabLink = $($navItems[i+1]);
if(i == navItemsLength-1){
nextTabLink = $($navItems[0]);
}
activeTabLink.removeClass("active");
nextTabLink.click();
return;
}
}
});
});
//When click for previous tab
$(".tab-prev").on("click", function(){
$.each(tabsUpper, function(index, value){
let $navItems = $(this).find(".nav-link");
let navItemsLength = $navItems.length;
for(let i = navItemsLength-1; i >= 0; i--){
let activeTabLink = $($navItems[i]);
if(activeTabLink.hasClass("active")){
prevTabLink = $($navItems[i-1]);
if(i == 0){
prevTabLink = $($navItems[navItemsLength-1]);
}
activeTabLink.removeClass("active");
prevTabLink.click();
return;
}
}
});
});
});
in my code i want every tab-content should be hidden then when i click on the menu then the menu wise contents will open,I've done all these so far.now i want when i click the menu it should slideDown the content slowly and again if i click on that menu the content should be closed with slideUp .
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
$('.tab-content').hide().slideDown(600);
});
I want when like this but not happening actually. DEMO
$(document).ready(function() {
$('.tabs .col-3 a').click(function(e) { // Or bind to any other event you like, or call manually
e.preventDefault();
var hrefid = $(this).attr("href");
var tabid = ($(this).attr("href")).replace('#', ''); // remove #
var getContent = $(hrefid).html();
$('#maintabcontent').hide().html(getContent).stop().fadeIn(1400);
$('span.plus').text("+");
var $t = $('.tab-container');
if ($(this).parent().hasClass('active')) {
$(this).find('span').text("+");
$t.slideUp(function() {
$('#maintabcontent').html('');
});
$(this).parent().removeClass('active');
} else {
$(this).find('span').text("-");
$t.slideDown(600, function() {
});
if ($t.is(':visible')) {
$('.col-3').removeClass('active');
$(this).parent().addClass('active');
}
}
});
});
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-small {
padding-bottom: 1rem;
padding-top: 1rem;
}
.text-center {
text-align: center;
}
.col-3 {
display: inline-block;
max-width: 403px;
overflow: hidden;
position: relative;
vertical-align: top;
width: 32.5%;
}
.tabs .col-3 {
border-right: 2px solid #ffffff;
cursor: pointer;
}
.tab-container {
background: #505050 none repeat scroll 0 0;
display: none;
position: relative;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-big {
padding-bottom: 2rem;
padding-top: 2rem;
}
.tab-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-width container tabs">
<div class="main-container">
<div class="col-3 first text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
<div class="col-3 second text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
<div class="col-3 text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
</div>
</div>
<div class="tab-container">
<div class="main-container padding-top-bottom-big" id="maintabcontent"></div>
</div>
<div id="tab-1" class="tab-content">Tab Content 1</div>
<div id="tab-2" class="tab-content">Tab Content 2</div>
<div id="tab-3" class="tab-content">Tab Content 3</div>
Here you go with a solution http://jsfiddle.net/otpq2c5j/38/
$(document).on('click','.nav-link', function(){
$('.tab-pane').slideUp('fast');
$($(this).attr('href')).slideDown('slow');
});
.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">Good</div>
<div class="tab-pane" id="profile" role="tabpanel">Best</div>
<div class="tab-pane" id="messages" role="tabpanel">Poor</div>
<div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>
Hope this is what you are looking for:
$('.tab-content').hide();
$(document).on('click','.nav-link:not(.active)', function(){
$('.tab-content').slideDown("slow");
});
$(document).on('click','.nav-link.active', function(){
$('.tab-content').slideToggle("slow");
});
.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">Good</div>
<div class="tab-pane" id="profile" role="tabpanel">Best</div>
<div class="tab-pane" id="messages" role="tabpanel">Poor</div>
<div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>
You can do it with simple CSS. Instead of the code $('.tab-content').hide().slideDown(600);
use transition: height 1s; in your active class in css.
What this does is, smoothly transitions from the previous class to the active class. There are many customizations that you can do to the transition effect. Take a look at the transition attributes here for reference.
Add active class to first tab-content div
<div class="tab-pane active" id="home" role="tabpanel">Good</div>
Update css like this
.tab-content{
background-color:#ccc;
}
.tab-pane.active{
display:block;
}
Update js file like this
$(document).on('click','.nav-link', function(){
var href = $(this).attr('href').substring(1);
//$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').slideToggle(600);
});
I'm trying to loop through a set of element's IDs and match it against another set of element's attribute (aria-labelledby) but only if it is the active panel and I cannot find a solution to it.
$('body a').mouseenter(function() {
e = $(this);
btnClass = e.attr('class');
switch (btnClass) {
case 'nav-link':
tabID = $(this).attr('id');
paneID = $('#v-pills-tabContent').children();
paneID.each(function(index) {
console.log(index + ": " + $(this).prop('id'));
});
break
}
});
.nav-link {
display: block;
text-decoration: none !important;
padding: 14px;
border-bottom: 1px solid #eff1f2;
color: #747474;
}
#v-pills-tab a:last-child {
border-bottom: 0;
}
.tab-content > .active {
opacity: 1;
}
.col-3,.col-9 {
float: left;
}
.col-9 {
width: 250px;
}
.col-3 {
border: 1px solid #eff1f2;
}
#v-pills-tabContent p {
margin-bottom: 18px;
}
.day-num,.day-name,.month-name,.year-name {
display: block;
text-align: center;
}
.day-num,.month-name,.schedule-header {
font-size: 28px;
}
.day-name,.year-name {
font-size: 14px;
}
.schedule-header {
display: block;
text-align: center;
line-height: 3.2em;
}
.radio-link {
padding: 10px 20px;
position: relative;
}
.schedule-radio {
width: 18px;
height: 18px;
background: #fff;
border: 2px solid #eff1f2;
border-radius: 50%;
display: inline-block;
border-radius: 25px;
margin: 0 10px 0 0;
position: absolute;
left: -6px;
top: 8px;
}
.tab-content .no-top-margin {
margin-top: 0 !important;
}
.tab-content > .tab-pane {
margin-top: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<div class="nav-link" role="tab" aria-expanded="true"><span class="month-name">Oct</span><span class="year-name">2017</span></div>
<a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">
<span class="day-num">9</span>
<span class="day-name">Thursday</span>
</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">
<span class="day-num">10</span>
<span class="day-name">Friday</span>
</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">
<span class="day-num">11</span>
<span class="day-name">Saturday</span>
</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">
<span class="day-num">12</span>
<span class="day-name">Sunday</span>
</a>
</div>
</div>
<div class="col-9">
<div class="tab-pane no-top-margin" id="v-pills-currentdate" role="tabpanel" aria-labelledby="v-pills-currentdate-tab">
<p style="margin-bottom:0;" class="no-top-margin"><span class="schedule-header">Schedule</span></p>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:05pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:25pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:35pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:35pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:25pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:15pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">9:45pm CST</time></span></p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">3:10pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:35pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:55pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:15pm CST</time></span></p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:15pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:20pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:30pm CST</time></span></p>
<p><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></p>
</div>
</div>
</div>
I need to find the active panel and get its attribute (aria-labelledby).
The attribute (aria-labelledby) will be used to match an ID from another set of elements.
This should be triggered by the jQuery mouseenter event.
For better understanding, I have a live example on JSFiddle
If you want to find the child of #v-pills-tabContent that has the attribute aria-labelledby equal to the id of the clicked a element, this is what you should do:
tabID = $(this).attr('id');
paneID = $('#v-pills-tabContent')
.children('[aria-labelledby="' + tabID + '"].active')
The selector '[aria-labelledby="' + tabID + '"].active' will match the active elements that have aria-labelledby equal to tabID.
Every active tab should have .active class.
If so, inside the switch statement you can use $('.tab-pane.active').attr('aria-labelledby')to get the aria-labelledby value.
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.
Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>