Show active class - javascript

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);

Related

How do you manipulate html code which was created in JavaScript?

I'm having a problem with referencing newly created HTML which was created using JavaScript. Unfortunately, I cannot seem to access the newly created html for whatever reason. I've programmed the code to where I can display the numbers, but I cannot then manipulate them. Here is the code:
let activ = document.querySelector("#fizbuz--btn");
0
let rever = document.querySelector("#fizbuz--btn1");
let displ = document.querySelector("#fizbuz--btn2");
let numbers = document.querySelector(".numbers")
let numberss = document.querySelectorAll(".num")
displ.addEventListener("click", () => {
for (i = 0; i < 22; i++) {
numbers.innerHTML += `<div class="num">${i}</div>`
}
})
if (displ.clicked == true) {
activ.addEventListener("click", () => {
for (i = 0; i < numberss.length; i++) {
if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "blue"
} else if (numberss[i].innerHTML % 3 == 0) {
numberss[i].style.backgroundColor = "red";
} else if (numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "orange"
}
}
})
rever.addEventListener("click", () => {
for (i = 0; i < numbers.length; i++) {
numbers[i].style.backgroundColor = "rgb(61, 133, 117)"
}
})
}
<div class="bg-color">
<div class="navbar">
<div class="nav--head">Home</div>
<div class="nav--head">About</div>
<div class="nav--head">Contact</div>
</div>
</div>
<div class="subHeading">
This is just for practice. <br> This will be styled using CSS.
</div>
<div class="fbinfo">
<div class="subhead">Multiples of 3 shall be highlighed in red</div>
<div class="subhead">Multiples of 5 shall be highlighed in orange</div>
<div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div>
</div>
<div class="fizbuzz">
<div class="btns">
<button id="fizbuz--btn2">Click Me for NUMBERS</button>
<button id="fizbuz--btn">Click Me for FIZZBUZZ</button>
<button id="fizbuz--btn1">Click Me for REVERSE</button>
</div>
<div class="numbers">
<!-- <div class="num">1</div> <div class="num">2</div>
<div class="num">3</div> <div class="num">4</div>
<div class="num">5</div> <div class="num">6</div>
<div class="num">7</div> <div class="num">8</div>
<div class="num">9</div> <div class="num">10</div>
<div class="num">11</div> <div class="num">12</div>
<div class="num">13</div> <div class="num">14</div>
<div class="num">15</div> <div class="num">16</div>
<div class="num">17</div> <div class="num">18</div>
<div class="num">19</div> <div class="num">20</div> -->
</div>
</div>
You need to assign numberss after you add the elements to the DOM. So the assignment has to be in the click listener.
There's no clicked property on button elements, so if (displ.clicked == true) will never succeed and should be removed. You can add a check for whether the numbers have been created to the beginning of the other event listeners.
let activ = document.querySelector("#fizbuz--btn");
let rever = document.querySelector("#fizbuz--btn1");
let displ = document.querySelector("#fizbuz--btn2");
let numbers = document.querySelector(".numbers")
let numberss;
displ.addEventListener("click", () => {
for (i = 0; i < 22; i++) {
numbers.innerHTML += `<div class="num">${i}</div>`
}
numberss = document.querySelectorAll(".num")
})
activ.addEventListener("click", () => {
if (!numberss) {
alert("click on NUMBERS first");
return;
}
for (i = 0; i < numberss.length; i++) {
if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "blue"
} else if (numberss[i].innerHTML % 3 == 0) {
numberss[i].style.backgroundColor = "red";
} else if (numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "orange"
}
}
})
rever.addEventListener("click", () => {
if (!numberss) {
alert("click on NUMBERS first");
return;
}
for (i = 0; i < numberss.length; i++) {
numberss[i].style.backgroundColor = "rgb(61, 133, 117)"
}
})
<div class="bg-color">
<div class="navbar">
<div class="nav--head">Home</div>
<div class="nav--head">About</div>
<div class="nav--head">Contact</div>
</div>
</div>
<div class="subHeading">
This is just for practice. <br> This will be styled using CSS.
</div>
<div class="fbinfo">
<div class="subhead">Multiples of 3 shall be highlighed in red</div>
<div class="subhead">Multiples of 5 shall be highlighed in orange</div>
<div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div>
</div>
<div class="fizbuzz">
<div class="btns">
<button id="fizbuz--btn2">Click Me for NUMBERS</button>
<button id="fizbuz--btn">Click Me for FIZZBUZZ</button>
<button id="fizbuz--btn1">Click Me for REVERSE</button>
</div>
<div class="numbers">
<!-- <div class="num">1</div> <div class="num">2</div>
<div class="num">3</div> <div class="num">4</div>
<div class="num">5</div> <div class="num">6</div>
<div class="num">7</div> <div class="num">8</div>
<div class="num">9</div> <div class="num">10</div>
<div class="num">11</div> <div class="num">12</div>
<div class="num">13</div> <div class="num">14</div>
<div class="num">15</div> <div class="num">16</div>
<div class="num">17</div> <div class="num">18</div>
<div class="num">19</div> <div class="num">20</div> -->
</div>
</div>

