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);
});
Related
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
I have these 3 row of tabs. First row has options Construction and Interior. On clicking construction it should open the row of tabs with id as construction and make interiors disappear and on clicking Interior Tab it should be able to open the row with id as interiors. Kindly help if this is possible only with CSS, or should we use Javascript? Have tried many ways with CSS, but unable to do so.
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#construction">Construction</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="interior">Interiors</a>
</li>
</ul>
<br>
<br>
<div id="construction">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury</a>
</li>
</ul>
</div>
<div id="interior">
<ul class="nav nav-tabs nav-justified" role="tablist" id="interior">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury Interiors</a>
</li>
</ul>
</div>
an example of a trick to use :check pseudo with hidden radio input
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 45px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>Stuff for Tab Two</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
</div>
</div>
</div>
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;
}
}
});
});
});
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 some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}