We Keep Coding

Cycle through spans inside div

I'd like to be able to click on a div and have it cycle through spans inside the div. I can get it to work with the code below, but I'd like to have several of these on a page together that work independently (so they only cycle through their own children). The click should advance both text slideshows, but with independent contents.
$(document).ready(function() {
var divs = $('.timezones span').hide(),
i = 0;
function cycle() {
divs.fadeOut(0).eq(i).fadeIn(0);
i = ++i % divs.length;
};
cycle()
$('.timezones').click(function() {
cycle()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
<span>9am PDT</span>
<span>10am MDT</span>
<span>11am CDT</span>
<span>12pm EST</span>
</div>
<div class="timezones">
<span>5pm PDT</span>
<span>6pm MDT</span>
<span>7pm CDT</span>
<span>8pm EST</span>
</div>

Rather than having to store index variables I typically look for the active one within the current parent container and use next(). When the active next doesn't exist you revert to the first()
Something like:
$(document).ready(function() {
function cycle() {
// `this` is the .timezone element event occurred on
var $spans = $(this).children(),
$active = $spans.filter(':visible'),
$next = $active.next().length ? $active.next() : $spans.first();
$active.fadeOut(function() {
$next.fadeIn()
});
}
$('.timezones').click(cycle).find('span:eq(0)').show();
});
.timezones span {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
<span>9am PDT</span>
<span>10am MDT</span>
<span>11am CDT</span>
<span>12pm EST</span>
</div>
<div class="timezones">
<span>5pm PDT</span>
<span>6pm MDT</span>
<span>7pm CDT</span>
<span>8pm EST</span>
</div>

Try something like below:
$(document).ready(function() {
var divs = $('.timezones span');
i = 0;
function cycle(selectedDiv) {
selectedDiv.fadeOut(0).eq(i).fadeIn(0);
i = ++i % selectedDiv.length;
};
$('.timezones').click(function() {
cycle( $(this).children('span'));
})
});
The below line of code will able to help you find out the span of clicked div
$(this).children('span');

Try this
$(document).ready(function() {
var divs = $('.timezones span').hide(), i = 0;
function cycle(elm){
let spans= elm.find('span');
spans.fadeOut(0).eq(i).fadeIn(0);
i = ++i % spans.length;
};
cycle()
$('.timezones').each(
function() {
cycle($(this))
})
});
Good luck!

I got it working with this code:
$(document).ready(function() {
$( ".timezones" ).click(function() {
$( ".timezones " ).each(function( i ) {
var $spans = $(this).children(),
$active = $spans.filter(':visible'),
$next = $active.next().length ? $active.next() : $spans.first();
$active.fadeOut(0, function() {
$next.fadeIn(0)
});
});
});
$('.timezones').find('span:eq(0)').show();
});

How to change the number within an element ID upon each click?

I have a 7 divs and 1 "Next" button, where I'm trying to come up with a solution so each time the "Next" button is clicked, the current div slides up and the next div slides down. At the end, it would go back to the 1st div.
HTML:
<div id='selection_1'>selection_1</div>
<div id='selection_2' style='display:none'>selection_2</div>
<div id='selection_3' style='display:none'>selection_3</div>
<div id='selection_4' style='display:none'>selection_4</div>
......
<div id='selection_7' style='display:none'>selection_7</div>
<button type='button'>Next</button>
JS:
$(function(){
$("#next").click(function () {
$('#selection_1').slideUp();
$('#selection_2').slideDown();
});
});
But I got stuck since it only can only work once. I can't click next again to get selection_3 to show up, not to mention having it return to selection 1 when a round is finished.
I'm pretty new to JQuery so any advice is appreciated!

Store index in some global variable and use it to generate id, also assign id to next button
Live Demo
$(function(){
currentNum = 1;
$("#selection_1").show();
$("#next").click(function () {
$('#selection_' + currentNum).slideUp();
if (currentNum > 7) currentNum = 0;
$('#selection_' + (currentNum+1)).slideDown();
currentNum++;
});
});

Use this function it may help you
$(function(){
var count=1;
$("#next").click(function () {
$('#selection_'+count).slideUp();
$('#selection_'+(count+1)).slideDown();
count+= 1;
if(count==7){
count=1;
}
});
});

Check this Demo Fiddle.
$(function(){
var current = 1;
$('div[id^="sel"] div').hide();
$('#selection_1 div').slideDown();
$("#next").click(function () {
current++;
$('#selection_'+(current-1)+' div').slideUp();
$('#selection_'+current+' div').slideDown();
});
});
At start, Display just 1st <div>, and keep on incrementing the number on click of next.

Alternate content of a div every 3 seconds with javascript

I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. Jquery prefered, or pure js fine too.
Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat?
HTML:
<div class="wrapper" style="height:100px">
<div id="quote1">I am a quote</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
</div>
Javascript: (as per Arun in the comments)
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
$els.eq(++i % len).fadeIn();
})
}, 2500)
})

Try
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
Demo: Fiddle

Here is a working example:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})

this sounds like a job for...a slider. There are a ton of jQuery plugin options out there,
I've always been a fan of Malsup
jQuery plugins by malsup
he even has responsive ones ready to go. Google "jQuery slider" to be overwhelmed with options.

Use a slider plugin there are lots on the internet. This is a simple snippet I wrote that works with any number of elements without having to change the javascript.
It's very easy to change.
http://jsfiddle.net/Ux9cD/39/
var count = 0;
$('.wrapper div').css('opacity', '0');
var varName = setInterval(function() {
//hide all the divs or set opacity to 0
$('.wrapper div').css('opacity', '0');
//get length
var length = $('.wrapper div').length;
//get first child:
var start = $('.wrapper div').eq(count);
if (count < length) {
animateThis(start,length,count);
count++;
} else {
console.log('end of list');
//restore back to hidden
//set count back to 0
$('.wrapper div').css('opacity', '0');
count = 0;
}
}, 2000);
varName;
function animateThis(start,length,count)
{
$( start ).animate({
opacity: 1
}, 1000, "linear", function() {
//return count++;
});
}

