Develop Reference

bootstrap carousel caption animation only activated on second slide

I'm working on a bootstrap carousel in which it shows the image first and then the caption slides in from the right after a few seconds.
It works but there's an issue with the first slide, where it shows the caption of the first slide when it moves to the second it only is being hidden after a second and then the new caption slides in.
This is my code:
<div class="carousel-inner">
<div class="item active">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner" data-interval="2000">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green" id="banner-change">specialists?</span></p>
<p class="slider-text">We just do ip</p>
<p class="slider-text"><span class="slider-green">exceptionally</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">distinctive?</span></p>
<p class="slider-text">Market leading</p>
<p class="slider-text"><span class="slider-green"> brought to life</span> and outside london</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">stand out?</span></p>
<p class="slider-text">The <span class="slider-green">only way</span> to do great work is to love what you do</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Los Angeles">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">the right choice?</span></p>
<p class="slider-text">holistic thinking,<span class="slider-green"> made real</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="New York">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">effective?</span></p>
<p class="slider-text">Intellectual property</p>
<p class="slider-text">- <span class="slider-green"> brought to life</span></p>
</div>
</div>
</div>
</div>
</div>
And:
<script type="text/javascript">
var carouselContainer = $('.carousel');
var slideInterval = 3000;
$( document ).ready(function() {
function toggleCaption() {
$('.carousel-caption').hide();
var caption =
carouselContainer.find('.active').find('.carousel-
caption');
caption.delay(1000).toggle("slide", {direction:'right'});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
});
</script>
Anybody know how I could fix this? It seems the function is only activated on the second slide, not the first.

Use https://daneden.github.io/animate.css/ like this.
you just need to change the animation class in data-animation attribute.
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-1-z'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="my-carosuel">
<div id="carousel-1-z" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1-z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1-z" data-slide-to="1"></li>
<li data-target="#carousel-1-z" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
animation test one
</h3>
<h3 data-animation="animated flip">
animation test two
</h3>
<h3 data-animation="animated slideInDown">
animation test three
</h3>
</div>
</div><!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
animation test one
</h3>
<h3 data-animation="animated flip">
animation test two
</h3>
<h3 data-animation="animated slideInDown">
animation test three
</h3>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="right carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>

Eror. The Content/Form not changing

i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>

The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").

Hide/show jquery only works on 1 div

I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>

Mixitup filter disappears and adds "fail" class

In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps

It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.

Javascript hiding banner slider

How can i hide a image slider using javascript? i want show this banner in first loading and want to hide this banner with a button or "a" tag. if a visitor dont want to see the banner again they can hide the banner.
here my code
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader" />
</div>
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="swing" data-animate-out="magic">
<div class="bs-foreground">
<div class="text-center text-white" data-x="420" data-y="144" data-speed="400" data-animate-in="fadeInDown" data-delay="400">
<h1 class="banner_text1">TEXT<br>
MINING <br>
ENGINE</h1>
<p class="hidden-xs banner_text2">
TEXT SENTIMENTAL ANALYSIS
</p>
</div>
<div class="text-center">
<div class="text-center" style="position:absolute; width:43.75%; margin-left:28.125%;">
<img class="banner_img_imac" style="z-index:0" data-animate-in="fadeInDown" data-delay="800" src="img/template-product-1-imac.png" alt="iMac" class="image-layer" />
</div>
</div>
</div>
<div class="bs-background">
<img src="img/template-product-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
</div>
<!-- Bootslider Progress -->
<div class="bs-progress progress">
<div class="progress-bar wet-ashpalt"></div>
</div>
<!-- /Bootslider Progress -->
<!-- Bootslider Thumbnails -->
<div class="bs-thumbnails text-center text-wet-ashpalt">
<ul class=""></ul>
</div>
<!-- /Bootslider Thumbnails -->
<!-- Bootslider Pagination -->
<div class="bs-pagination text-center text-wet-ashpalt">
<ul class="list-inline"></ul>
</div>
<!-- /Bootslider Pagination -->
<!-- Bootslider Controls -->
<div class="text-center">
<div class="bs-controls">
<img src="images/arrow_left.png">
<img src="images/arrow_rit.png">
</div>
</div>
<!-- /Bootslider Controls -->
</div>

please search stackoverflow before
guess you were looking for THIS
of course if you want to hide it permenetly you have to add some to a DB
otherwise it will appear everytime as long the session is refreshed :)