Home/ Questions/Q 6571697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:54:54+00:00

Checked out other posts, no help… I’m using asdw to move an object around

  • 0

Checked out other posts, no help…

I’m using asdw to move an object around within a limited space. I’m trying to figure out how to allow the object to move around while the key is pressed, without the momentary delay at the beginning.

Thanks…

$(document).ready(function(){
    var longitude = 0;
    var latitude = 0;

    $('body#sense').keypress(function(){
        if(event.which == 65 || event.which == 97){
            // Left
            if(longitude != 0){
                longitude = longitude + 10;
                $('img#map').css('margin-left', longitude);
            }
        }
        else (event.which == 68 || event.which == 100){
            // Right
            if(longitude > -200){
                longitude = longitude - 10;
                $('img#map').css('margin-left', longitude);
            }
        }
    });
});

The web page

    <body id="sense">

<h2><center>Use your 'asdw' keys to move the map around</center></h2>

<div id="box">

<img id="map" src="http://www.toronto.ca/culture/victoria-square/images/ch0/Victoria-Square-map-t.gif" alt="" />


</div>

</body>

The holding the image has a set width and height, both smaller than the image. The is set to overflow:hidden, so the javascript moves the image around within the div so different parts are visible.

The CSS

div#box {
    margin:0px auto;
    width:225px;
    height:225px;
    overflow:hidden;
}

div#box img {

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the keyDown event and then start your own timer interval to control your own repeat interval (ignore the system repeat interval) and then cancel the timer on keyUp. Ignore the other key events. You can pick your own repeat time in the setInterval calls.

    var timer = null;

function increaseLongitude() {
    // your code here
}

function decreaseLongitude() {
    // your code here
}

$("#sense").keyDown(function(e) {
    if (!timer) {
        if (e.which == 65 || e.which == 97) {
            timer = setInterval(increaseLongitude, 100);
            increaseLongitude();
        } else if (e.which == 68 || e.which == 100) {
            timer = setInterval(decreaseLongitude, 100);
            decreaseLongitude();
        }
    }
});

$("#sense").keyUp(function(e) {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
});
    • 0