How to Animate Div Element

LloydBronn — Sat, 11 Dec 2021 19:51:55 GMT

I have a map with a time slider. I've created a Div element that shows the local time in two minute intervals. I want it to follow a shapefile as it moves across the screen diagonally, down and to the right.

The element is in the right place at first, but on the second time change it disappears. I'm not sure what I'm missing. I've defined the Div position in the css, and I want to change it with each time change. Here are the relevant sections of my code.

#timePanel {
        position: absolute;
          top: 225px;
          left: 300px;
          z-index: 50;
      }


function timeMove() {
                 var elem = document.getElementById("timePanel");   
                 var pos = 225;
                 var id = setInterval(frame, 2000);
                 function frame() {
                      pos++; 
                      elem.style.top = pos + '25px'; 
                      elem.style.left = pos + '100px'; 
                    }
                 }
          
          timeSlider.on("time-extent-change", function(evt) {
            var startValString = evt.startTime.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', timeZoneName: 'short'})
           ;
            dom.byId("daterange1").innerHTML = "<b>" + startValString + "<\/b>"
               dom.byId("daterange2").innerHTML = "<b>" + startValString + "<\/b>"
               
               timeMove();
          
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to Animate Div Element

KellyHutchins — Sat, 11 Dec 2021 19:51:58 GMT

Haven't tried this out so not 100% sure but it looks like you are combining two strings rather than numerical values since the result of elem.style.top will be something like '10px' and you are trying to add '25px' to that.

 elem.style.top = pos + '25px'; 
 elem.style.left = pos + '100px';

One option might be to use the offsetLeft and offsetTop values which return numbers so you can combine the 25 and 100 then add 'px'.

For example.

            var box = document.getElementById("timePanel");
            var boxLeftPos = box.offsetLeft;
            var boxTopPos = box.offsetTop;
            box.style.top = (boxTopPos + 25) + "px";

            box.style.left = (boxLeftPos + 100) + "px";‍‍‍‍‍‍

topic How to Animate Div Element in ArcGIS JavaScript Maps SDK Questions

How to Animate Div Element

Re: How to Animate Div Element