I have two div tags(Div1,Div2) on my html page with few tabs, And I would like to hide the div2 tag on page load, And display it on clicking the other tab by hiding div1 tag.
Can any one help me how can I do this by using DOM or by using javascript
function myFunction() {
alert("helloworld");
document.getElementById("div2").style.display = "none";
}
function myFunction1() {
alert("helloworld");
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.visibility = "visible";
}
function myFunctionone() {
alert("helloworld");
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.visibility = "visible";
}
div.round1 {
border: 1px solid deepskyblue;
border-radius: 4px;
height: 170px;
width: 30%;
margin: auto;
}
.up {
vertical-align: -145px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="myFunction()">
<div id="div1" class="round1">
<table>
<tr>
<td>
<img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<div id="div2" class="round1">
<table>
<tr>
<td>
<img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<br>
<div align="left">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="myFunctionone()">One</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="myFunction1()">Two</a></li>
<li><a data-toggle="tab" href="#menu1">Functional</a></li>
<li><a data-toggle="tab" href="#menu3">Three</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>One</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Two</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Three</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Others</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function () {
$('#div2').hide()
$('.nav a').click(function () {
$('#div2').show()
$('#div1').hide()
})
})
Do you mean this?
first of all make the
.div2{
display:none;
}
so it should be hidden on page load.
then on the tabs put a data-target attribute like follow:
<div class="tab-pane fade" data-target="div2">
then on click do follow
$(".tab-pane").on("click",function(){
var item = $(this).attr("data-target");
if (item == "div2"){
$(".div2").show()
$(".div1").hide()
}else{
$(".div1").show()
$(".div2").hide()
}
}
please try
<script>
myFunction();
function myFunction() {
document.getElementById("div2").style.display = "none";
}
function myFunction1() {
document.getElementById("div1").style.display = "none";
}
function myFunctionone() {
document.getElementById("div2").style.visibility = "visible";
}
</script>
Remove on page load function and add display:none for div2.
//change jquery to toogle div
function myFunction1() {
$("#div2").show();
$("#div1").hide();
}
function myFunctionone() {
$("#div1").show();
$("#div2").hide();
}
I think that display = "block" will help you.
document.getElementById("div2").style.display = "block";
Complete and Simple Tab implementation with help of some css and JQuery here:
<div class="wrapper">
<h1>Quick and Simple Tabs</h1>
<p>A quick and easy method for tabs that supports multiple tab groups on one page.</p>
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<section id="first-tab-group" class="tabgroup">
<div id="tab1">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla deserunt consectetur ratione id tempore laborum laudantium facilis reprehenderit beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
</div>
<div id="tab2">
<h2>Heading 2</h2>
<p>Adipisci autem obcaecati velit natus quos beatae explicabo at tempora minima voluptates deserunt eum consectetur reiciendis placeat dolorem repellat in nam asperiores impedit voluptas iure repellendus unde eveniet accusamus ex.</p>
</div>
<div id="tab3">
<h2>Heading 3</h2>
<p>Atque ratione soluta laboriosam illo inventore amet ipsum aliquam assumenda harum provident nam accusantium neque debitis obcaecati maxime officia saepe ad ducimus in quam libero vero quasi. Saepe sit nisi?</p>
</div>
</section>
</div>
And some piece of JQuery:
$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
e.preventDefault();
var $this = $(this),
tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabgroup).children('div').hide();
$(target).show();
})
Add some styles to it:
$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
e.preventDefault();
var $this = $(this),
tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabgroup).children('div').hide();
$(target).show();
})
And you done:) hope this helps.
Check the below code: Added 'display:none' to div2. and Toggle it on menu click.
function myFunction1() {
document.getElementById("div1").style.display = "";
document.getElementById("div2").style.display = "none";
}
function myFunctionone() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "";
}
<div id="div1" class="round1">
<table>
<tr>
<td>
<img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<div id="div2" class="round1" style="display:none">
<table>
<tr>
<td>
<img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
Related
I am trying to add a class to make a child .modal-container visible when clicking on the parent, which works, but then the second part of the code doesn't seem to work. e.g. when I click on the top right corner X sign .close-modal the modal doesn't disappear.
This is how the code looks like:
$(".animals-images").on('click', function() {
$(this).find(".modal-container").addClass("show");
});
$(".close-modal").on('click', function() {
$(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
});
This is how the .show class style on CSS looks like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
If on the last part of the jQuery code I put CSS ("opacity", "0"); instead of removeClass it works (but only once obviously). So I don't quite understand what is wrong here.
I wanted to do this in vanilla JavaScript, so if you have any idea how to do this it would be so much appreciated!
HTML:
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
Consider that this is repeated 10 times (for 10 different images/modals), I am trying to find a way to do this with a few lines of code instead of selecting 10 individual times
Update (based on OP comment)
thanks for the answer #dippas , is there any way that I can make this code functional for many other images?
You've got to loop through each button then toggling class show on each event (e.currentTarget)
const buttonsOpen = document.querySelectorAll('.click-me'),
buttonsClose = document.querySelectorAll('.close-modal')
buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show')))
buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 1
</p>
</div>
</div>
</div>
</div>
<hr />
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 2
</p>
</div>
</div>
</div>
</div>
Here is a simple solution using vanilla JS
const buttonOpen = document.querySelector('.click-me'),
buttonClose = document.querySelector('.close-modal'),
modal = document.querySelector('.modal-container')
buttonOpen.addEventListener('click', () => modal.classList.add('show'))
//this
//buttonClose.addEventListener('click', () => modal.classList.remove('show'))
//or this
buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
I have an angular project that has bootstrap 4.
The container has two rows. I want one row to be at the bottom of the container always.
I have tried justify-content: flex-end; , bottom:0; and other methods, but none seem to work.
Also note: the parent component just has min-height: 100vh; in it's CSS. (So the board is always full height)
Here is the code and to properly see the situation:
<div class="sight-slider bg-success">
slider goes here <br>
slider goes here <br>
</div>
<div class="container">
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
</div>
<div class="sight-logic-info">
Bla <br>
Phone <br>
Hours <br>
Website
</div>
</div>
</div>
<div class="row btn-controls"> <!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
Bootstrap has a few class built-in that can help.
You tell us you set min-height:100vh on the parent so i'll add this parent missing here and will use twice flex with flex-direction:column boostrap class : .flex-column.
To fill entire space, flex:1;/* or only flex-grow:1; */ is required and a custom class is needed.
finally, margin-top:auto ,via mt-auto class, will push the buttons container all the way down to bottom if it needs to.
/* custom class */
.min-h100vh {
min-height: 100vh;
}
.flex-1 {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class=" d-flex flex-column min-h100vh"><!-- flex boxe turned into a single column to minfill window -->
<div class="sight-slider bg-success">
slider goes here
</div>
<div class="container flex-1 d-flex flex-column "><!-- column again + fill entire space left -->
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor ...
</div>
<div class="sight-logic-info">
Bla bla bla ...
</div>
</div>
</div>
<div class="row btn-controls mt-auto"><!-- margin-top:auto; to go all the way down -->
<!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
You can find the boostrap class about flex here https://getbootstrap.com/docs/4.0/utilities/flex/ margin and padding here https://getbootstrap.com/docs/4.0/utilities/spacing/ , ...
Since there are 2 items inside .container (div.row and div.row.btn-controls), you can set flex, column and justify as space-between, like this:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
So it should make that row stay at bottom.
Other possible solution depending on the situation:
As you mention bottom: 0. Also set position: relative to it. Or position: absolute and on its parent position: relative to make it as a reference.
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