Is there a way to to make the images of the carousel to go viewport centered when click?
It will only center if you click the bullet navigations, I need it to center if you click the object itself (li)
Here is my html currently, 5 image carousel with content showing below on hover/click
Thanks
<div uk-slider="center: true">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-grid-collapse uk-grid-small uk-child-width-1-2 uk-child-width-1-2#s uk-child-width-1-5#m company-slider" align="center">
<li><img src="images/image1.jpg""></li>
<li><img src="images/image2.jpg""></li>
....
....
</ul>
</div>
<a class="uk-position-center-left-out slide-ars" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out slide-ars" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center"></ul>
</div>
<div>
<ul class="uk-subnav uk-hidden">
<li>Item</li>
<li>Item</li>
...
...
</ul>
<ul class="uk-switcher uk-margin company-content">
<li>
<div>
<h3>Slide Title 1</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
<li>
<div>
<h3>Slide Title 2</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
...
...
</ul>
</div>
here is the jquery to switch content below the slider when hover or click
var $switch = UIkit.switcher('.uk-subnav', { animation: 'uk-animation-fade', swiping: false });
$('.uk-slider-items li').bind('click mouseover',function(event){
var idVal = $(this).index();
$switch.show(idVal);
});
Related
I am creating a website for a client. It occurred to me that I might have to create similar websites in the future, so I would like to create a template website that allows me to change specific parts of the website to make the site fit to the particular client. I want to go to one file where I can change the contact information (name, phone number, email, ect) and these changes will update across all the html files.
In addition I want to set up the template so that I can dynamically populate links in navbars and footers. Ultimately this will be a 12 to 15 page website, I only want to update the data for the navbar/footer in one file so that the rest of the 12 to 15 pages with navbars/footers will dynamically populate.
Here is my file tree. Currently there is no css, only html.
main directory
css folder
main.css
main.css.map
main.scss
Javascript Folder
index.js
about.html
contact.html
index.html
Below is index.js file. Currently, this works for index.html, meaning that contact information in the footer is correctly populated, and the links in the navbar element are correctly populated. This file is not populating the links in contact.html & about.html. Herein lies my problem. Is there a way to use this one index.js file to update the links in elelments in contact.html and about.html?
let yourName = document.querySelector('#yourName');
let NMLS = document.querySelector('#NMLS');
let address1 = document.querySelector('#address1')
let address2 = document.querySelector('#address2')
let cityState = document.querySelector('#cityState')
let phone = document.querySelector('#phone')
let email = document.querySelector('#email')
let hours = document.querySelector('#hours')
let homeLink = document.getElementById('homeLink')
let aboutLink = document.getElementById("aboutLink");
let contactLink = document.getElementById('contactLink')
// Change this data depending on client
let firstName = "John"
let lastName = "Doe"
let yourNMLS = "359846"
let yourAddress1 = "1235 4th Street"
let yourAddress2 = ""
let yourCity = "San Diego"
let yourState = "CA"
let yourZip = "96586"
let yourLocalCity = "Escondido"
let yourPhone = "619-213-2589"
let yourEmail = "youremail#gmail.com"
let daysOpen = "Daily"
let hoursOpen = "8:00AM - 5:00PM"
// data for links in navbar
let yourAboutLink = "about.html"
let yourHomeLink = "index.html"
let yourContactLink = "contact.html"
// leave this alone
yourName.innerHTML = `${firstName} ${lastName}`
NMLS.innerHTML = `NMLS: ${yourNMLS}`
address1.innerHTML = `${yourAddress1}`
address2.innerHTML = `${yourAddress2}`
cityState.innerHTML = `${yourCity}, ${yourState} ${yourZip}`
email.innerHTML = `${yourEmail}`
phone.innerHTML =`${yourPhone}`
hours.innerHTML = `${daysOpen}: ${hoursOpen}`
homeLink.href = `${yourHomeLink}`
aboutLink.href = `${yourAboutLink}`
contactLink.href = `${yourContactLink}`
Below is index.html file. The relevant sections are the nav element in header element, and the ul and li elements in the footer elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Loan officer website template</title>
</head>
<body>
<!-- Header Start -->
<div class="hero-wrapper">
<header>
Company Logo
<nav>
<ul>
<li><a id="homeLink" href="#">home</a></li>
<li><a id="aboutLink" href="#">about</a></li>
<li><a id="contactLink" href="#">contact</a></li>
<li><a id ="applyNowLink" href="#">Apply Now</a></li>
</ul>
</nav>
</header>
<div class="hero-content">
<h1>Your Name Home Loans</h1>
<p class="subtitle">Your Local Mortgage Experts</p>
</div>
</div>
<!-- Qiuck features start -->
<div class="quick-features">
<div class="quick-features-content">
<h1>Your "Name of city" Mortgage Experts</h1>
<p class="subtitle">Welcome to your hometown Escondido mortgage professionals</p>
</div>
<div class="features-cards-wrapper">
<ul>
<li>
<img src="#" alt="house icon">
<h2>Purchase Loans</h2>
<p>Get Pre-Qualified</p>
<p>Mortgage Process</p>
<p>Types of Mortgage</p>
<p>Glossary of Terms</p>
<p>Understanding Your Credit</p>
</li>
<li>
<img src="#" alt="hourglass icon">
<h2>Refinancing</h2>
<p>Refinancing Facts</p>
<p>Types of Mortgages</p>
<p>Our Blogess</p>
<p>Process of a Mortgage</p>
<p>Understanding Your Credit</p>
</li>
<li>
<img src="#" alt="pencil and pad icon">
<h2>Popular Mortgage Programs</h2>
<p>FHA</p>
<p>Conventional</p>
<p>203(K)</p>
<p>VA</p>
<p>View All Programs</p>
</li>
</ul>
</div>
</div>
<!-- Testimonials start -->
<div class="testimonials-wrapper">
<div class="testimonials-content-wrapper">
<h1>What our clients say</h1>
<hr>
<ul class="testimonials">
<li>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
<cite>John Doe</cite>
</li>
<li>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
<cite>Jane Doe</cite>
</li>
<li>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
<cite>Mark Smith</cite>
</li>
</ul>
</div>
</div>
<!-- blog start -->
<div class="blog-wrapper">
<h1>Blog</h1>
<hr>
<div class="blog-content-wrapper">
<ul class="blog-content">
<li>
<img src="#" alt="blog image">
<h4>Title of blog entry</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
</p>
</li>
<li>
<img src="#" alt="blog image">
<h4>Title of blog entry 2</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
</p>
</li>
<li>
<img src="#" alt="blog image">
<h4>Title of blog entry 3</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
</p>
</li>
</ul>
</div>
</div>
<!-- Call to action -->
<div class="call-to-action-wrapper">
<h1>Questions?</h1>
<button>Contact Us</button>
</div>
<!-- footer -->
<footer>
<div class="contact-info-wrapper">
<ul>
<li>
<h2>Call Us</h2>
<p id="phone"></p>
</li>
<li>
<h2>email</h2>
<p id="email"></p>
</li>
<li>
<h2>Open Hours (PST)</h2>
<p id="hours"></p>
</li>
</ul>
</div>
<div class="nmls-wrapper">
<ul>
<li>
<h2>Contact</h2>
<p id="yourName"></p>
<p id="NMLS"></p>
<p id="address1"></p>
<p id="address2"></p>
<p id="cityState"></p>
</li>
<li>
<img src="#" alt="equal housing logo">
</li>
</ul>
</div>
<hr>
<div class="disclaimer-wrapper">
<p>Disclaimer</p>
<p>All information is deemed reliable but not guaranteed. All properties are subject to prior sale, charge or withdrawal. Neither listing broker(s) or information provider(s) shall be responsible for any typographical errors, misinformation, misprints and shall be held totally harmless. Listing(s) information is provided for consumers personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumers may be interested in purchasing.</p>
<p>Copyright © 2020, ODL Websites. All Rights Reserved.</p>
</div>
</footer>
<script type="text/javascript"src="./javascript/index.js"></script>
</body>
</html>
Below is contact.html file. Again, my index.js is not working with this file, meaning the links in nav element are not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Contact Page</h1>
<header>
Company Logo
<nav>
<ul>
<li><a id="homeLink" href="#">home</a></li>
<li><a id="aboutLink" href="#">about</a></li>
<li><a id="contactLink" href="#">contact</a></li>
<li><a id ="applyNowLink" href="#">Apply Now</a></li>
</ul>
</nav>
</header>
<script type="text/javascript"src="./javascript/index.js"></script></body>
</html>
Finally my about.html file. Again, index.js is not working with this file, meaning the links in nav are not updating.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>About Page</h1>
<header>
Company Logo
<nav>
<ul>
<li><a id="homeLink" href="#">home</a></li>
<li><a id="aboutLink" href="#">about</a></li>
<li><a id="contactLink" href="#">contact</a></li>
<li><a id ="applyNowLink" href="#">Apply Now</a></li>
</ul>
</nav>
</header>
<script type="text/javascript"src="./javascript/index.js"></script></body>
</html>
Since there's no #yourName element on the second and third files, when you do yourName.innerHTML = '${firstName} ${lastName}'; it is probably throwing an error (check your console).
To avoid that first check if the element exists:
if (yourName) yourName.innerHTML = '${firstName} ${lastName}';
if (NMLS) NMLS.innerHTML = `NMLS: ${yourNMLS}`
...
I have combined a pure CSS tab with a pure CSS accordion. Here are the sources:
Accordion: https://codepen.io/raubaca/pen/PZzpVe
Tabs: https://css-tricks.com/css3-tabs/
I have a pure CSS accordion on the first tab.
The problem is when the accordions are opened in the first tab and another tab is selected, the user can see the opened accordion underneath. How do I collapse the accordions when another tab is selected?
https://jsfiddle.net/Lance_Bitner/ybtqm1hq/
<div class="w3c">
<div id="tab16">
Tab 16
<div>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Introduction to SharePoint</label>
<div class="tab-content">
<div>
<div class="column2">
<img src="../images/classroom1.png">
<img src="../images/document1.png">
<img src="../images/presentation1.png">
<img src="../images/video1.png">
</div>
</div>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</div>
<div id="tab17">
Tab 17
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
Tab 18
<div>... that 2 should have been enough, but...</div>
</div>
</div>
Use input type radio instead of checkbox.
<input id="tab-four" type="radio" name="tabs2">
You can see the example here: https://codepen.io/raubaca/pen/PZzpVe
Cheers.
I'm trying to do something simple with jQuery but having a hard time. I would like to do the following
Loop through each li element and check whether it has a specific class applied 'timeline-inverted'
If the class I'm looking for exists on the li then I would like to apply some further classes 'visible animated fadeInRight'
If the class doesn't exist, then I want to apply an alternative class 'visible animated fadeInLeft'
Here is what I have so far...
HTML Output
<ul class="timeline">
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2010</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2014</h4>
<h4 class="subheading">Another great month</h4>
</div>
<div class="timeline-body">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br>Of Our
<br>Story!
</h4>
</div>
</li><!-- /.timeline -->
</ul>
Jquery
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$('.timeline li').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
If the li item has the timeline-inverted class i want it to fly in from the right and if it doesnt have the timeline-inverted class i want it to fly in from the left!
Thanks paul
*Edit - This code works for me :)
$(function () {
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").viewportChecker({
classToAdd:'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
});
You don't need to use each(). You can do it like following.
$('.timeline li.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight',
offset: 100
});
$('.timeline li').not('.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
TRy this : put your script inside $(function(){..}); and use $(this) instead of $('.timeline li').
$(function(){
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").addClass('visible animated fadeInRight').viewportChecker({
offset: 100
});
} else {
$(this).removeClass("hidden").addClass('visible animated fadeInLeft').viewportChecker({
offset: 100
});
}
});
});
hey guys i am using the bootstrap tabs component in one of my projects , now i wanted to add some animations to my bootstrap tabs , below is the HTML code :
<ul class="nav nav-tabs" id="myTab">
<li class="active">General fitness</li>
<li>Cardio</li>
<li>weight training</li>
<li>weight loss</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
now everything works fine , notice how i am adding an animation to <img> and the 2nd <div class="col-md-5"> .
below is the script i wrote for the animations to apply , everytime a tab is clicked :
Jquery script :
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout( function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
its short and sweet , the problem is for removal of the class the setTimeout function takes 2 secound , which means that if the user turns out to be a click maniac , the animations won't run , the reason , i can't lover the 2 secounds rule is that , the animation runs for 2 secound .
I would be grateful if somebody can help me join the missing peice here , I.E. how do i make the animations appear everytime a tab is clicked ??
Thank you.
Alexander.
Add an event lister on the element for the animationend/transitionend events
first obtain the transition end name with the properly prefix. (Use Modernizr or read this article to implement the logic without Modernizr to obtain the event name with prefix)
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
'MozTransition' : 'transitionend', // only for FF < 15
'transition' : 'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Then add the eventListener with the callback
element.addEventListener(transEndEventName, transitionEndCallback);
Also you can just implement your desired animation when the element becomes active, only once
#myTab.active img {
animation: bounce-left-right 2s ease 1; //Actually is 1 by default so it's not necessary
}
#keyframe {
0% {//bounce left animation}
100% {//bounce right animation}
}
I have a small difficulty with the Bootstrap tabs.
Basically I am using these tabs for a demo site and I have the following HTML structure.
HTML :
<ul class="nav nav-tabs" id="myTab">
<li class="active">General fitness</li>
<li>Cardio</li>
<li>weight training</li>
<li>weight loss</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
Now this works perfectly fine, I have used this tabs feature for a lot of old sites of mine, but this time I decided to add some css-3 animations, so let's focus on the part that I am having difficulty with. Basically, every time a tab is clicked I want the <img> and the <div class="col-md-5"> to be added with the classes animated bounceInLeft and animated bounceInRight respectively.
Now, what did I do to achieve this, basically every time the tabs are clicked an event fires, hidden.bs.tab and every time a tab is shown an event fires shown.bs.tab. Now I wrote the below code :
$('#myTab').on('hidden.bs.tab' , function(){
// console.log('tab hidden');
$('.tab-content img').removeClass('animated bounceInLeft');
$('.tab-content .col-md-5').removeClass('animated bounceInRight');
});
$('#myTab').on('shown.bs.tab' , function(){
// console.log('tab hidden');
if ($('.tab-pane').hasClass('active')) {
$('.tab-content img' ).addClass('animated bounceInLeft');
$('.tab-content .col-md-5').addClass('animated bounceInRight');
}
});
There is a big flaw with the above code I have written though, what I wanted to achieve is when I click on a tab I only want the <img> and the <div class="col-md-5"> of that particular tab to be added with the classes animated bounceInLeft and animated bounceInRight respectively. But what the above code is really doing is removing the classes from all the elements and immediately re-adding them.
I am thinking the this keyword maybe needs to be used, but am I not sure how to implement this; can somebody tell me what am I missing?
I don't know if Bootstrap has animated classes?
However you could use this repo to achieve the preferred animation you want.
Add this:
<link rel="stylesheet" href="animate.min.css">
I've updated the HTML slightly(added class text-content to every col-md-5).
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="http://lorempixel.com/400/200/" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5 text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
And this jQuery
$(document).ready(function(){
//make first tab active
$("#myTab li:eq(0) a").tab('show');
$('#myTab').on('hidden.bs.tab' , function(){
$('.text-content').removeClass('animated bounceInRight');
$('img').removeClass('animated bounceInLeft');
});
$('#myTab').on('shown.bs.tab' , function(){
$('.active').find('.text-content').addClass('animated bounceInRight');
$('.active').find('img').addClass('animated bounceInLeft');
});
});
Using a little setTimeout magic, I found the solution:
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout( function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
Note: to the col-md-5 that I add the animated bounceInRight class I also add the class add-animation as a hook, could have used a css selector, but never mind.
Drawback of this method : if the user turns out to be a click maniac, the animations will not show, because that's the way setTimeout works :D