Javascript / jQuery flick between two images - javascript

I'm struggling with the timer part. I can replace one image with another easily with javascript by calling the function. What I want to be able to do is set a timer to sit and change the images at a specific interval (say 1 second).
I've used jQuery to refresh an image every second before, but when I try and add a function inside to change the image, it just hangs.

you can use setinterval function of javascript:
setInterval(function,time); //ex: setInterval(myfunction,1000)
setInterval will also return a pointer to time which can be used later on to clearInterval
var interval = setInterval(myfunction,1000);
later you can use:
clearInterval(interval)

Related

Overriding javascript function on different page

This is new to me, and I don't know how to handle it.
The page has a logo that uses transitions to change its size and color and is triggered by this on the bottom of the HTML:
document.onload="initialize()"
setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.95)');
$('#path2').css('transform','scale(.95)');
$('#path2').css('fill','#F7A700');
}, 2000);
$('#path1').css('transform','scale(1.05)');
$('#path2').css('transform','scale(1.00)');
$('#path2').css('fill','#FFCF55');
}, 4000);
This starts the transition and changes the color of the svg path in coordination. On a separate script page there is a function that determines the current page slider and I need to change the css fill on #path2 for a specific page. I've tried if...else statements, moving the setInterval() function to the same page, etc, but nothing is letting me override the fill color in the setInterval() function.
REVISION: Its included in the html and there is a separate js page with all of the other functions. So I thought maybe it had something to do with that but now I'm understanding it is running on an infinite loop so any changes I try to make are going to be overridden. Its a logo that is a svg with multiple paths and on the homepage slide one path needs to be white and everything else stay the same for all other pages slides. There is only one page of html and the content slides on a slider. Not sure if I explained it any better. I'm working with existing code done by someone else so I'm trying to work with what I've been given but maybe there is a better solution to run this? maybe through css? I need it to load on window or document load and run infinitely but need to be able to modify the css on it. I have to use css transforms to set it up.
The interval is setup to run forever. If you set the color from another script, the interval will just overwrite the color the next time the interval runs. One option is to stop the interval when setting the color from the other script. You would need a variable to hold the interval id.
var timer = null;
You would need to save the interval id when starting the interval.
timer = setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.75)');
$('#path2').css('transform','scale(.75)');
$('#path2').css('fill','#F7A700');
}, 2000);
$('#path1').css('transform','scale(1.50)');
$('#path2').css('transform','scale(1.50)');
$('#path2').css('fill','#FFCF55');
}, 4000);
In your other script, stop the interval when setting the color.
if (timer) {
clearInterval(timer);
timer = null;
}
$('#path2').css('fill','#00FF00');
Edit:
Another possible option is to use boolean flags to stop parts of the animation. This would allow you to stop the fill animation but continue with the reest of the animation. You would need a boolean flag to indicate whether or not the fill should be animated. Initialize the flag to true.
var animateFill = true;
Use the flag to determine if interval should animate the fill attribute.
setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.75)');
$('#path2').css('transform','scale(.75)');
if (animateFill){
$('#path2').css('fill','#F7A700');
}
}, 2000);
$('#path1').css('transform','scale(1.50)');
$('#path2').css('transform','scale(1.50)');
if (animateFill) {
$('#path2').css('fill','#FFCF55');
}
}, 4000);
In your other script, set the flag to false when setting the fill color.
animateFill = false;
$('#path2').css('fill','#00FF00');
If you later need to restart the animation of the fill color then set the flag back to true.
animateFill = true;

setInterval() with Jquery script

A quick thank you to those that have helped me so far with this script, you have all helped me enormously in learning some of the more elegant sides of javascript and jquery.
I have one final problem with this script, I am using setinterval() to cycle through an image changer, the JS/Jquerycode is as follows:
$(function() {
var rotateTimer = setInterval(rotateImg,15000);
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
}
});
function switchToImg(image) {
var $featureImage = $('#feature-image');
$featureImage.fadeOut(200, function() {
$featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
$('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
});
$('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};
function rotateImg() {
var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));
if (!$('#feature-links a').hasClass(next))
next = 'a1';
switchToImg(next);
}
});
This script works on class names of <a> tags that allow a user to manually switch to an image. As well as this, rotateImg() is providing an automated image/text cycle every 15 seconds with the help of setInterval().
The problem I have is with setInterval() re-initialising once a user has clicked on a link manually.
In the .click function I clear the interval timer and then make a call to the switchToImg() function with the class name of the <a> tag that was clicked on passed as a variable.
I'm trying to work out how I can re-set the timer to avoid a user clicking on a link towards the end of the cycle and having it switch immediately to the next image.
I have researched building my own callback function in to switchToImg() so that once the function has completed the timer is reset, ideally I'd like this to be a longer time initially (30 seconds for example) but then settle back down into the 15 second clock. My research however has lead me to a load of different repositories that I'm having difficulty making head or tail of.
Any guidance as to how I can build this functionality into the script would be really appreacited. Thanks for your time. :)
I'm not 100% sure I follow what you're asking, but if what you're trying to do is to restart the interval timer after a delay after the user clicks, then you could do that like this:
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
setTimeout(function() {
rotateTimer = setInterval(rotateImg, 15*1000);
}, 15*1000);
}
});
You would be using a one-shot setTimeout() call to restart the interval timer after a 15 second delay. This would give you 15+15=30 seconds before the next image switched again after a click and then 15 seconds each time after that.
Not sure I understand the question correctly. But basically I get that you want to prevent the timer from happening after the user clicks. Shouldn't calling setInterval right after switchToImg do exactly that? It'll call switchToImg then after every 15 seconds from the click of the user.

