Here is the code:
//Mouseover start countdown
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
var interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want to display it.
if (counter == 1) {
//Display 1
$('#login_icon_1').fadeIn();
//Fade in
}
if (counter == 2) {
//Display 2
$('#login_icon_1').fadeOut(750);
//Fade in login icon 2
$('#login_icon_2').fadeIn();
}
if (counter == 3) {
//Display 3
//Display 2
$('#login_icon_2').fadeOut(500);
//Fade in login icon 2
$('#login_icon_3').fadeIn();
}
if (counter == 4) {
//Display 4
//Display 2
$('#login_icon_3').fadeOut(500);
//Fade in login icon 2
$('#login_icon_4').fadeIn();
}
if (counter == 5) {
//Display 2
$('#login_icon_4').fadeOut(500);
//Fade in login icon 2
$('#login_icon_5').fadeIn();
//Display 2
$('#login_icon_5').fadeOut(1000);
}
if (counter == 6) {
counter = 7;
window.location.replace("/wahalu/index.php/login_advisor.php");
}
}, 1000);
}
);
$("#icon_no_1").mouseleave(function()
{
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1').hide();
$('#login_icon_2').hide();
$('#login_icon_3').hide();
$('#login_icon_4').hide();
$('#login_icon_5').hide();
}
);
});
Another way to do it would be to take the variable out of the mouseover so that it can be shared with the mouseleave.
var interval; // <-- is in scope of both events now
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want
// etc etc etc
Now the interval is accessible to mouseleave
$("#icon_no_1").mouseleave(function()
{
counter = 0;
clearInterval( interval )
// etc etc etc
It is not a global variable if you are running your code inside of $(document).ready()
Store the interval with the element, instead of this:
var interval = setInterval(function() {
//code
}, 1000);
Do this:
$.data(this, 'interval', setInterval(function() {
//code
}, 1000));
Then in your mouseleave handler, clear it using clearInterval(), like this:
$("#icon_no_1").mouseleave(function() {
clearInterval($.data(this, 'interval'));
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1, #login_icon_2, #login_icon_3, #login_icon_4, #login_icon_5').hide();
});
This style of doing timeouts/intervals eliminates the global variables and if needed you can have a timeout/interval per element (instead of a global variable per timeout/interval, per element).
Related
I have a JS code block just like below. the code will redirect user to login page after 30 sec but if the user clicks anywhere on the page the process will be reset. theoretically the code logic is true setInterval and EventListener both works fine but when I click somewhere in the page although global variable (counter) changes to 0 but (if) condition in the setInterval has no effects and still (counter) variable remain unchanged and the redirection will be happened!!!
var counter = 0;
setInterval(function() {
if (counter >= 30) {
// commented below line for testing with run code in stack overflow.
// In real code it will be uncommented.
// document.location = 'http://localhost/login';
console.log('redirect');
} else {
counter++;
}
}, 1000);
document.addEventListener('click', function(e) {
counter = 0;
}, true);
Your code should work
Here is a perhaps more understandable version using clearInterval
let secs = 5;
let tId;
function int() {
clearInterval(tId);
counter = secs;
tId = setInterval(function() {
if (counter <= 0) {
document.location = 'https://github.com';
} else {
counter--;
}
document.getElementById("x").innerText = counter
}, 1000);
}
document.addEventListener('click', int);
int()
<span id="x"></span>
I have this script:
<script>
Array.prototype.forEach.call(document.querySelectorAll(".thumbs div"), function ($div) {
$div.style.width = document.querySelectorAll(" img").length * 100 / 4 + "px";
});
document.querySelector("#next").onclick = function () {
var i = 100;
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft += 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
});
};
document.querySelector("#prev").onclick = function () {
var i = 100;
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft -= 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
});
};
</script>
That scrolls the slider thumbs when clicking the next or prev buttons. In Opera and Chrome, it works fine - with one click to the button, .thumbs scrolls 100px. But in Firefox, with one click, it scrolls 1px.
What can I do to fix that?
That's because you aren't passing an interval delay to setInterval, and so Firefox only runs it once. Other browsers seem to take it as if you were passing it 0 (the minimum delay).
Just pass 0 or any value you like, to both of your intervals.
http://jsfiddle.net/ar8au1o6/1/
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft += 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
}, 0); // <-- Set each interval in your code to 0,
// Or any other delay.
// If you set it to 0, the browser will pick the minimum delay.
I have this code:
$(document).ready(function(){
var count = 0;
var clicks= 0;
$(".press").click(function() {
count++;
clicks++;
console.log(count);
$('#animation2').html("My current count is: "+clicks);
if(count==1){
count=0;
if($('.animation img').css('left') == '100px'){
$('.congrats').css('display','block');
$("#startClock").css('display','block');
$(".press").css('display','none');
$('.animation img').css('left','0');
var counter=0;
span.innerHTML = counter;
}else{
$('.animation img').animate({ "left": "+=10px" }, 1 );
}
}
});
span = document.getElementById("count");
$("#startClock").click(function() {
clicks=0;
$("#animation2").css('display','block');
$('#animation2').html("My current count is: "+clicks);
var counter =30;
$('.congrats').css('display','none');
$('.press').css('display','block');
$(this).css('display','none');
setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
if (counter === 0) {
$("#startClock").css('display','block');
$('.press').css('display','none');
clearInterval(counter);
}
}, 1000);
});
});
This code have a counterdown whitch must be reset when I click button with id=startClock the second time. If I click twice setInterval decrease 2 second suddenly.
You are not using setInterval and clearInterval correctly. When you call setInterval, it returns an ID that you can use later with clearInterval. Here is an example :
var counter = 30;
var my_interval = setInterval(function(){
counter--;
if(counter <= 0) {
clearInterval(my_interval);
}
}, 1000);
This would countdown from 30 every second until counter reaches 0, then it would stop.
I suggest you go read about timeouts and intervals here
I have a show and hide div fade loop that I am using like a short interactive tutorial with tips. I can get the divs to cycle through in order; however, I would like to add a pause button inside of each tip that pauses the loop, with the ability to resume. How do I add that functionality into my script?
Here is my js:
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').css('visibility','visible').hide(),
dur = 100;
function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 4 * 1000); // do this every 4 seconds
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
And here is my fiddle: Updated Fiddle
I have solved by using a global variable window.i as the counter
function fadeLoop() {
var divs = $('.fader').hide(),
dur = 200;
function showDiv() {
divs.fadeOut(dur) // hide all divs
.filter(function(index) {
return index == window.i % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
window.i++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 1 * 1000); // do this every 5 seconds
};
$(function() {
var interval;
window.i = 0;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...
Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?
var current = 1;
function autoAdvance() {
if (current == -1) return false;
jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
changeEvery = 10;
}
var itvl = setInterval(function () {
autoAdvance()
}, changeEvery * 1000);
Something like this would work assuming interval is defined in an outer scope:
$('.slideshow img').hover(function() {
interval = clearInterval(interval);
}, function() {
interval = setInterval(flip, 5000);
});
(function () {
var imgs = $('#your_div img'), index = 0, interval,
interval_function = function () {
imgs.eq(index).hide();
index = (index + 1) % imgs.length;
imgs.eq(index).show();
};
imgs.eq(0).show();
interval = setInterval(interval_function, 5000);
$('#your_div').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 5000);
});
}());
Example: http://jsfiddle.net/Zq7KB/3/
I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.
Hope this helps.