Modifying CSS background-position by increment via javascript

Question

Whereas I have plenty of experience with PHP coding, I am pretty new to using javascript so I hope this question doesn't come off as stupid.

My goal here is to create a button that when pressed causes the background-position in a defined DIV object to alter its background-position by one pixel.

I've been doing a lot of searching on Google as well as this site in particular and following the tips I have found I've been playing around with the javascript functions a lot but I can't seem to get one that works the way I need it.

My current incarnation looks like this:

<SCRIPT TYPE="text/javascript">
var xObject = 0; // Global

function xMinus(ele) {
    xObject-=1;
    document.getElementById(ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}
</SCRIPT>

Where the goal is upon clicking the button (containing onclick="javascript:xMinus('divID');" ) the background should shift to the left by one pixel.

However currently when I click it, Error Console gives me "Error: document.getElementById(ele).css is not a function".

I've tried a few different variations but always get similar results, or "Variable is not defined". Clearly I have no idea what I am doing. Please help! I am coding this for friends and do not want to keep them waiting too long.

Eh nvm my previous comment, you're trying to apply a jQuery method `css` to a standard DOM element which doesn't have that method. — Fabrício Matté, Jun 08 '12 at 04:12
What are you passing inside the `ele`? It should be a string of the `id` of the element and it shouldn't start with a number. — Praveen Kumar Purushothaman, Jun 08 '12 at 04:21

score 3 · Answer 1 · answered Jun 08 '12 at 04:11

3

If you are not using jQuery then,

document.getElementById(ele).style.backgroundPosition = xObject + 'px ' +'0px';

answered Jun 08 '12 at 04:11

Sudhir Bastakoti

99,167
15
158
162

+1 A bit simpler to write `... = xObject + 'px 0px'` perhaps, and this one saves loading several thousand lines of library. – RobG Jun 08 '12 at 04:35

Praveen Kumar Purushothaman · Answer 2 · 2012-06-08T04:20:05.907

1

What are you passing inside the ele? It should be a string of the id of the element and it shouldn't start with a number.

Try rewriting the code this way:

var xObject = 0; // Global

function xMinus(ele) {
    xObject--;
    $('#'+ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}

I hope you are using jQuery! :) If not using jQuery, it should be:

document.getElementById(ele).style.backgroundPosition = xObject + 'px ' + '0';

And for the handler, that <a> tag, the code should be: (shouldn't contain javascript:)

<a href="#" onclick="xMinus('id'); return false;">BG Left Push!</a>

edited Jun 08 '12 at 04:20

answered Jun 08 '12 at 04:07

Praveen Kumar Purushothaman

164,888
24
203
252

1

I like the fact how users think that `javascript = jQuery`. But, thank god you didn't advised him to use 32KB jQuery code to do this trivial thing. :) – Rakesh Juyal Jun 08 '12 at 04:16
1

@RakeshJuyal When you see his code, he uses `.css()`, which is a function of `jQuery Object`. That's the reason I asked him if he's using jQuery. Anything wrong? – Praveen Kumar Purushothaman Jun 08 '12 at 04:18
html5 ids can start with numbers. (And in practice at least _some_ older browsers supported it too.) – nnnnnn Jun 08 '12 at 04:26
@RakeshJuyal Is jQuery not necessary for this then? – user1443628 Jun 08 '12 at 04:28
@user1443628 For this very small thing, yeah, as he said, 32KB overhead (including jQuery library) is not needed. – Praveen Kumar Purushothaman Jun 08 '12 at 04:29
_"Is jQuery not necessary for this then?"_ - jQuery isn't _necessary_ for anything, in that everything it can do can be done without it. (Not a criticism of jQuery - I like and use it.) – nnnnnn Jun 08 '12 at 05:31

Modifying CSS background-position by increment via javascript

2 Answers2