Link Gif to Div using javascript timings

Question

I am trying to change a background color of a div according to a gif. This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--===============================================================================================-->
</head>

<body onload="resetGif('img3')">

    <div class="container m-t-20 m-l-20px">
        <div class="row">
            <div class="col-9">
                <h2>Map of KidKits</h2>
                <img src="images/map crossfade.gif" alt="" class="map-gif" id="img3">
            </div>

            <div class="col-3">
                <h2 id="first-bad">Div to change color</h2>
            </div>

        </div>
    </div>

    <script>
        (function(el, interval) {
            window.setInterval(function() {
                document.getElementById("first-bad").style.backgroundColor = "#2eaa2e"
            }, interval);
            setTimeout(function() {
                document.getElementById("first-bad").style.backgroundColor = "orange"
            }, 3410);
            setTimeout(function() {
                document.getElementById("first-bad").style.backgroundColor = "#2eaa2e"
            }, 1500);
        })(document.getElementById('first-bad'), 10410);

        function resetGif(id) {
            var img = document.getElementById(id);
            var imageUrl = img.src;
            img.src = "";
            img.src = imageUrl;
        };
    </script>

</body>

</html>

What is happening here is that I am resetting the gif every time the page loads so that the timings would match. I want to change the background color of the div from green to orange when the dot on the left of the gif exits the box and from orange to green when the dot is back into the box. This would have to loop infinitely for the duration of the gif so that the colors do not miss match after one iteration. How can I do this?

The issues I am facing now is:

on load there is no bg color for the tile
The timings are off
Once the tile changes from green to orange to green for one iteration, it does not repeat.

Here is a link to the gif: link.

score 0 · Answer 1 · answered Oct 23 '19 at 17:41

0

on load there is no bg color for the tile

You should set the background color after the page loads. Just set it in your css/main.css file.

The timings are off

Well, setTimeout is not accurate. Check this answer for more information: https://stackoverflow.com/a/21097655/11317309

Once the tile changes from green to orange to green for one iteration, it does not repeat.

That is probably because you use setTimeoutthat is going to execute your code once.

answered Oct 23 '19 at 17:41

beltekylevi

89
7

Is there any practical way you can demonstrate your suggestions? – Udo E. Oct 23 '19 at 17:43
@UdoE. [Is this something like you mean?](https://repl.it/@beltekylevi/DroopyStormyApplescript) – beltekylevi Oct 23 '19 at 18:05

score 0 · Answer 2 · answered Oct 23 '19 at 17:53

You change the code like resetting the counter and put bgcolor in an array

Fiddle

let counter = 0;
const bgColorArray = ['red', 'orange', 'yellow'];
setInterval(() => {
    let increaseCounter = ++counter;
    if (increaseCounter === bgColorArray.length) {
         counter = 0;
    }
    document.getElementById("first-bad").style.backgroundColor = 
       bgColorArray[increaseCounter]
 }, 1000)

Link Gif to Div using javascript timings

2 Answers2