I'd like to add a fadeout to the tabs on my page here, if someone could help with the javascript side?
Here's the html:
<ul class="tabs clearfix">
<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="maptab"><div class="up"></div>Map</li>
<li class="featurestab"><div class="up"></div>Features</li>
<li class="voucherstab"><div class="up"></div>Offers</li>
</ul>
And the here's the javascript:
$(window).load(function(){
$('.tab:not(.aboutus)').hide();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').hide();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.map').show();
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.vouchers').show();
}
}
});
I have the bootstrap.js plugin from here and would like to use that, if anyone was familiar with that it'd be ideal.
Here's how I would like it to work.
Update: This is what I have now, but the fade effect is different for each tab almost - I like the transition back to the About Us tab which isn't as "heavy" as the transition of the others. The offers tab is leaving remnants of the 'Features' tab content too.
$(window).load(function(){
$('.tab:not(.aboutus)').fadeOut();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').fadeOut();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
newContent.hide();
currentContent.fadeOut(750, function() {
newContent.fadeIn(500);
currentContent.removeClass('current-content');
newContent.addClass('current-content');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.map').fadeIn(500);
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.vouchers').fadeIn(500);
}
}
});
As you are already using jQuery its very simple... you need not go into that manipulation of code. JQuery UI has tabs widget.
http://jqueryui.com/tabs/#default
If you want to load content on Ajax
http://jqueryui.com/tabs/#ajax
Here is complete API..
http://api.jqueryui.com/tabs/#option-hide
DEMO
HTML Changes
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>TAB 1</p>
</div>
<div id="tabs-2">
<p>TAB 2</p>
</div>
<div id="tabs-3">
<p>TAB 3</p>
</div>
</div>
Changed JavaScript
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
In your code you can do following changes (assuming contents of all div available at page load time )
<div id="tabs">
<ul class="tabs clearfix">
<li class="aboutus tab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="map tab"><div class="up"></div>Map</li>
<li class="features tab"><div class="up"></div>Feature</li>
<li class="vouchers tab"><div class="up"></div><a href="#offers">Offers</li>
</ul>
<div id="about">
<p>about TAB 1</p>
</div>
<div id="map">
<p>MAP TAB 1</p>
</div>
<div id="features">
<p>features TAB 1</p>
</div>
<div id="offers">
<p>offers TAB 1</p>
</div>
</div>
And java script (remember you need to add jquery and jquery ui js and css)
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
Try this:
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$('.tabs li').removeClass('active');
$(thisAd).children('.tab').fadeOut(250, function(){
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$(this).addClass('active');
});
});
You can change the duration of 250 to whatever you want. All I'm doing is fading out the tab that is currently open before showing the new one in the fadeOut() callback.
Related
Im trying to add 'slick active' class to an a tag when the slide has been dragged. The class is applied on click but cant work out how to apply it to the other!
Any help deciphering my code would be much appreciated!
JS
$(document).ready(function() {
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
$('.slider').on('afterChange', function(event,slick,i) {
$('.links li a .slick-slide').removeClass('slick-current');
$('.links li a .slick-slide').eq(i).addClass('slick-current');
});
$('.links li a .slick-slide').eq(0).addClass('slick-current');
});
HTML
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
You have to add the class slick-initialized to links.
We don't have your HTML but it should look something like this:
<div class="links slick-initialized">
<li><a><span class="slick-slide">1</span></a></li>
<li><a><span class="slick-slide">2</span></a></li>
<li><a><span class="slick-slide">3</span></a></li>
</div>
update
now that we have the HTML it's clear why you still have a problem. You set the class with $('.links li a .slick-slide'). That matches my code from above, you, however, have a different structure.
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
first you would have to change it to
<ul class="links slick-initialized">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
and second change the jquery to $('.links li a.slick-slide') (space removed between a and .slick-slide).
I have multiple carousels using the Slick Slider plugin on one page. I've managed to setup custom navigation for each carousel but I would like each navigation link to toggle between two classes when clicked.
I've managed to create a toggle between the two however it's applying the toggle to all carousels, not just the one with the navigation that's been clicked.
Update:
I need the classes to only toggle when the carousel changes slide.
I'm almost where I need to be but a little stuck and would appreciate any help finishing this off.
Here's the demo - http://jsfiddle.net/81t4pkfa/158/
HTML:
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
<div class="option">
<p>Test 1</p>
</div>
<div class="option">
<p>Test 1 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
1. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
1. Slide 1
</li>
</ul>
</div>
<div class="test">
<div class="option">
<p>Test 2</p>
</div>
<div class="option">
<p>Test 2 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
2. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
2. Slide 1
</li>
</ul>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
<p>Test 3</p>
</div>
<div class="option">
<p>Test 3 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
3. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
3. Slide 1
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
JS:
$('.test').each(function (idx, item) {
var carouselId = "carousel" + idx;
this.id = carouselId;
$(this).slick({
slide: "#" + carouselId +" .option",
adaptiveHeight: true,
autoplay: false,
arrows: false,
dots: true
});
});
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$('.tab').toggleClass('inactive-slide active-slide');
});
Change to this
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).parents('.tabs').find('.tab').toggleClass('inactive-slide active-slide');
});
EDIT :
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).parents('.tabs').find('.tab').removeClass('active-slide');
$(this).parents('.tabs').find('.tab').addClass('inactive-slide');
$(this).parent().addClass('active-slide');
$(this).parent().removeClass('inactive-slide');
});
What you really want do is to change tabs activity class not on click but on slide change. You should keep only slide change trigger (slickGoTo) in your .tab on click event. There's a set of events in Slick Carousel that will tell you that the slide has (or is going to) change, e.g. beforeChange. That's what you should use to toggle activity.
Your code should look then like this:
$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (currentSlide !== nextSlide) {
$(this).find('.tab').toggleClass('inactive-slide active-slide');
}
});
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
});
http://jsfiddle.net/norin89/81t4pkfa/161/
UPDATE:
Note that this gonna work only for 2 slides due to .active-slide / .inactive-slide classes toggling. So on slide change in current code all previously inactive tabs will be toggled to active. If you want only one active tab to get .active-slide class you might do something like this:
$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(this).find('.tab').removeClass('active-slide').addClass('inactive-slide')
.eq(nextSlide).toggleClass('active-slide inactive-slide');
});
http://jsfiddle.net/norin89/81t4pkfa/164/
The issue is because you're toggling the class on all .tabs elements. Instead you need to traverse the DOM to call toggleClass() only on those which are contained within the same .tabs as the a which caused the click event. To do that you can use closest() and find(), like this:
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).closest('.tabs').find('.tab').toggleClass('inactive-slide active-slide');
});
Updated fiddle
How do I add a class to an <li> element when it is clicked?
I have the following code:
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)" class="mbutton">Cheerful</li>
<li id="tabs2" onclick="showStuff(this)" class="mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent" style="display: block;">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent" style="display: block;">
<h4>Content 2</h4>
</div>
When the user clicks on the first <li> then content 1 is shown and the same will happen for the 2nd <li> with the 2nd content.
Here is my JS:
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
$('ul#moodtabs li').click(function() {
$('ul li.current').removeClass('current');
$(this).closest('li').addClass('current');
});
I'm trying to add a class active to the <li> tags so I can style them when they are active.
Your code already works (could be though better written)
But most probably you're missign to wrap your jQuery code in DOM ready:
jQuery(function( $ ){ // DOM ready
$('.tabs').each(function() {
var $tab = $(this).find(".tab");
$tab.on("click", function() {
var tabId = this.id.replace(/\D/g,'');
$tab.not(this).removeClass('current');
$(this).addClass('current');
$(".tabContent").removeClass("current");
$("#tabs-"+tabId).addClass("current");
});
});
});
.mbutton {background:none;}
.mbutton.current{background:red;}
.tabContent {display:none;}
.tabContent.current{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" class="tab mbutton">Cheerful</li>
<li id="tabs2" class="tab mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent">
<h4>Content 222222</h4>
</div>
I think the simplest binding would be
$('ul#moodtabs li').click(function() {
$(this).addClass('current').siblings('li').removeClass('current');
});
You can also drop your javascript function entirely and have this be your full function
$('ul#moodtabs li').click(function() {
var myTab = $(this).index();
$(this).addClass('current').siblings('li').removeClass('current');
$('.tabContent').eq(myTab).css('display','block').siblings('.tabContent').css('display','none');
});
I am trying to directly linking from anchor link like Go back to 3 tab And i can't make it working. It's working perfectly from the menu but when i am trying to linking from the tab5 to tab3 is not working with anchor.
Here is the JS i am using.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
Is something wrong on my code or missing?
If i correctly understood you want to change tab programmatically, if so you can use $('.tabs').tabs('option', 'active', tab_index);, check example bellow.
Hope this helps.
$(function() {
$('.tabs').tabs();
$("#go_to_tab_3").click(function() {
$('.tabs').tabs('option', 'active', 2); //index 2 mean tab 3
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="tabs">
<ul>
<li>Tab 1 </li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content.</p>
</div>
<div id="tabs-2">
<p>tab 2 content.</p>
</div>
<div id="tabs-3">
<p>tab 3 content.</p>
</div>
</div>
<br>
<button id='go_to_tab_3' type='button'>Go to tab 3</button>
Hey guys, I got this JS code and want to add a slight fade effect when switching tabs, so it looks a little bit smoother.
<script type="text/javascript">
$(document).ready(function(){
initTabs();
});
function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}
And this is the corresponding HTML:
<ul id="tabMenu">
<li><a id="tab_1" class="active" href="#1">Tab 1</a></li>
<li><a id="tab_2" class="" href="#2">Tab 2</a></li>
</ul>
<div id="tabContent">
<div id="1" class="content active"></div>
<div id="2" class="content"></div>
</div>
Look at the FadeIn and FadeOut methods.
Using them is fairly straightforward:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
Try this:
replace:
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
by:
$('#tabContent div.content[id!='+thref+']').fadeOut('slow', function(){
$('#'+thref).fadeIn('slow');
});