Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery CSS bug in IE8

I have a bug in IE8 when trying to get a property from css for an element with background image.

el.css({ 'background-position': "10px 10px"}); //set some 
alert(el.css("background-position")); //get the value

In Opera, FF, Chrome, Safari works I get "10px 10px". Not in IE8 where I get undefined. I opened a bug report, but until then what do you think it will be a good workaround this problem. How should I get this values in some another way?

like image 665
Elzo Valugi Avatar asked Sep 14 '09 11:09

Elzo Valugi


4 Answers

this should help.

it links to jquery ticket 2462 which is also interesting

Edit first link dead, wayback machine to the rescue.

And, just in case archive.org ever packs up, here is the contents of the dextrose blog post.

jQuery (at least up till version 1.2.6) has a problem with Internet Explorer when asking the background-position of an object.

$('h1:first').css('background-position');

In the other A-grade browsers, you get 2 values (in px or %) representing respectively the x-position and y-position of the element. In Internet Explorer (6 and 7) you get undefined. The problem is that IE doesn't know what background-position is, it only knows 2 other calls: background-position-x and background-position-y. Here is a slice of JavaScript code to handle this problem.

(function($) {
  jQuery.fn.backgroundPosition = function() {
    var p = $(this).css('background-position');
    if(typeof(p) === 'undefined') 
        return $(this).css('background-position-x') 
               + ' ' + $(this).css('background-position-y');
    else return p;
  };
})(jQuery);

You can now use this jQuery plugin to get the background-position of an element:

$('h1:first').backgroundPosition();
like image 121
Dan F Avatar answered Nov 10 '22 08:11

Dan F


I've never tried this but i found that by requesting the positions individually u get a result, so:

alert(el.css("background-position-y")); //get the y value
alert(el.css("background-position-x")); //get the x value

then you can combine the two :)

like image 35
Wayne Austin Avatar answered Nov 10 '22 06:11

Wayne Austin


If you alert the background-property, then you'd also get the position. A very bad workaround, but the first I could think of...

alert(el.css("background")); //url(some/url/to/image.jpg) no-repeat 10px 10px

And then you'd have to just get out the numerical values that are followed by "px"

like image 37
peirix Avatar answered Nov 10 '22 08:11

peirix


I will finally parse them from:

alert(el.attr('style')); // this seems to work in all browsers
like image 1
Elzo Valugi Avatar answered Nov 10 '22 07:11

Elzo Valugi