I'm using bootstrap carousel for the slider , on each slide there is some text over it.
I would like that text over the slides to aappear letter by letter.
I have almost solved it..
But there are 2 issues
- On first slide the text doesn't come up at all
- If the user goes to some other tab on the browser means if the current window is not in focus ,then everything gets messed up.
HTML
<main> <div class="container"> <div class="block-wrap"> <div id="js-carousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania"> <div class="caption"> <div class="mystring hide">companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania"> <div class="caption"> <div class="mystring hide">companies with Inbound Marketing</div> <h4>We help <div class="demo-txt "></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower"> <div class="caption"> <div class="mystring hide">2companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower"> <div class="caption"> <div class="mystring hide">3companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="overlay-effect"></div> </div> </div> </div> </div> </main> JS:
$(document).ready(function() { $('#js-carousel').carousel({ interval: 5000 }); $('#js-carousel').on('slid.bs.carousel', function () { var showText = function (target, message, index, interval) { if (index < message.length) { $(target).append(message[index++]); setTimeout(function () { showText(target, message, index, interval); }, interval); } } var str = $(this).find(".active .mystring").html(); $('.active .demo-txt').html(""); showText(".active .demo-txt", str, 0, 100); }); }); 3 Answers
Answers 1
Instead of settimeout use setInterval function. Also use clearInterval to clear schedular when a new slide begin. (I think this is your second problem.)
Here is your target js file:
$(document).ready(function() { $('#js-carousel').carousel({ interval: 5000 }); var handler; var interval = 5000; var index = 0; function showText(target, message, index, interval) { if (index < message.length) { $(target).append(message[index]); } } function iteration() { if(handler){ clearInterval(handler); } index = 0; var str = $(this).find(".active .mystring").html(); $('.active .demo-txt').html(""); showText(".active .demo-txt", str, index++, 100); handler = setInterval(function(){ showText(".active .demo-txt", str, index++, 100); }, 100); } //on each carousel slide change: $('#js-carousel').on('slid.bs.carousel', iteration); //start immediately for your first problem: iteration.bind($('#js-carousel'))(); }); Answers 2
It's because your function is inside the slide event. At starting, the carousel doesn't slide...
Fiddle: https://jsfiddle.net/Lbasa2jh/5/
JS:
$(document).ready(function() { var showText = function (target, message, index, interval) { if (index < message.length) { $(target).append(message[index++]); setTimeout(function () { showText(target, message, index, interval); }, interval); } }; $('#js-carousel').carousel({ interval: 5000 }); var str0 = $(this).find(".active .mystring").html(); $('.active .demo-txt').html(""); showText(".active .demo-txt", str0, 0, 100); $('#js-carousel').on('slid.bs.carousel', function () { var str = $(this).find(".active .mystring").html(); $('.active .demo-txt').html(""); showText(".active .demo-txt", str, 0, 100); }); }); Answers 3
The timer can be tricky when the tab goes inactive. I moved code around and cleared the timeout to make sure the timeout is clean when starting a new slide.
I noticed an issue (not always) when switching back from a different tab is that the carousel actually moves to next slide quicker than 5 second causing the text to be incomplete.
https://jsfiddle.net/vLwm58Ln/
$(document).ready(function() { $('#js-carousel').carousel({ interval: 5000 }); var showText = function(target, message, index, interval) { if (index < message.length) { $(target).append(message[index++]); timer = setTimeout(function() { showText(target, message, index, interval); }, interval); } }, timer; //First time, this triggers right away instead of waiting for the slide to move showText(".active .demo-txt", $('#js-carousel').find(".active .mystring").html(), 0, 100); $('#js-carousel').on('slid.bs.carousel', function() { //clear any messed up timeout from prev slide clearTimeout(timer); //clear message that may be incomplete from the previous text animation $('.prevActive').removeClass('prevActive').html(''); var str = $(this).find(".active .mystring").html(); $('.active .demo-txt').addClass('prevActive').html(""); showText(".active .demo-txt", str, 0, 100); }); });.carousel-inner { position: relative; } .carousel-inner .overlay-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .carousel-inner .caption { color: #ffffff; font-weight: bold; position: absolute; top: 0; bottom: 0; margin: auto 0; height: 100px; z-index: 9999; left: 5%; } .carousel-inner .caption h1, .carousel-inner .caption h2 { font-weight: bold; line-height: 1.6; } .carousel-inner .caption h1 { font-size: 64px; } .carousel-inner .caption h2 { font-size: 44px; } .carousel-inner .demo-txt { border-bottom: 4px solid #ec8422; padding-bottom: 5px; }<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <main> <div class="container"> <div class="block-wrap"> <div id="js-carousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania"> <div class="caption"> <div class="mystring hide">companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania"> <div class="caption"> <div class="mystring hide">companies with Inbound Marketing</div> <h4>We help <div class="demo-txt "></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower"> <div class="caption"> <div class="mystring hide">2companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="item"> <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower"> <div class="caption"> <div class="mystring hide">3companies with Inbound Marketing</div> <h4>We help <div class="demo-txt"></div> </h4> </div> </div> <div class="overlay-effect"></div> </div> </div> </div> </div> </main>
0 comments:
Post a Comment