Filed under: Programming | Tags: css, internet explorer, javascript, jquery
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 February 28, 2009 @ 1:12 amhi grahamr,
i agree. i think this should be handled by jquery….
they might have reasons though…
lets see
Comment by Christof Haemmerle June 16, 2009 @ 7:04 pm[...] 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? February 28, 2009 @ 1:40 amhi there,
i had more success with this:
if ($(this).css(‘background-position-x’)) {
Comment by Christof Haemmerle June 15, 2009 @ 7:45 pmvar pos = parseInt($(this).css(‘background-position-x’).split(‘ ‘)[0]);
} else {
var pos = parseInt($(this).css(‘background-position’).split(‘ ‘)[0]);
};
Awesome! Thanks for posting your solution.
Comment by Matthew Booth May 11, 2010 @ 12:39 amThanks for the help =)
Comment by Krtistoffer May 11, 2011 @ 3:40 pmhi, I elaborated a bit on Christof’s solution and came up with this:
Comment by olo June 1, 2011 @ 11:38 pm$.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%');
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 June 16, 2009 @ 6:17 pmThanks 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 December 9, 2009 @ 2:06 pmOh, no ! Another working half-day lost because of IE
Comment by Milouse March 5, 2010 @ 4:51 pmAfter 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…
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 April 20, 2010 @ 12:06 amwow, 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 December 17, 2010 @ 3:31 pmit’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 December 17, 2010 @ 4:19 pmThank 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 February 2, 2011 @ 5:39 amomg it strikes me too XD
Comment by Artem Dudkin April 11, 2011 @ 4:20 pmthank you!
Thanks, I had the same problem and this idea helped me. Actually I had to test like this instead of checking undefined:
if (!pos) {
Comment by Spede August 31, 2011 @ 10:45 am// IE8 shit
} else {
// proper stuff
}