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
Related
I have a problem with starting with the new beginning line after text is passed by Image.
I just wrote many sentences in the <p> tag in the portfolio-description part and all these texts are appeared in that part not starting with the new beginning line under image if the last line of text is passed by Image.
Here is the alignment issue https://ibb.co/825KFHJ
What I want to do that : https://ibb.co/RvM48rn
How can I do that? What file should I use? (CSS or JS)
<section id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row gy-4">
<div class="col-lg-6">
<div class="portfolio-details-slider swiper-container">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-6">
<div class="portfolio-info">
<h3>Project information</h3>
<ul>
<li><strong>Category</strong>: Web design</li>
<li><strong>Customer</strong>: ASU Company</li>
<li><strong>Project Date</strong>: 01 March, 2020</li>
</ul>
</div>
<div class="portfolio-description">
<h2>Project Title</h2>
<p>
Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur
dignissimos. Sequi nulla at esse enim cum deserunt eius.
</p>
</div>
</div>
</div>
</div>
</section>
I'm struggling to create my own simple modal experience for my portfolio. All I'm trying to do is let the user click an image and have a modal box pop up with the information that correlates to the image clicked. Thats all well and fine, however I can't seem to get Jquery to do this programmatically. I'm rusty with my Javascript and something isn't clicking in my brain, i know this shouldn't be hard.
Here is my html
<div class="projects">
<div class="projects__grid">
<a class="modal-trigger" data-target="modal1">
<div class="projects__image">
<div class="modal" id="modal1">
<div class="project__desc modal-content">
<p class="text">1st modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
</p>
</div>
</div>
</div>
</a>
<a class="modal-trigger" data-target="modal2">
<div class="projects__image">
<div class="modal" id="modal2">
<div class="project__desc modal-content">
<p class="text">2nd modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
sure I could just create custom classes or id's for every modal trigger, but I want to keep my code DRY. I've tried:
$(this, '.modal-trigger').click(function() {
$(this, '.modal').toggle();
})
and many other similar attacking angles. What am I missing here? I just need to retrieve the nested ID for the related modal content from whichever modal-trigger is clicked. I know I have to use 'this' somehow but I can't seem to figure it out.
Thanks for any insight, sorry if this has been posted before, I couldn't find anything that answered my question..somehow.
I have made a fiddle, where this should work
jsfiddle
$('.modal-trigger').click(function(event) {
let modalExample = $(this).find('.modal');
modalExample.toggle();
});
You have to remove this in your click-event
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}
}