6

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

kristina childs
  • 2,190
  • 1
  • 20
  • 19

2 Answers2

5

Here's how I would do it.

$('#target').css('background-position', function(i, backgroundPosition) {
    return backgroundPosition.replace(/\d+px/, '60px');
});
alex
  • 479,566
  • 201
  • 878
  • 984
  • forgive me if this is a stupid question, but i'm a javascript baby. how do i call this in the html? – kristina childs Jun 13 '12 at 01:08
  • 2
    You can actually put a function there? I didn't know that until now. Thanks. – Derek 朕會功夫 Jun 13 '12 at 02:19
  • @alex i'm still wondering how you would call this. i don't see a function name anwyhere to include in the `` tag – kristina childs Jun 13 '12 at 17:21
  • @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! – Zuul Jun 15 '12 at 23:38
  • @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() { ... });`. – alex Jun 16 '12 at 01:12
  • @alex 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? – kristina childs Jun 17 '12 at 06:18
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"
  });
}
TheHippo
  • 61,720
  • 15
  • 75
  • 100
  • hmmm... i replaced out the code but doesn't seem to work. should the html call still be onClick="colorChangePiano()"? – kristina childs Jun 13 '12 at 00:48
  • 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. – TheHippo Jun 13 '12 at 00:50
  • lol of course! but that's still the correct call, right? just wanted to make sure it wasn't working because of the html – kristina childs Jun 13 '12 at 00:51