JQuery counter with max and min value
I am creating a counter that should increase to maxValue and decrease by no more than 0 when I mousedown. I also have the option to reset the counter to its initial value: 0. Also, if maxValue is an even number, it should count to that number. However, if maxValue is an odd number, it must count to -1.
The counter is working fine. But sometimes it tends to stay stuck between two meanings. I'm pretty sure this happens when I'm on one of the buttons and then immediately on the other side. Is there a way to prevent this? I also wanted to know if the code is correct if there is a simpler approach to this (with loops perhaps)?
Anyway, here's my code:
$(document).ready(function(){
var maxValue = 3;
var count = 0;
// intervals used to regulate how fast the value will change on mousedown
var upInterval;
var downInterval;
$('#counter').html("<p>" + parseInt(count) + "</p>");
$('#up').mousedown(function(){
// if the maxValue is an even number
if(maxValue % 2 == 0) {
upInterval = setInterval(function(){
if(count < maxValue) {
count++;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}
// if it an odd number, subtract one
else {
upInterval = setInterval(function(){
if(count < maxValue-1) {
count++;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}
}).mouseup(function() {
clearInterval(upInterval);
});
$('#down').mousedown(function(){
downInterval = setInterval(function(){
if(count > 0) {
count--;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}).mouseup(function() {
clearInterval(downInterval);
});
$('#reset').click(function(){
count = 0;
$('#counter').html("<p>" + parseInt(count) + "</p>");
});
});
Keep in mind that there are intervals to adjust how quickly this number should change when I have a mousedown and stop it from increasing or decreasing.
Here is the fiddle
Thank!
source to share
jsBin demo (extended use case)
in the demo above I created a use case where you can handle multiple items. It also has better UX because it uses setTimeout (instead of interval), which will gradually increase the count rate as you hold it down.
$(document).ready(function(){
var $counter = $("#counter p"), // Get the 'p' element
max = 10,
c = 0,
up = true, // boolean // This will keep track of the clicked up/dn button
itv;
function incDec(){
c = up ? ++c : --c; // value of `up` is true? increment, else: decrement
c = Math.min(Math.max(c, 0), max); // dididababaduuuu!
$counter.text(c); // Set current `c` into element
}
$('#up, #down').on("mousedown", function(e){
up = this.id==="up"; // set to true if button in "up"; else: false
incDec(); // Trigger on sligle click
clearInterval(itv); // Clear some ongoing intervals
itv=setInterval(incDec, 180); // Do every 180 untill..
}).on("mouseup mouseleave", function(){ // ..mouseup or mouseleave
clearInterval(itv);
});
$('#reset').click(function(){
c = 0; // Reset to 0
$counter.text(c); // Show that "0"
}).click(); // Trigger a reset click on DOM ready
});
source to share
I'm only able to reproduce the "stuck" you described if the "mouseup" doesn't happen on the element itself (like moving the cursor on mouse click). So this solved it for me:
$('#up').mousedown(function(){
$(window).mouseup(function() {
clearInterval(upInterval);
});
// if the maxValue is an even number
....
});
// and so on
source to share