Overriding javascript function on different page

Question

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.

Answer 1

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;