Nasty Habit


Internet Explorer background-position css value with jQuery is broke?
October 8, 2008, 4:57 pm
Filed under: Programming | Tags: , , ,

Ok, so finally the medixbox menus are coming together, they slide up, slide down, show the right state and all the other nitty gritty associated with prettiness. Quick launch IE tester. KAbbooom!!!(‘background-position’) is undefined” or some other useful crap is spouted forth.

Now I am in love with JQuery, like everyone else. I’ve had my fair share of JavaScript woes over the years and using JQuery is like putting lipstick on a pig and actually looking nice.

Several coffees and expletives later it turns out Internet Explorer  in all its reincarnations doesn’t seem to know what “background-position” is and instead retrieves its own “background-position-x” and “background-position-y” css rule. That’s all very nice and good but it means my code now has to have this:

function determine_x_pos(obj){
//parameter obj is something like $('#my-div')
    var pos = $(obj).css("background-position");
    if (pos == 'undefined' || pos == null) {
        pos = $(obj).css("background-position-x"); //die in hell
    } else {
        pos = pos.split(" ")[0];
    }
    return pos  || 0; //yes returning a 0 on fail  is bad but its for demo!
}

In true NastyHabit fashion, the code is shit. Nevertheless, it works a treat!

The paranoid guy in me believes this cursed issue only afflicts me. Please check if you too have been burdened by the beast of redmond and help a fellow man feel less picked on by the curse of IE.


16 Comments so far
Leave a comment

I’ve been bitten by this too and I’ve only been learning jQuery for a few days. Did you ever get a satisfactory fix? IMO this is something that a) should be fixed by the browser manufacturer and b) until then abstracted away in a framework. Still not fixed in IE8 either…

Comment by grahamr

hi grahamr,

i agree. i think this should be handled by jquery….
they might have reasons though…

lets see

Comment by Christof Haemmerle

[...] is a whole raft of information on the Net about this very issue and I’ve ran into it after a couple of weeks but amazingly no one has offered a [...]

Pingback by graham.reeds/ » So where is the background?

hi there,

i had more success with this:

if ($(this).css(‘background-position-x’)) {
var pos = parseInt($(this).css(‘background-position-x’).split(‘ ‘)[0]);
} else {
var pos = parseInt($(this).css(‘background-position’).split(‘ ‘)[0]);
};

Comment by Christof Haemmerle

Awesome! Thanks for posting your solution.

Comment by Matthew Booth

Thanks for the help =)

Comment by Krtistoffer

hi, I elaborated a bit on Christof’s solution and came up with this:

$.fn.bgx = function(x){
if(null == x){
if ($(this).css('background-position-x')) {
return $(this).css('background-position-x');
} else {
return $(this).css('background-position').split(' ')[0];
};
}else{
y = $(this).bgy();
$(this).css('background-position', x+' '+y);
return $(this);
}
};
$.fn.bgy = function(y){
if(null == y){
if ($(this).css('background-position-y')) {
return $(this).css('background-position-y');
} else {
return $(this).css('background-position').split(' ')[1];
};
}else{
x = $(this).bgx();
$(this).css('background-position', x+' '+y);
return $(this);
}
};

it’s a small plugin for jquery, whichh lets you set and read background x or y position without worrying about IE. also it makes setting only x or only y easier (you don’t have to porduce the complete string for background-position, only the coordinate you want to change). also it supports chaining and % based values. so you can call it like this:

$('#someElement').bgy('100px');

or chain like this (and use/mix % based values):

$('#someElement').bgx('100px').bgy('20%');

Comment by olo

Hi Christof thanks for that looks like a much simpler solution. I see its 2009 and we’re still talking about this issue!

Comment by The Man

Thanks for this information!
But its really weird that I can change the “background-position” without the “-x”?!
$(this).css(“background-position”, “-50px 200px”); works great.

Nice IE…

Comment by Matthias

Oh, no ! Another working half-day lost because of IE :(
After dealing with CSS IE variations, i thought javascript part would be less a nightmare. Fortunately IE8 has a nice built-in debugging tool, but still…

Comment by Milouse

Unlucky Milhouse. Like every cloud, your discovery of the IE8 debugging tool was your silver lining. However I struggle to use the IE8 development tool considering how advanced firebug is. Everything else feels too clunky including Opera’s dragonfly and even the chrome/safari debugging tool. I suppose old habits die hard :)

Comment by The Man

wow, also a half day for me. thx!
and it’s from 2008… arg. hate myself, hate ie!

same feelings about the ie8-debugging tool.

Comment by hannes

it’s a freakin’ jquery bug in 1.4.4/1.4.3
version 1.4.2 works fine… weird.

http://bugs.jquery.com/ticket/7681

Comment by hannes

Thank you thank you! I was wondering what the heck was going on with that css background-position selector in IE for jQuery! (Only took me 30 mins over half a day – thankfully)

Comment by myst movie

omg it strikes me too XD
thank you!

Comment by Artem Dudkin

Thanks, I had the same problem and this idea helped me. Actually I had to test like this instead of checking undefined:

if (!pos) {
// IE8 shit
} else {
// proper stuff
}

Comment by Spede




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s



Follow

Get every new post delivered to your Inbox.