jquery background change one axis only

Question

I think my last question overwhelmed everybody so I will simplify

I am attempting to change the background-position of the x-axis only. By default if only one value is defined, the other defaults to 50%, so this function:

function colorChangePiano() {
    var bp = $("background-position").css;
    $("#target").css('background-position', (bp == -1131) ? '-377' : '0');
}

returns background-position: 0 50%;

How can I modify the function to change x-axis but leave y-axis unchanged?

edited --> this is for a sprite with 4 columns and 4 rows so the y-axis should remain dynamic. working site here: http://www.avalonbyeaw.com click "finishes." we got it working with some crazy complicated scripting on the live site, but i will leave this up here anyway because i would still really like to find a solution to this problem

Mideast

Answer 1

Here's how I would do it.

$('#target').css('background-position', function(i, backgroundPosition) {
    return backgroundPosition.replace(/\d+px/, '60px');
});

Sewoll

forgive me if this is a stupid question, but i'm a javascript baby. how do i call this in the html? – Mideast

You can actually put a function there? I didn't know that until now. Thanks. – Oak

@Sewoll i'm still wondering how you would call this. i don't see a function name anwyhere to include in the <a> tag – Mideast

@alex, nice one :) Perhaps placing Kristina’s function with your solution implemented, as part of your answer to clarify how she would solve the question, would be helpful for all! (and then she can accept the answer) and close this issue! – Simple

@kristinachilds this piece of code shouldn't be associated with anything tag related. If you want it to be triggered for an a element's click event, then bind it with $('a').click(function() { ... });. – Sewoll

@Sewoll i'm feeling particularly stupid right now. keep in mind i am just starting to learn JS so none of this is making sense to me. perhaps if you gave a literal example of hour the script is written along with an example of how the html would look i could wrap my simple brain around it? – Mideast

Answer 2

Add the 2 values to background-position (as it expects). Also save the current position in a variable which makes this easier.

var pos = -377;
var colorChangePiano = function() {
  if (pos == -377) {
    pos = -1131
  }
  else {
    pos = -377
  }
  $('#target').css({
    'backround-position': pos + 'px 0px' // will result in "Xpx 0px"
  });
}

Goddamned

hmmm... i replaced out the code but doesn't seem to work. should the html call still be onClick="colorChangePiano()"? – Mideast

You definitely need to call this function when you need it to be executed!! I am also not sure on which values should be inserted, so change to % if you don't want to align by pixels. – Goddamned

lol of course! but that's still the correct call, right? just wanted to make sure it wasn't working because of the html – Mideast