Animating ArcGIS API for JavaScript Div Map Element?

Question

I have an ArcGIS JS 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();
 });

Answer 1

When you do this, you're appending pos and "25px":

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

So if pos is 225, the top value becomes "22525px", which is probably offscreen. You want to add the numbers before you append "px":

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

Since you want to move the element from its position in the last frame, you probably want to do something like:

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

• Bill Hambone: OK, I tried this, and it's only moving right and down one pixel. I guess I'm confused as to exactly what the single value "pos" represents, because I have the first instance set to an xy point (225,300).
• Marc Pfister: pos++ increments by 1, so your position will change by 1 pixel in each direction.
• Bill Hambone: OK, do I need a for-loop incrementer?
• Bill Hambone: Essentially. Those might not be the exact values, but in the ballpark.
• Marc Pfister: see update for a possible simple solution.