1

I have an image that I want to move. I can move the element with javascript if I have the HTML below:

<html>
<head>
    <title>Snake</title>
    <script type="text/javascript" src="snake.js"></script>
    <!-- <link type="text/css" href="snake.css"> -->
</head>
<body onKeyPress="ProcessKeypress(event);">
    <p><img id="snake" style="z-index: 0; left: 300px; position: absolute; top: 250px" 
    float=top border=0 hspace=0 src="snake.gif"></p>
</body>

However I want to stye the image element using CSS. When I do this my code to move the image does not work. HTML and CSS below are what I would like to use.

<html>
<head>
    <title>Snake</title>
    <script type="text/javascript" src="snake.js"></script>
    <link type="text/css" href="snake.css">
</head>
<body onKeyPress="ProcessKeypress(event);">
    <p><img id="snake" src="snake.gif"></p>
</body>


@CHARSET "UTF-8";
img {
z-index: 0;
left: 300px; 
position: absolute; 
top: 250px;
float: top;
border: 0;
hspace: 0;
}

JavaScript below is what I am using to move the image. Any and all help appreciated. 

function moveObj(name, Xpix, Ypix) 
{    
    obj = document.getElementById(name);

    px = parseInt(obj.style.left) + Xpix;       
    py = parseInt(obj.style.top) + Ypix;
    obj.style.left = px;
    obj.style.top = py;
}

function ProcessKeypress(e)
{
    var myObj = 'snake';
    var moveBy = 10;

    if(e.keyCode === 97) {
        moveObj(myObj, -moveBy, 0);
    }
    else if(e.keyCode === 100) {
        moveObj(myObj, moveBy, 0);
    }
    else if(e.keyCode === 115) {
        moveObj(myObj, 0, moveBy);
    }
    else if(e.keyCode === 119) {
        moveObj(myObj, 0, -moveBy);
    }
}
Starx
  • 77,474
  • 47
  • 185
  • 261
shortspider
  • 1,045
  • 15
  • 34
  • 2
    why not use jQuery? it will be much easier... – Siwei Mar 27 '12 at 04:08
  • Its a learning exercise for myself. I'd like to just use raw JavaScript, HTML and CSS if I can. – shortspider Mar 27 '12 at 04:15
  • CSS `align` property [doesn't exist](http://www.w3schools.com/tags/att_img_align.asp), the equivalent seems to be the CSS `float` property. Since it is the only change you made, it might be what prevents your image from being controlled by JS. – Stock Overflaw Mar 27 '12 at 04:38
  • Changed `align` to `float` in both CSS and HTML cases, changes shown in above code. HTML code still works as expected but did not fix the CSS problem. Is there any reason JavaScrip wouldn't allow me to override the CSS sheet? – shortspider Mar 27 '12 at 04:44
  • i doubt there is anything called `float: top;` in your css for image. what happens if you remove? and why have you wrote this? – Murtaza Mar 27 '12 at 04:55
  • `hspace` is not a valid CSS property. – mwcz Mar 27 '12 at 05:10
  • @SiweiShen because its not the answer to everything JS related. – Sir Oct 19 '13 at 15:00

2 Answers2

0

I'm not sure if your code was a copy-paste, but you need to close the link tag to link in your css.

<link rel="stylesheet" type="text/css" href="location" />

But that is beside the point. This is a repost so I'm going to flag it as that. Refer to Why is element.style.left returning NaN?

That should answer your question. It answered mine as I worked through your code and it made sense. Good luck.

Community
  • 1
  • 1
Matthew
  • 61
  • 2
0

obj.style.left accesses the style properties defined in inline only.

UPDATE

Here is your pure JavaScript Solution

Function: getStyleProp() to get the current applied style [Source]

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}

Function: moveObj()

function moveObj(obj, Xpix, Ypix) {  
    obj.style.left = parseInt(getStyleProp(obj,'left')) + Xpix+"px";
    obj.style.top= parseInt(getStyleProp(obj,'top')) + Ypix + "px";
}

Function: ProcessKeypress()

function ProcessKeypress(e) {
    var myObj = document.getElementById("snake");
    var moveBy = 10;
    switch(e.charCode) {
        case 97: moveObj(myObj, -moveBy, 0); break;
        case 100: moveObj(myObj, moveBy, 0); break;
        case 115: moveObj(myObj, 0, moveBy); break;
        case 119: moveObj(myObj, 0, -moveBy); break;            
    }
}

I also solved your case using jQuery: Demo

Function moveObj

function moveObj(obj, Xpix, Ypix) {    
    obj.css('left', parseInt(obj.css('left')) + Xpix);       
    obj.css('top', parseInt(obj.css('top')) + Ypix);
}

Function ProcessKeypress

function ProcessKeypress(e) {
    var myObj = $("#snake"); //It will be better if it is cached
    var moveBy = 10;
    switch(e.charCode) { //used Switch for better manageability
        case 97: moveObj(myObj, -moveBy, 0); break;
        case 100: moveObj(myObj, moveBy, 0); break;
        case 115: moveObj(myObj, 0, moveBy); break;
        case 119: moveObj(myObj, 0, -moveBy); break;            
    }
}

Event Trigger attached to document instead

$(document).on('keypress', ProcessKeypress);
Community
  • 1
  • 1
Starx
  • 77,474
  • 47
  • 185
  • 261
  • I tried both solutions and neither seem to be working for me. The `getStyleProp` function returns NaN always. In addition I tried the jQuery solution (Thanks for the additional solution btw) and it seems the `obj.css` variable doesn't exits, it comes up NaN as well. I implemented it as you demoed and no luck. – shortspider Mar 27 '12 at 15:38
  • @shortspider, I have working demo for both ways. What is it that is not working on them? – Starx Mar 27 '12 at 15:41
  • Found an error in my implementation of your code. It works like a charm. Thank you for your help. :) – shortspider Mar 28 '12 at 02:48