AnsweredAssumed Answered

How to Animate Div Element

Question asked by lloydbronn on Aug 9, 2017
Latest reply on Aug 10, 2017 by khutchins-esristaff

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();
         
            });

Outcomes