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>
Related
I have countdown in my container div but when I tried to reload that specific container its reload perfectly but my countdown didn't showed up and also button got disabled..
function refreshDiv() {
$('#container3').load(window.location.href + " #container3");
}
JavaScript
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");
var count = 2; // Set count
var timer = null; // For referencing the timer
(function countDown() {
// Display counter and start counting down
spn.textContent = count;
// Run the function again every second if the count is not zero
if (count !== 0) {
timer = setTimeout(countDown, 1000);
count--; // decrease the timer
} else {
// Enable the button
btn.removeAttribute("disabled");
}
}());
this is my html code its work properly when I refresh the whole page but when I refresh #container3 my button got disabled and countdown didn't showed
<div class="container">
<div class="container1">
<h2>choose product </h2>
<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
<img src="" alt="Image Preview" id="zoom" class="image-
preview__image">
<span class="image-preview__default-text">choose image</span>
</div>
</div>
<div class="container2" id="container3">
<h4 id="title">here</h4>
<div class="controls">
<div class="main-controls">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button>
<div class="dropdown-menu">
<button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button>
function refreshDiv() {
count = 2;
timer = null;
countDown();
}
I removed the jquery that reloads #container3 and reset your count and timer and it worked for me in a node.js http-server environment... The component refreshes on clicking save.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="container1">
<h2>choose product </h2>
<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
<img src="" alt="Image Preview" id="zoom" class="image-
preview__image">
<span class="image-preview__default-text">choose image</span>
</div>
</div>
<div class="container2" id="container3">
<h4 id="title">here</h4>
<div class="controls">
<div class="main-controls">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button>
<div class="dropdown-menu">
<button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button>
<script>
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");
var count = 2; // Set count
var timer = null; // For referencing the timer
function countDown() {
// Display counter and start counting down
spn.textContent = count;
// Run the function again every second if the count is not zero
if (count !== 0) {
console.log(count);
timer = setTimeout(countDown, 1000);
count--; // decrease the timer
} else {
// Enable the button
btn.removeAttribute("disabled");
}
};
function refreshDiv() {
count = 2;
timer = null;
countDown();
}
countDown();
</script>
</body>
</html>
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);
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>
I'm trying to figure out why the code I'm currently working on produces an error
Cannot read property css underfined.
Currently using jQuery 3.3.1. Not sure if the .css is deprecated. Can't seem to find a workaround it
(function($) {
'use strict';
var Slider = {
init: function() {
this.$sliderBanner = $('.slider-banner');
this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
this.$slides = $('.slides', this.$sliderItemsWrapper);
this.$sliderButtons = $('.arrow', this.$sliderBanner);
this.slideCount = $('.slides', this.$sliderItemsWrapper).length;
this.sliderBannerWidth = $(this.$sliderBanner).width();
this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);
this.$slides.width(this.sliderBannerWidth);
this.bindButtons();
// $('.-next').on('click', function() {
// console.log('test');
// })
},
bindButtons: function() {
var position = 0;
$('.arrow.-next').on('click', function() {
// console.log('slide next');
var that = this;
position++;
if (position == -1) {
position = that.slideCount - 1;
}
console.log('test');
that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
});
}
};
$(document).ready(function() {
Slider.init();
});
})(jQuery);
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="slider-banner">
prev
next
<div class="slider-items">
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
</div>
<div class="banner-detail">
<h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
</div>
</div>
Move var that = this; outside of the click function.
(function($) {
'use strict';
var Slider = {
init: function() {
this.$sliderBanner = $('.slider-banner');
this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
this.$slides = $('.slides', this.$sliderItemsWrapper);
this.$sliderButtons = $('.arrow', this.$sliderBanner);
this.slideCount = $('.slides', this.$sliderItemsWrapper).length;
this.sliderBannerWidth = $(this.$sliderBanner).width();
this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);
this.$slides.width(this.sliderBannerWidth);
this.bindButtons();
// $('.-next').on('click', function() {
// console.log('test');
// })
},
bindButtons: function() {
var position = 0;
var that = this;
$('.arrow.-next').on('click', function() {
// console.log('slide next');
position++;
if (position == -1) {
position = that.slideCount - 1;
}
console.log('test');
that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
});
}
};
$(document).ready(function() {
Slider.init();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-banner">
prev
next
<div class="slider-items">
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
</div>
<div class="banner-detail">
<h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
</div>
</div>
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;