Flashing text on value change

Question

Hi i have a snippet of javascript/JQuery that is reading from a and putting the values in to corresponding div's what i want to know is with what i currently have would it be possible to detect when the value has changed and flash the text or background or something along those lines, here is my code.

       $(document).ready(
    function () {
        setInterval(function () {
            $.getJSON("../../../UpdatedData/MachineCounts/MachineCounts.json", function (data) {
                $(".Midbox").empty().removeClass("YellowBackground").removeClass("redBackground");

                $.each(data, function (key, val) {
                    var DID = "#" + val.controllerID + "D";
                    var NID = "#" + val.controllerID + "N";
                    var DSID = "#" + val.controllerID + "DS";
                    var NSID = "#" + val.controllerID + "NS";


                    var DayScrapPercent = val.ScrapCountDay / val.GoodCountDay * 100;
                    var NightScrapPercent = val.ScrapCountNight / val.GoodCountNight * 100;

                    if (isNaN(DayScrapPercent) == true) {
                        DayScrapPercent = 0;
                    }

                    if (isNaN(NightScrapPercent) == true) {
                        NightScrapPercent = 0;
                    }

                    var DayClass = "";
                    var NightClass = "";


                    if (DayScrapPercent > 3) {
                        DayClass = "yellowBackground";
                    } else if (DayScrapPercent > 5) {
                        DayClass = "redBackground";
                    }

                    if (NightScrapPercent > 3) {
                        NightClass = "yellowBackground";
                    } else if (NightScrapPercent > 5) {
                        NightClass = "redBackground";
                    }

                    $(DID).empty();
                    $(DID).append(Math.abs(val.GoodCountDay)).addClass(DayClass);
                    $(NID).empty();
                    $(NID).append(Math.abs(val.GoodCountNight)).addClass(NightClass);

                    $(DSID).empty();
                    $(DSID).append(Math.abs(DayScrapPercent) + "%");
                    $(NSID).empty();
                    $(NSID).append(Math.abs(NightScrapPercent) + "%");

                });
            });
        }, 5000);
    });

when this looks wit puts data in to divs the data is just numbers, what i need to do is detect when those numbers change and if they have changed flash when they change.

before emptying the element you must take its content and compare it against the new values.. if they are different then you can do what you want with that element.. — Mihai Matei, Apr 08 '15 at 14:37
@Grimbode Then you and I read the question differently. In which case I would suggest the OP explains the desired output a little better. — CodingIntrigue, Apr 08 '15 at 14:38
@RGraham I agree that the title is ambiguous, but he is asking how to "detect when the value has change to then flash a color". — kemicofa ghost, Apr 08 '15 at 14:40
@Grimbode Detect the change of the value in the div* i will clarify in my question — Josh Kirkpatrick, Apr 08 '15 at 14:41
Correction: "detect when the **value** has changed", which presumably is always because the code is running on DOM ready. Add the code from the duplicate and there's the answer :) — CodingIntrigue, Apr 08 '15 at 14:41

Flashing text on value change

0 Answers0