graham.reeds graham.reeds - 3 months ago 6
jQuery Question

Fix for background-position in IE

I get this problem in IE7 when running a piece of code that uses jquery and 2 jquery plugins. The code works in FF3 and Chrome.

The full error is:

Line: 33
Char: 6
Error: bg is null or not an object
Code: 0
URL: http://localhost/index2.html


However line 33 is a blank line.

I am using 2 plugins: draggable and zoom. No matter what I do to the code it is always line 33 that is at fault. I check the source has update via view source but I feel this could be lying to me.

<body>
<div id="zoom" class="zoom"></div>
<div id="draggable" class="main_internal"><img src="tiles/mapSpain-smaller.jpg" alt=""></div>

<script type="text/javascript">
$(document).ready(function() {
$('#draggable').drag();
$('#zoom').zoom({target_div:"draggable", zoom_images:new Array('tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') });
});
</script>

</body>


Essentially what I am trying to do is recreate the Pragmatic Ajax map demo with jQuery.




It would appear that the second line of this snippet is causing the trouble:

bg = $(this).css('background-position');
if(bg.indexOf('%')>1){


It seems to be trying to select the background-position property of
#draggable
and not finding it? Manually adding a
background-position: 0 0;
didn't fix it. Any ideas on how to get around this problem?

I tried using the MS Script Debugger but that is nearly useless. Can't inspect variables or anything else.

Answer

A bit more digging about on the Interweb has revealed the answer: IE doesn't understand the selector background-position. It understands the non-standard background-position-x and background-position-y.

Currently hacking something together to workaround it.

Nice one, Redmond.