Automate a slider with pause and resume functions

I have a slider and I would like to automate it with pause and resume functions. I found this great snippet of code that allows me to pause and resume, however, it only allows me to pause once.
I am struggling to figure out how to make it so the user can pause as many times as they like.
here is the complete code:
$s = 1000; // slide transition speed (for sliding carousel)
$d = 5000; // duration per slide
$w = $('.slide').width(); // slide width
function IntervalTimer(callback, interval) {
var timerId, startTime, remaining = 0;
var state = 0; // 0 = idle, 1 = running, 2 = paused, 3= resumed
this.pause = function () {
if (state != 1) return;
remaining = interval - (new Date() - startTime);
window.clearInterval(timerId);
state = 2;
$('.timer').stop(true, false)
};
this.resume = function () {
if (state != 2) return;
state = 3;
window.setTimeout(this.timeoutCallback, remaining);
$('.timer').animate({"width":$w}, remaining);
$('.timer').animate({"width":0}, 0);
};
this.timeoutCallback = function () {
if (state != 3) return;
callback();
startTime = new Date();
timerId = window.setInterval(callback, interval);
state = 1;
};
startTime = new Date();
timerId = window.setInterval(callback, interval);
state = 1;
}
var starttimer = new IntervalTimer(function () {
autoSlider()
}, $d);
timer();
$('.slider-content').hover(function(ev){
starttimer.pause()
}, function(ev){
starttimer.resume()
});
function timer() {
$('.timer').animate({"width":$w}, $d);
$('.timer').animate({"width":0}, 0);
}
Any help is greatly appreciated.
UPDATE:
Here is the HTML
<div class="slider-content">
<div class="timer"></div>
<div class="slide 1">
<div class="hero-container">
<div class="header-content-container">
<h1 class="entry-title"></h1>
<hr>
<div class="flex-container">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div class="post-link"></div>
</div>
</div>
</div>
<div class="slide 2">
<div class="hero-container">
<div class="header-content-container">
<h1 class="entry-title"></h1>
<hr>
<div class="flex-container">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div class="post-link"></div>
</div>
</div>
</div>
<div class="slide 3">
<div class="hero-container">
<div class="header-content-container">
<h1 class="entry-title"></h1>
<hr>
<div class="flex-container">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div class="post-link"></div>
</div>
</div>
</div>
<div class="slide 4">
<div class="hero-container">
<div class="header-content-container">
<h1 class="entry-title"></h1>
<hr>
<div class="flex-container">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div class="post-link"></div>
</div>
</div>
</div>
</div>

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.

How to target a specific slider using javascript when there is more than one

I have 3 sliders on my page I'm a building but i am just curious to know the best way to go about targeting only the active one so the javascript below would work for all of them. Everything seems to work fine if i disable the other 2 sliders. First time I have done something like this.
I'm guessing my javascript selectors may need to change some what to get it to work.
Appreciate any advice on the best way forward.
var sliderSlide = document.querySelectorAll('.slider__slide');
var nextSlide = document.querySelector('.slider__button--next');
var previousSlide = document.querySelector('.slider__button--previous');
var currentSlide = 0;
var currentSlideImg = 0;
//Reset slides
function resetSlides() {
for (var s = 0; s < sliderSlide.length; s++) {
sliderSlide[s].classList.remove('active');
}
for (var i = 0; i < sliderSlideImg.length; i++) {
sliderSlideImg[i].classList.remove('active');
}
}
//Start slides
function startSlide() {
resetSlides();
sliderSlide[0].classList.add('active');
sliderSlideImg[0].classList.add('active');
}
//Previous slide
function slidePrevious() {
resetSlides();
sliderSlide[currentSlide - 1].classList.add('active');
currentSlide--;
sliderSlideImg[currentSlideImg - 1].classList.add('active');
currentSlideImg--;
}
previousSlide.addEventListener('click', function() {
if (currentSlide === 0 && currentSlideImg === 0) {
currentSlide = sliderSlide.length;
currentSlideImg = sliderSlideImg.length;
}
slidePrevious();
});
//Next slide
function slideNext() {
resetSlides();
sliderSlide[currentSlide + 1].classList.add('active');
currentSlide++;
sliderSlideImg[currentSlideImg + 1].classList.add('active');
currentSlideImg++;
}
nextSlide.addEventListener('click', function() {
if (currentSlide === sliderSlide.length - 1 && currentSlideImg === sliderSlideImg.length - 1) {
currentSlide = -1;
currentSlideImg = -1;
}
slideNext();
});
<div class="slider slider--1 active">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--2">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--3">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
You can create loop over .slider and then use querySelector on each item, that way you will have variables for each slider
Array.from(document.querySelectorAll('.slider')).forEach(function(slider) {
var sliderSlide = slider.querySelectorAll('.slider__slide');
var nextSlide = slider.querySelector('.slider__buttons--next');
var previousSlide = slider.querySelector('.slider__buttons--previous');
...
});
or if you prefer for loop:
var sliders = document.querySelectorAll('.slider');
for (var i = 0; i < sliders.length; ++i) {
var slider = sliders[i];
...
}
document.querySelector('.slider--3 .slider__slide')
but I would recommend to put id's on your sliders and then select
document.querySelector('#slider--3')

