Question

I have the basic idea of my JavaScript operational.

The point of my JavaScript is to make an image of id ‘player’ move to the position that I click with the mouse, only when I click on the div with the id of ‘stage’ with the animation lasting 3 seconds.

At the same time, when the animation is running the head should change to ‘player is moving’ as opposed to when it is still and displaying ‘player is still’.

Right now, in Chrome (maybe its a bug with Chrome) the basic functionality of the JS works. However, it seems to overshoot the position of where I click the mouse on the first round and then barely move when I click again in the ‘stage’ div.

If anyone sees where I might be running into a problem please let me know!

Here’s my EDITED JQuery:

$(document).ready(function(){
$('#stage').click(function(e){
    $('#header h1').html('Player is moving!');
    $('#player').animate({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }, 3000, function(){
        $('#header h1').html('Player is standing still...');
    });     
});

});

I have fixed my CSS issue, so don’t worry about that but the code is located below for the CSS in case anyone thinks the issue may lie within.

Thanks!

EDIT:

Here’s the CSS. The issue has been solved but it has been provided for convenience if you think the issue of the image overshooting the image may lie within for any reason:

#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}

Answer 1

Poor man’s example : jsfiddle but it works in FF and Chrome.
Also, I’m curious what styles you lose, simple color style is always applied.

So more information is needed, can you share the complete css?

Update: I’m still not seeing an issue in chrome (with the fiddle example)
Change #stage to something like

#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}

Your player vs page is lying about it’s position or where you can click. I wanted the stage to be a fixed item on the page, non-moving. I don’t see any other reason (in your CSS or jQuery) why it’d overshoot.

​