using backgroundPosition-please help

chickentulip · 09-20-2012, 08:25 PM

Could someone please take a look at the script below. the code positions a background image at 0px -12px. But I need to replace these numbers with variables x and y which consequently, I will be changing dynamically.
I need to use x and y in the code, but I don't know how to do it properly.

Code:

<script type="text/javascript">
function ini() {
var list=document.getElementById("nav_list");
x=0;
y=-12;
list.style.backgroundPosition='0px -12px';
}

window.onload=ini;
</script>

for example

Code:

list.style.backgroundPosition='xpx ypx';  does not work
list.style.backgroundPosition=x+"px"  y+"px'; does not work either

thank you very much for help.

Sammy12 · 09-20-2012, 08:40 PM

Code:

list.style.backgroundPosition=x+"px"  y+"px'

Isn't that supposed to be "?

sec let me look at this

chickentulip · 09-20-2012, 08:44 PM

Code:

list.style.backgroundPosition=x+"px"  y+"px';

no, this option does not work

Sammy12 · 09-20-2012, 08:47 PM

Yeah, you needed " instead of ' and a space between the x and y values.

Code:

function ini() {
	x=0;
	y=-12;
	document.getElementById('nav_list').style.backgroundPosition = x + "px" + " " + y + "px";
}
window.onload=ini;

or with your original pursuit:

Code:

function ini() {
	var list=document.getElementById("nav_list");
	x=0;
	y=-12;
	list.style.backgroundPosition = x + "px" + " " + y + "px";
}
window.onload=ini;

chickentulip · 09-21-2012, 02:38 PM

it works. I would have never guessed that I have to make up for an extra space ....
thank you very much!