Javascript - Possible to check if an interval is already set?

I have a div that is bouncing every 5 seconds using an interval.
When scrolling to the bottom of the page, this div fades out and the interval is cleared.
However, I think there is an issue with the interval being created multiple times and overlaps upon itself.
Is there a way to check if an interval is set, and if so clear it, and if not, to set it?
The reason I need to clear the interval is because the bounce effect of jquery causes the div to appear again even if it's hidden.
JSBIN: http://jsbin.com/ijuhok/4/
Seems that you set the interval whenever it is scrolled. So if I scroll down, and then scroll down again you set it twice.
Just clear it before hand every time you set it and you should be ok.
http://jsbin.com/ijuhok/6
You need to overwrite the existing interval so that you can clear it from everywhere: http://jsbin.com/ijuhok/5/.
$j("#more").fadeIn('slow',function(){
ResInterval = window.setInterval(bounceMore, 5000);
// no "var"
});
You can eliminate $(document).ready for window because it's always available.
Your issue is that you're defining ResInterval in a local scope, because you've used var:
$j("#more").fadeIn('slow',function(){
var ResInterval = window.setInterval('bounceMore()', 5000);
});
Remove the var prefix, and your code will work as expected: Currently, ResInterval is a local varibale of the callback function in fadeIn. When var is omitted, the interval will be assigned to the closest ResInterval declaration (using var).
I did this like below, My problem was solved. you should set the value like "false", when you clearTimeout the timer.
var timeer=false;
----
----
if(timeer==false)
{
starttimer();
}
-----
-----
function starttimer()
{
timeer=setInterval(activefunction, 1000);
}
function pausetimer()
{
clearTimeout(timeer);
timeer=false;
}

How to use javascript to monitor a change in a div value?

I have a page with a countdown in a DIV with id ="count"
I would like to monitor this div value so, when it reaches 0, a alert pops up.
I've gono so far as
if(parseInt(document.getElementById('count').innerHTML) < 2){}
But I don't know how to "listen" for the div changes
Can anyone help me?
Btw: it needs to be in pure javascript, with no such things as jquery.
Update:
I have no say so in the original code. It's an external page and I'm trying to run this code at the address bar
Presumably you have a function running based on setInterval or setTimeout. Have that function call your function when it gets to zero.
If you can't do that, you can try optimised polling - use setInterval to read the value, estimate when it might be near zero, check again and estimate when it might be zero, etc. When it is zero, do your thing.
There are DOM mutation events, but they are deprecated and were never well or widely supported anyway. Also, they are called when content changes so probably too often for your scenario anyway.
If you are changing the value of #count yourself then call the alert from that place. If not use:
window.setInterval(function(){
if(parseInt(document.getElementById('count').innerHTML) < 2) alert('Alarm!');
},1000); // 1s interval
UPDATE
To clear that interval:
var timer = window.setInterval(function(){
if(parseInt(document.getElementById('count').innerHTML) < 2) {
alert('Alarm!');
window.clearInterval(timer);
}
},1000); // 1s interval
//or by using non-anonymous function
function check(){
if(parseInt(document.getElementById('count').innerHTML) < 2) {
alert('Alarm!');
window.clearInterval(timer);
}
}
var timer = window.setInterval(check,1000);
The only efficient way to monitor this is to go to the code that is actually changing the div and modify it or hook it to call a function of yours whenever it updates the contents of the div. There is no universal notification mechanism for anytime the contents of div changes. You will have much more success looking into modifying the source of the change.
The only option I know of besides the source of the change would be using an interval timer to "poll" the contents of the div to notice when it has changed. But, this is enormously inefficient and will always have some of inherent delay in noticing the actual change. It's also bad for battery life (laptops or smartphones) as it runs continuously.
You don't listen for the div to change. The div is just there for a visual representation of the program's state.
Instead, inside whatever timing event is counting down the number, use a condition such as...
if (i < 2) {
// ...
}

jQuery automate function call

How do I call a given function every X seconds?
In this case, I made a function that scrolls some images. I want the image to change based on a given interval of time, for example, every 5 seconds, but I really have no idea.
No need for jQuery here, plain JavaScript using setInterval() will do:
function myFunctionName() {
//change image here
}
setInterval(myFunctionName, 5000);
Or the anonymous version:
setInterval(function () {
//change image here
}, 5000);
Try
setInterval(function, Xseconds);
If you want jQuery to do it for you, there is a plugin, jquery.cycle.all. This will make creating the transition very easy. If you're using jQuery already, then it might be a good fit. Otherwise, the setInterval is easy to work with that other posters already mentioned.

Categories

Resources