Results 1 to 2 of 2

Thread: Sprites and backgroundPosition

  1. #1
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default Sprites and backgroundPosition

    I am having trouble figuring out what is wrong in this script:

    Code:
    <html>
    <head>
    <title>sprite</title>
    <script type="text/javascript">
    var increm = 0;
    var handleEvent = function(e) {
    	switch((e || window.event).keyCode) {
    		case 90:
    		case 122:
    			break;
    		case 37:
    		case 38:
    		case 39:
    		case 40:
    			cycle();
    			break;
    	}
    };
    
    function cycle() {
    	var order = [0, 1, 0, 2];
    	if(increm >= order.length) {
    		increm = 0;
    	}
    	var x = order[increm]*16;
    	document.getElementById("sprite").style.backgroundPosition = "-16px -16px;";
    	increm++;
    }
    
    document.onkeydown = function(e) {
    	handleEvent(e);
    };
    </script>
    <style type="text/css">
    #sprite {
    	background: url(sprite.png);
            background-position: 0px -16px;
    	position: absolute;
    	top: 100px;
    	left: 100px;
    	height: 16px;
    	width: 16px;
    	display: block;
    }
    </style>
    </head>
    <body>
    sprite testing<br>
    <div id="sprite"></div>
    </body>
    </html>
    It is very redundant, I know. But my only problem is the highlighted line where the CSS style backgroundPosition is manipulated. It doesn't seem to be working correctly. I changed it to a constant -16px -16px to ensure that variables weren't causing the problem. The original position is 0px -16px and it will not change to -16px -16px when an arrow key is pressed. The sprite image is in the attachments. Please explain to me what is going on here. (I'm using the latest version of FireFox) Thanks!
    Last edited by magicyte; 07-10-2011 at 05:33 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Lose the quoted ; (red) - it's not part of a valid value for backgroundPosition:

    Code:
    document.getElementById("sprite").style.backgroundPosition = "-16px -16px;";
    Even in css it's only required if another property/value pair follows. It's a delimiter in css and has no place in the javascript syntax used here.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    magicyte (07-10-2011)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •