How to call any of the arrow keys

Question

I have an application (HTML5, JavaScript, jQuery, jQuery Mobile) with a slider. The handle can be moved by touch, and you can move through the years from 1861 to 2000. There are symbols on my map that are visible / invisible depending on the year. See image of my example.

I also want the handle to move when the user clicks on a specific button ("forward"). the handle must go through each year until the user clicks on another button. I managed that with one click the pen goes + 1 year, and the pen, year and map update the changed year.

function moveLeft(){ var slider1 = $("#slider").val(); var $slider = $("#slider"); slider1++; $slider.val(slider1).slider("refresh"); var wert1 = slider1; var start = new Date().getTime(); //start = hideLayer2(wert1, start); $('#jahr').text(wert1); var $ausgabe = $("#ausgabe"); $ausgabe.text(wert1); gewaehltesJahr = wert1; 

I built a for loop (for (i = slider1; i <2000; i ++)) for this function, but the handle and all will be updated only if the function has reached the year 2000. I want to see an update every one year. Even if I look at the code using the debugger, it will only update the year, descriptor, and map when it finishes the loop and exits the function.

The following code, for example: If I start in 1861 and initialize the function, the pen and card will immediately go to 1870 after the warning "alert" ("vor") in the last line.

 function vor(){ var slider1 = $("#slider").val(); var $slider = $("#slider"); for( var s = slider1; s < 1870; s++){ //$slider.val(s).slider("refresh"); $("#slider").slider('value',s); alert(s); var wert1 = s; var start = new Date().getTime(); //start = aktuelles Datum hideLayer2(wert1, start); $('#jahr').text(wert1); var $ausgabe = $("#ausgabe"); $ausgabe.text(wert1); gewaehltesJahr = wert1; } alert("vor"); } 

Handle when focus can also be moved by pressing the arrow keys.

 $('.ui-slider-track .ui-btn.ui-slider-handle').focus(); 

I tried to imitate a single key press to go forward a year, but it doesn’t work either. I tried to set the trigger, but that didn't work. Can anyone help?

 var kEvent = document.createEvent('Event'); kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 38, 0); document.activeElement.dispatchEvent(kEvent); 

Answer 1

Thanks a lot, I edited it a bit and now it works!

  var animation_timer; function vor(){ animate_slider = true; animation_timer = setInterval(function(){ if(!animate_slider){ clearInterval(animation_timer); } else{ var slider1 = $("#slider").val(); var $slider = $("#slider"); // $("#slider").slider('value',slider1); slider1++; var wert1 = slider1; $slider.val(slider1).slider("refresh"); var start = new Date().getTime(); //start = aktuelles Datum hideLayer2(wert1, start); $('#jahr').text(wert1); var $ausgabe = $("#ausgabe"); $ausgabe.text(wert1); gewaehltesJahr = wert1; if(slider1 == 2000){ clearInterval(animation_timer); } } },1000); } 

Answer 2

The loop runs instantly, so you need to use javascript timers!

 //Global flag to decide animation //Make this false to clear the animation loop from anywhere var animate_slider = false; //Global timer for animation var animation_timer; //Call animation function function vor(){ animate_slider = true; animation_timer = setInterval(function(){ if(!animate_slider){ clearInterval(animation_timer); } else{ var slider1 = $("#slider").val(); var $slider = $("#slider"); $("#slider").slider('value',s); var wert1 = s; var start = new Date().getTime(); //start = aktuelles Datum hideLayer2(wert1, start); $('#jahr').text(wert1); var $ausgabe = $("#ausgabe"); $ausgabe.text(wert1); gewaehltesJahr = wert1; if(slider1 == maxValue){ clearInterval(animation_timer); } } },1000); } 

Note:

Launching the arrow keys is not necessary and pointless, because it will also lead to the execution of instances of all clicks. Therefore, even there you need to use timers, so you can get around this and change your main method using timers.