This will do it if you set your second and third divs to hidden:
window.setInterval(function(){
window.setTimeout(function(){
$('#quote1').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 0);
window.setTimeout(function(){
$('#quote2').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 3000);
window.setTimeout(function(){
$('#quote3').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 6000);
}, 3000);
It's not going to do exactly what you want because fading takes time, so two divs will be onscreen at the same time. I tried to remedy this by having them fadeIn() slowly and fadeOut() quickly, but I'd recommend taking out the fading altogether and just hiding them.
See demo.
Also, #ArunPJohny has a solution here that is a bit difficult to understand but does get rid of the fading delay problem. Alternatively, here's my no-fading solution.

HTML
<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>
JavaScript
i=0;
setInterval(function(){
if(i%2 == 0)
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow')
})
else
$('#div2').fadeOut('slow', function(){
$('#div1').fadeIn('slow')
})
i++;
}, 2000)
Fiddle

Here is something you can try if you can do without fade in and fadeout. Just a simple few lines of java script no need to add any plugins etc.
Also look at this link Jquery delay it has sample with delay and fade in fadeout. May be you can tailor it to your needs.
Try in your browser
<html>
<head>
<script type="text/javascript">
function swapDiv(){
var firstString = document.getElementById("quote1").innerHTML;
var secondString = document.getElementById("quote2").innerHTML;
document.getElementById("quote1").innerHTML = secondString;
document.getElementById("quote2").innerHTML = firstString;
setTimeout(swapDiv, 3000);
}
setTimeout(swapDiv, 3000);
</script>
</head>
<body>
<div id="quote1">I am another quote</div><span>
<div id="quote2">I am yet another quote</div><span>
</body>
</html>

jquery add class to multiple elements with a delay

i have 3 div elements with class name gridbox
i want to add a class into all 3 elements with delay.
for example:
new class should be added to all 3 div elements with a delay between each of them.
i triel following code which is not working.
$('.gridbox').addClass('animation').delay(1500);
What is wrong here?

You could try something like this:
var divs = $( '.gridbox' );
var index = 0;
var delay = setInterval( function(){
if ( index <= divs.length ){
$( divs[ index ] ).addClass( 'animation' );
index += 1;
}else{
clearInterval( delay );
}
}, 1500 );
What I'm doing here is this:
Extract all of the elements and store them in the divs variable.
Save an index of the element you are currently working with.
Initiate a setTimeout function with a delay of 1.5 seconds.
If we are not at the end of the list of elements, add the class to the relevant element after converting it to a jQuery element.
Increment our index variable.
Stop the setTimeout once we have iterated over all of the elements.

$('.gridbox').each(function(i) {
(function(self, j) {
setTimeout(function() {
$(self).addClass('animation');
},(j*1500)+1500);
})(this, i);
});
FIDDLE

$('.gridbox').each(function(index) {
var that = this;
setTimeout(function() {
$(that).addClass('animation');
}, 1500 * index);
});

if you want to apply a delay on a jquery function such as addClass you need to use a javascript setTimeout because as described here .delay() is limited and should be used for jQuery effects

You can try combination of .each() and setTimeout
$('.gridbox').each(function (index) {
var $this = $(this);
setTimeout(function () {
$this.addClass('animation');
}, 1500 * index );
});
Fiddle DEMO

a nicer solution :)
var st = setInterval(function(){
var gb = $('.gridbox:not(.animation):eq(0)');
gb.length > 0 ? gb.addClass('animation') : clearInterval(st);
},1500)
http://jsfiddle.net/jR984/

You can do this without jQuery
function addClass () {
var div = document.getElementsByClassName("aaa");
div[0].className = "bbb";
setTimeout(addClass, 1000);
}
window.onload = function () {
addClass();
}
http://jsfiddle.net/khGCv/

Although setTimeout/Interval kinda "works", jquery provides a much cleaner way to do custom animations: queue, for example:
$(".gridbox").each(function() {
var box = this;
$("body").queue(function(next) {
$(box).addClass("animation");
next();
}).delay(1000)
});

jQuery delegate not working

My script:
(function($){
$.fn.megaswitcher = function(settings) {
return this.each(function() {
var $i = $(this),
current,
childs = $i.find('.selection li').length; // returns desired number
$i.find('.selection li').delegate('.active', 'dblclick', function(e){
e.preventDefault();
current = $i.find('.selection li').index(this);
alert('triggered # ' + current); // doesn't even execute
var _delay = $(this).attr('name') > 0 ? (parseInt($(this).attr('name')) * 1000) : 5000;
$(this).delay(_delay).show(0, function(){
if((current + 1) < childs){ // if not last
$(this).removeClass('active').next().addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}else{
$(this).removeClass('active');
$i.find('.selection li:first').addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}
});
});
$i.find('.selection li.active').trigger('dblclick');
});
};
})(jQuery);
Gotta admit, that, that's a huge mess over there, but I have no idea why that delegate is not working...
Any ideas?
P.S. I have a different plugin based on this same technique with dblclick, that works flawlessly, except, it doesn't do item selection with find();, and I have a feeling that it's the thing that's causing the problem, but I don't know with that to replace it.
Thanks in advance!

You have to call delegate on the parent of the items that you want to attach the event.
Instead of:
$i.find('.selection li').delegate('.active' ...
you should do
$i.find('.selection').delegate('li.active'