Search jQuery

jQuery Forum

Using jQuery

wyattstor..

css("background-position") not working in IE?

in Using jQuery • 10 years ago

I have been stumped by this for a few days now. I have the following simple test statement:

alert($(this).css("background-position"));

positioned in an each() loop. In Firefox, the correct value is returned as is specified in the stylesheet (the stylesheet reads "-1px top" and jQuery returns "-1px 0%" which is fine by me).

Precisely the same code yields an "undefined" value in IE 8.

Help?

EDIT: Wow. Even THIS test failed, even though the border shows up on the page.

$("#left-nav1").css("border", "1px solid blue"); alert($("#left-nav1").css("border"));

It still says "undefined". What is wrong with IE?

Replies(3)

wyattstor..

Re: css("background-position") not working in IE?

10 years ago

I experimented around, playing with random bits of code and realized a solution.

.css("border") returns an empty string in Firefox. Apparently, you have to use a specific property, not a shorthand property, to get a valid return value, i.e. "border-color" returns "blue".

The discrepancy is that, in IE, the background-position property can be split into "backgroundPositionX" and "backgroundPositionY". For future browser compatibility, I would recommend that jQuery automatically return a value that combines them. In the mean time, I hope anyone else with this problem comes across my solution.

wyattstor..

Re: css("background-position") not working in IE?

10 years ago

This code is untested, since my testing network server randomly shut itself off, but it should work--in theory.

$.fn.backgroundPosition = function()
{
if(arguments != null && arguments.length > 0)
{
if(typeof($(this).css("background-position")) != "undefined")
   $(this).css("background-position", arguments[0]);
else
   $(this).css("background-position-x", arguments[0].substr(0, arguments.indexOf(" ")-1))
          .css("background-position-y", arguments[0].substr(arguments.indexOf(" ")+1));
return $(this);
}
else
if(typeof($(this).css("background-position")) != "undefined")
   return $(this).css("background-position");
else
   return $(this).css("background-position-x")+" "+$(this).css("background-position-y");
};

$.fn.animateBGPos = function(pos, options)
{
$(this).animate({backgroundPositionX: pos.substr(0, pos.indexOf(" ")-1), backgroundPositionY: pos.substr(pos.indexOf(" ")+1)}, options);
};