I modified a couple of script ideas that I found here on SO to rotate or flip through several blocks of text (so visitors will not have to scroll) and to pause these when the user hovers. However, I am trying to set it up so that there are three different groups (blocks or divs) of rotating texts in the same view. I've given each group a different ID, but I'm not quite sure of how to add that level of behaviour to the script so that they're all going at the same time. I created a jsfiddle to show the basics of the code...as you will see only the first set (Joan) actually shows the text flipping, the other two (Shelly, Valerie) just sit there blank. Is there a simple fix in the javascript that would make all three of them work simultaneously? multi-group text rotation jsfiddle
function slideSwitch() {
var $active = $('.fadein quote.active');
if ($active.length == 0) $active = $('.fadein quote:last');
var $next = $active.next().length ? $active.next() : $('.fadein quote:first');
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
var interval = setInterval(slideSwitch, 4000);
$('.fadein').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(slideSwitch, 4000);
});
});
For this to work, you have to think in terms of Object Oriented Programming. See some documentation to learn more.
Look at this code. It gets the scroll to work on each person.
var Person = function(id) {
this.id = id;
};
Person.prototype.slideSwitch = function(id) {
let counter = 1;
function getNext(){
//identify last active
var lastActiveCounter = counter;
$(id+ " quote:nth-child("+lastActiveCounter+")").addClass('last-active');
//increase counter or reset it to 1
counter++;
if (counter > $(id).children('quote').length) {
counter=1;
}
//make changes to next active (since counter has changed)
$(id+" quote:nth-child("+counter+")").css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 1000, function () {
$(id+ " quote:nth-child("+lastActiveCounter+")").removeClass('active last-active');
});
}
return getNext;
};
Person.prototype.start = function () {
this.interval = setInterval(this.slideSwitch(this.id), 4000);
};
Person.prototype.clear = function(id) {
clearInterval(this.interval);
}
$('.fadein').hover(function(){
let id=$(this).attr("id");
switch (id) {
case "Valerie" :
Valerie.clear();
break;
case "Joan" :
Joan.clear();
break;
case "Shelly":
Shelly.clear();
break;
}
}, function(){
let id=$(this).attr("id");
switch (id) {
case "Valerie" :
Valerie.start();
break;
case "Joan" :
Joan.start();
break;
case "Shelly":
Shelly.start();
break;
}
});
var Valerie = new Person("#Valerie");
var Joan = new Person("#Joan");
var Shelly = new Person("#Shelly");
Valerie.start();
Joan.start();
Shelly.start();.fadein {
height: 150px;
position: relative;
width: 100%; /*temp*/
float:left;
}
div quote {
text-align: left;
background-color: white;
left: 0;
opacity: 0.0;
position: absolute;
height: inherit;
width: 100%;
top: 0;
z-index: 8;
overflow: hidden;
}
caption {
text-align: left;
background-color: white;
left: 0;
opacity: 0.0;
position: absolute;
height: inherit;
width: 100%;
top: 0;
z-index: 8;
overflow: hidden;
}
div quote.active {
opacity: 1.0;
z-index:10;
}
div quote.last-active {
z-index: 9;
}<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<h3><i>Our Clients Love Joan!</i></h3>
<div class="fadein" id="Joan">
<quote style="font-size:16pt;">"Because Joan is nice!"</quote>
<quote style="font-size:16pt;">"Because Joan is smart!"</quote>
<quote style="font-size:16pt;">"Because Joan attends to the details!"</quote>
</div>
<h3><i>Our Clients Love Shelly!</i></h3>
<div class="fadein" id="Shelly">
<quote style="font-size:16pt;">"Because Shelly is no-nonsense!"</quote>
<quote style="font-size:16pt;">"Because Shelly is does quit!"</quote>
<quote style="font-size:16pt;">"Because Shelly is on their side!"</quote>
</div>
<h3><i>Our Clients Love Valerie!</i></h3>
<div class="fadein" id="Valerie">
<quote style="font-size:16pt;">"Because Valerie listens!"</quote>
<quote style="font-size:16pt;">"Because Valerie is tireless!"</quote>
<quote style="font-size:16pt;">"Because Valerie gets it done!"</quote>
</div>