asked on

backgroundPositionY replacement

How do I in best practice replace the backgroundPositionY to a function that works with all browsers? This is about an image sprite so I can't use the image width property (and every images has different width).. However I have a width value set through external CSS.

Michel Plungjan

http://www.w3schools.com/htmldom/prop_style_backgroundpositiony.asp

David S.

You would need to use the backgroundPosition property instead. However, it sounds like that won't work very well in this case. Perhaps if you gave us more information we could suggest an alternative way to achieve your goal.

dingir

ASKER

please, this is not firefox friendly.

read,
http://markmail.org/message/a77efamz3alsqhe4
http://forums.devshed.com/css-help-116/getting-background-position-in-firefox-498384.html
http://www.sitepoint.com/forums/showthread.php?t=601467
http://dev.jquery.com/ticket/2462

please respond if you have any more ideas here,

dingir

ASKER

Kravimir, thank's. I can't specify the x value in javascript because it's used in css.

function HighLight(obj) {
document.getElementById(obj).style.backgroundPositionY = '-430px';
};
function NoLight(obj) {
document.getElementById(obj).style.backgroundPositionY = '-370px';
};

$("#footer a").hover(
function() { HighLight($(this).attr("id")); },
function() { NoLight($(this).attr("id")); }
);

#foot .lnk1 { background-position: -9px -370px;width:25px; }
..
#foot .lnk3 { background-position: -39px -370px;width:43px; }

Michel Plungjan

Seems you should have enough info here - not sure what you want

<html>
  <head>
  <title></title>
 
<style>
#abc { width: 500px; height:300px; background-image: url(http://upload.wikimedia.org/wikipedia/commons/c/cb/Oranges_white_background.jpg); background-position: -400 -500px; }
</style>
<script>
window.onload=function() {
  if (document.getElementById('abc').currentStyle) {
    var x = document.getElementById('abc').currentStyle.backgroundPositionX;
    var y = document.getElementById('abc').currentStyle.backgroundPositionY;
    alert(x+' x '+y)
  }    
  else {
    var x = document.getElementById('abc').style.backgroundPosition;
    alert('FF'+x)
    document.getElementById('abc').style.backgroundPosition='left 200px'
  }
}  
 
</script>  
  </head>
  <body>
<br>
<br>
<br>
<br>
<div id="abc">Hello</div>
  </body>
</html>

Open in new window

dingir

ASKER

Hi, thank's for answer. I'm not sure what u ask.. I want Firefox to keep the already set X position and add the calculated Y position.. your sample still gave me no values in FF, but in IE..

Michel Plungjan

Ah

So you needed
document.getElementById('abc').style.backgroundPosition='top '+somevalue+'px'

but that does not work?

kadaba

hmmmm.. something like this perhaps...

unable to attach code tags sorry about that.. have a image close.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery BackGroundPosition Test</title>
<style type="text/css">
      body
      {
            background-color:#FFCC80;
            background-image:url(close.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
      }
      </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function()
{
      $("body").css({backgroundPosition: '200px 200px'}); // onload

      $("#btn").click(function () {
       alert("getting the position!");
var pox = $('body').css('backgroundPosition');
       var x="";
       if(pox=="undefined" || pox==undefined)
       {
                  alert("No Position Found!");
                  return;
       }
       else
       {
                    x = pox.split(" ");
                  alert("This is the x co-ordinate:"+x[0]);
                  alert("This is the y co-ordinate:"+x[1]);
                  alert("Setting.. new Y coordinate!");
                  $('body').css({backgroundPosition: '' + x[0] +' '+ ' 300px'});
                  alert("New Y coordinate set!");
       }
return true;
});

      $("#btn1").click(function () {
       alert("The back ground position is: "+$('body').css('backgroundPosition'));
       return true;
});

});
</script>

</head>
<body>
<input type="button" id="btn" value="Get and Set Image Position">
<input type="button" id="btn1" value="Get New Image Position">
</body>
</html>

kadaba

instead of doing this

