We Keep Coding

Show active class

I want to add class 'active' to next div 1 second before first is removed.
Practically, I want to have an 'active' class on 2 elements at the same time for that 1 second.
Can someone help me?
Thanks
<div class="map-inner">
<div class="map-location-outer">
<div class="map-location-inner location1 active">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon2.svg">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
<div class="map-location-outer">
<div class="map-location-inner location2">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon3.svg">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
<div class="map-location-outer">
<div class="map-location-inner location3">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon1.png">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
</div>
var x = 1;
function updateClass() {
let a = $(".map-location-inner.active");
a.removeClass("active");
a = a.parent().next(".map-location-outer");
if (a.length == 0)
a = $(".map-location-outer").first();
a.find(".map-location-inner").addClass("active");
}
setInterval(function () {
updateClass();
}, x * 5500);

You can use setTimeout to wait before removing 1st .active class and add 2nd .active class before removing 1st one.
var x = 1;
function updateClass() {
let a = $(".map-location-inner.active");
let b = a.parent().next(".map-location-outer");
if (b.length == 0)
b = $(".map-location-outer").first();
b.find(".map-location-inner").addClass("active");
setTimeout(function() {
a.removeClass("active");
}, 1000);
}
setInterval(function () {
updateClass();
}, x * 5500);

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>

Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

Add and remove active class to multiple ids automatically in loop

Currently have the following HTML:
<div class="wrapper">
<div id="sat0" class="sat"></div>
<div id="sat1" class="sat"></div>
<div id="sat2" class="sat"></div>
<div id="sat3" class="sat"></div>
<div id="sat4" class="sat"></div>
<div id="sat5" class="sat"></div>
<div id="sat6" class="sat"></div>
<div id="sat7" class="sat"></div>
<div id="sat8" class="sat"></div>
<div id="sat9" class="sat"></div>
<div id="sat10" class="sat"></div>
<div id="sat11" class="sat"></div>
</div>
I want the class="active" added to id="sat0" and id="sat6" on page load. Then a second later the active class should be remove from both and be added to the two next ones so id="sat1" and id="sat7". It should loop endlessly, so when gets to id="sat5" and id="sat11" the next would be "id=sat6" and id="sat0".
Currently using the following javascript.
<script>
$(document).ready(function(){
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
});
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
}
</script>
It acts rather chaotically. Any thoughts?

The main reason you seem to get chaotic behavior is that you're always adding active back to #sat6, because you need to use a block in your else (really, I recommend always using blocks with control-flow statements) so the #sat6 part is conditional:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
Updated example:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But another reason would be that the top sequence (starting with #sat0) continues longer than the other; you might want if (next.length == 2) instead of just if (next.length):
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
BTW, if you want to make it easier to add/remove divs, you don't need any of those id="..."; just use $(".sat:nth-child(1)") and $(".sat:nth-child(7)") (or if you have other elements in there, $(".sat:eq(0)") and $(".sat:eq(6)")) to start with:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$(".sat:nth-child(1)").addClass("active");
$(".sat:nth-child(7)").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div class="sat">0</div>
<div class="sat">1</div>
<div class="sat">2</div>
<div class="sat">3</div>
<div class="sat">4</div>
<div class="sat">5</div>
<div class="sat">6</div>
<div class="sat">7</div>
<div class="sat">8</div>
<div class="sat">9</div>
<div class="sat">10</div>
<div class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
(If you have multiple .wrapper that you're doing this in, you'll have to adjust things a bit to work within them individually...)

Few object in one place

I have one selector: #circle-timer and I have few objects which target is this selector. Is any options to display only the selected item?
Example:
function timer(time){
var target = $('.value');
var counter = time;
var id = setInterval(function() {
counter--;
if(counter < 0) {
clearInterval(id);
} else {
target.text(counter);
}
}, 1000);
}
var p = timer(60);
var c = timer(33)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
<div id="circle-timer" class="circle-timer">
<div class="time">
<p class="value">00</p>
</div>
</div>
</div>
<ul>
<li>show first timer</li>
<li>show second timer</li>
</ul>
But is showing all in one time. I want show selected timer (when click show first timer), not all.

Maybe this would help
jsFiddle
$('li').click(function(){
$(".value2").toggle();
$(".value1").toggle();
})
function timer(time,element){
var target = $('p.'+element);
var counter = time;
var id = setInterval(function() {
counter--;
if(counter < 0) {
clearInterval(id);
} else {
target.text(counter);
}
}, 1000);
}
var p = timer(60,'value1');
var c = timer(33,'value2')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
<div id="circle-timer" class="circle-timer">
<div class="time">
<p class="value1">00</p>
<p class="value2" style='display:none'>00</p>
</div>
</div>
</div>
<ul>
<li class="value1">show second timer</li>
<li class="value2" style='display:none'>show first timer</li>
</ul>

How to make controls of a customized javascript carousel

I'm making a customized javascript carousel . I would like to make controls for my carousel . I was searching for the answer but didn't find .
here is the code which I was working with
<div class="container">
<div class="row">
<div class="col-lg-6 top-space text-center float">
<h3 class="heading">Image Slider</h3>
<hr>
</div>
<div class="col-lg-6 float">
<img src="img/slider1.jpg" class="img-responsive" id="mainImage">
</div>
</div>
</div>
javascript code:
var imagesArray = ["img/slider2.jpg","img/slider3.jpg","img/slider4.jpg"];
var index = 0 ;
function imageSlider(){
var getImagePath = document.getElementById("mainImage");
getImagePath.setAttribute("src",imagesArray[index]);
index++;
if(index >= imagesArray.length){
index = 0;
}
}
setInterval(imageSlider,4000);
Here is the image:

Here is a example for you:
function imageSlider(){
this.prev = function(){
if(--this.index < 0) this.index = this.imagesArray.length - 1;
this.start()
};
this.next = function(){
if(++this.index >= this.imagesArray.length) this.index = 0;
this.start()
};
this.start = function(){
var getImagePath = document.getElementById("mainImage");
getImagePath.setAttribute("src", this.imagesArray[this.index]);
this.timeout && clearTimeout(this.timeout);
this.timeout = setTimeout(this.next.bind(this),3000)
};
}
var myCarousel = new imageSlider();
myCarousel.imagesArray = ["http://i.stack.imgur.com/d5vO7.jpg?s=128&g=1", "http://i.stack.imgur.com/GNgxX.png?s=128&g=1","http://i.stack.imgur.com/kpQYd.png?s=128&g=1"];
myCarousel.index = 0;
myCarousel.start()
<div class="container">
<div class="row">
<div class="col-lg-6 float">
<img src="img/slider1.jpg" class="img-responsive" id="mainImage">
<p><button onclick="myCarousel.prev()">Prev</button>
<button onclick="myCarousel.next()">Next</button></p>
</div>
</div>
</div>

First of all index should be increased before assigning the new path. After that, simply create a button that calls the imageSlider() function you have created and the slider should go an image forward. If you wan't to make it go backwards you'll have to create another function to do that. Something like:
var getImagePath = document.getElementById("mainImage");
index--;
getImagePath.setAttribute("src",imagesArray[index]);
if(index <= 0){
index = imagesArray.length - 1;
}
To implement the button functionality you can use the jQuery .click() method: https://api.jquery.com/click/
or use the Javascript only alternative: http://www.w3schools.com/jsref/event_onclick.asp