Make slider counter, count just the amount of slides in the slider

I made a jQuery slider for a website, it has 9 slides, and I want the counter to count JUST until 9. What happens is that as soon as I get to the last slide (09 of 09) and CLICK on the NEXT bnt, it goes to the first slide (01 of 09) and when I click to go to the second slide I get this: 11 of 09. Please help!
It's an infinite slider, and would like the counter to work "UP" and "DOWN", meaning to have the counter add if the user goes NEXT and subtract if the user goes previous.
The slider is in this site http://madebymorro.com/web_dev_vavilco/
at the very bottom.
Thanks!
the code I have is HTML:
<section id="construction">
<div class="wrapper">
<div id="home-slider">
<div id="slider-data">
<div class="count">
<span class="current">1</span>/09
</div>
<div class="slider-nav">
<div class="prev"><img src="images/home-prev.svg" alt=""></div>
<div class="next"><img src="images/home-next.svg" alt=""></div>
</div>
</div>
<div id="home-slider-c">
<section class="slider-project">
<img src="images/home-slider001.jpg" alt="">
<div class="img-data">
<p>zaragoza</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider002.jpg" alt="">
<div class="img-data">
<p>bravtevilla</p>
<p>casas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider003.jpg" alt="">
<div class="img-data">
<p>business Center Dorado</p>
<p>oficinas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider004.jpg" alt="">
<div class="img-data">
<p>balcones de la trinidad</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider005.jpg" alt="">
<div class="img-data">
<p>gratamira 131</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider006.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>apartamentos y plaza comercial</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider007.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>locales comerciales</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider008.jpg" alt="">
<div class="img-data">
<p>plaza castilla</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider009.jpg" alt="">
<div class="img-data">
<p>sauses del country</p>
<p>apartamentos</p>
</div>
</section>
</div>
</div>
</div>
the code I have is jQuery:
var slider = $('#home-slider-c'),
next = $('.slider-nav .next'),
prev = $('.slider-nav .prev');
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
var n = 0;
function getNext() {
var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
$(".current").html(e + 1);
n++;
console.log(e);
slider.animate({
marginLeft: '-200%'
}, 700, function() {
$('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
slider.css('margin-left', '-100%');
});
// $(".current").html(e++);
}
var n = 0;
function getPrev() {
var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
$(".current").html(e + 1);
n--;
console.log(e);
slider.animate({
marginLeft: 0
}, 700, function() {
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
});
}
next.on('click', getNext);
prev.on('click', getPrev);
Try using this single counter e initialized to 1
....
var e= 1;
function getNext() {
e= e<$('.slider-project').length?e:0;
e++;
$(".current").html(e);
// n++;
console.log(e);
....
}
function getPrev() {
e= e<=1?$('.slider-project').length+1:e;
e--;
$(".current").html(e);
// n--;
console.log(e);
....
}
Use the Reminder Operator % Here you go:
var tot = 6, // Let's say we have 6 slides.
c = 0; // Dummy counter
$("#prev, #next").on("click", function(){
// Increment or decrement counter depending on button ID
c = this.id==="next" ? ++c : --c;
// OK almost there, now let's loop our counter to prevent exceeding <0 or >5
// >5 since index 5 is the 6th slide (tot-1).
// If counter went less than 0 (prev button) than set it to tot-1
// For all other cases use modulo % which will reset it to 0 automagically.
c = c<0 ? tot-1 : c%tot;
$("#test").text(c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=prev>«</button>
<span id=test>0</span>
<button id=next>»</button>
The above can be written using a bigger if else logic, but if it's all clear than you can simply use this snippet and drop it into any current or future gallery you build:
// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;

Categories