#foot .lnk1 { background-position: -9px -370px;width:25px; }
..
#foot .lnk3 { background-position: -39px -370px;width:43px; }

try and set them on page load...

David S.

Why use JavaScript for this at all? Isn't it simpler to do it like this?

#foot a.lnk1 { background-position: -9px -370px;width:25px; }
..
#foot a.lnk3 { background-position: -39px -370px;width:43px; }
#foot a.lnk1:hover { background-position: -9px -430px; }
..
#foot a.lnk3:hover { background-position: -39px -430px; }

If you would prefer using JavaScript, two different approaches using jQuery come to mind.

@mplungjan The point is that he wants to only change the vertical position of the background image (and have a different horizontal position for each element, so he can't hardcode the horizontal offset in the JS code). What you suggested changes both. Have you never used CSS Sprites before?

dingir

ASKER

Kravimir, it is.. but if I have 20 icons that all have different backgrounds/hover backgrounds and 5000 visits/day. there will be different with few lines of javascript (that already exist because of a evaulate..

dingir

ASKER

Kravimir, sorry i was to hurried answer your question.. your right about pointing out my goal! I will, however in this case, take in mind using a hover.. this seems to take the javascript to a horrible level..

I can't understand, really, why var pos = $(this).css("width") can't be used inside the highlight/nolight function and attached to the x pos part of the backgroundPosition = "x y"; ..?

Michel Plungjan

@Kravimir: I have seen sprites and like the idea. I have never had a need for them, not liking excessive animations on any of my sites - the most animation ever is on my homepage in the menu which is pure CSS without images at all

kadaba

>> Why use JavaScript for this at all? Isn't it simpler to do it like this? If you would prefer using JavaScript, two different approaches using jQuery come to mind.

Absolutely, css is very much simple compared to what we are doing here.

1) Why I chose the option?
There is no way you will be getting a calculated value of back ground position of x or y or at least I believe so in FF.

Now what I have done is to set them on page load, by doing this we could get the positions of x and y.
>> The point is that he wants to only change the vertical position of the background image (and have a different horizontal position for each element

You are right on this, to use the background-position: "x px/%/em y px/%/em", you wont be able to change the Y. alone and you need to maintain the x as constant.
From where will you get the back ground position of x?

so If you set the x and the y positions on page load you will be able to get the x and you are free to set the y as you like.

I believe what I mentioned is correct. I might have missed a trick.

dingir

ASKER

One another approach..

If I set the hover position for every each of the image (i must because they have different width..).. can I use some sort of $("#foot").each(function() to loop through all objects :hover class in CSS? Then all this calculations is history..?

David S.

It turns out that the approach I was thinking of doesn't work in FF2 because it doesn't support getting the computed value of background-position. (The other approach I had thought of isn't useful here since you want to do this with minimal code.)

Something similar to what you just suggested might be the best way to do this. So the horizontal offset of the background image for the first link is "-9px"?

> if I have 20 icons that all have different backgrounds/hover backgrounds and 5000 visits/day.
> there will be different with few lines of javascript (that already exist because of a evaulate..

So you're already using jQuery for something else?

If you're really worried about file size then you should configure your server to use gzip for .css and .js files.

http://developer.yahoo.com/performance/rules.html#gzip

> I can't understand, really, why var pos = $(this).css("width") can't be used inside the
> highlight/nolight function and attached to the x pos part of the backgroundPosition = "x y"; ..?

It's because inside those functions the "this" keyword does not point to the element.

dingir

ASKER

Thank's a lot for answer. The gzip is already taked in mind and implemented in the iis7 environments. I understand, with your clear description, that I have two options here. 1 is to handle every image object in each own function and 2. Define all images with same width, so it could be calculated.

but..
on other hand..
I already know the width through css.. isn't that an idea to use and var int[] array to store all width values in?

David S.

There's another way that will allow them to have different widths. I'm on my way out the door, so I'll have to post it later.

dingir

ASKER

thank's,

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dingir

ASKER

Thank's a lot. I have now solved this with some jquery maniac and it works perfect. I will, however, accept your answer untested (for other later visitors to know).