ansaurus

Question

Answer 1

+2 A:

You may want to check to make sure that you are loading your js files in the correct order so that any dependencies are taken into account.

jonstjohn 2009-02-27 14:05:40

jquery followed by draggable and then zoom.

graham.reeds 2009-02-27 14:16:29

Debugging is such a hassle in IE. Try isolating it by only loading one of the two js files (of draggable and zoom). You may need to do some alerting to really isolate it :(

jonstjohn 2009-02-27 14:37:28

Answer 2

+1 A:

However line 33 is a blank line.

It'll be line 33 of one of your .js files, not line 33 of the HTML itself. IE fails to report which actual file the error was in. Look at line 33 of each .js for something about ‘bg’; if the worst comes to the worst you can start inserting newlines at the start of each .js and see whether the line number changes.

I check the source has update via view source but I feel this could be lying to me.

View source will always show you what IE got from the server. It won't show any updates to the DOM.

bobince 2009-02-27 14:48:23

bg is referenced in draggable.js but it isn't on line 33. It is on 34,35,39,40, and 41. I guess I will start looking there. Pity IE doesn't have a FireBug plugin:-(

graham.reeds 2009-02-27 15:05:00

It'll be 34 then — IE's method of counting line numbers is generally off-by-one compared to text editors. There *are* JS debuggers for IE, for example you get one with the IE8 beta.

bobince 2009-02-27 15:24:37

I've found the line numbers referenced by IE are utterly useless. I've never seen it anywhere close to where the problem is in the code.

Herms 2009-02-27 16:53:24

Answer 3

A:

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.

graham.reeds 2009-02-27 15:57:51

Answer 4

+4 A:

A bit more digging about on teh 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.

graham.reeds 2009-02-27 16:51:52

Good catch. In general the ‘shortcut’ aggregated CSS properties like ‘background’ don't work using element.currentStyle (which is how jQuery calculates current styles on IE). ‘background-position’ shouldn't be a shortcut property in general, but IE's separate X/Y extension effectively makes it one.

bobince 2009-02-27 17:08:44

I'm not really sure what the code's actually trying to do though — it would match the string ‘0% 0%’ but not ‘1% 100px’ or many other possible values. Looks like dodgy, fragile code to me...

bobince 2009-02-27 17:12:37

Okay. I will modify it so it is more robust. I've installed IE8 so I can debug easier.

graham.reeds 2009-02-27 17:26:53

Answer 5

A:

try backgroundPosition istead

Also, make sure that 'this' exists and that your request for an attribute returns a value. IE will throw this kind of errors when you try to call a method on a property that does not exist, therefore bg is null or null an object. if you dont care about IE you can do bg = $(this)... || '' so that theres always something referenced.

Also, unrelated to the error you're getting, but is your index value of 1 correct? Did you mean -1 ?

2009-02-27 22:06:05

The smallest value you can have is 0% - so the smallest index of the percentage symbol will be 1. Bobince has pointed out that that code is fragile, and reading around the web means I will have to rewrite it.Personally I thought jQuery was supposed to normalise this across browsers?!

graham.reeds 2009-02-27 23:49:53

Answer 6

+1 A:

I would recommend downloading Visual Studio Express for the JS debugger that comes with it. It's leaps and bounds ahead of the trash "MS Script Debugger" that you can download separately.

http://www.microsoft.com/exPress/download/ Get the Web Developer Edition.

wambotron 2009-02-27 22:28:02

Answer 7

+1 A:

A bit of thinking (and a cup of tea) later I came up with:

if(bg == 'undefined' || bg == null){
 bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y');
}

Unfortunately it returns center center despite the online resources I can find state it should return 0 0 if the values are undefined.

Beginning to wonder if there is an actual fix/workaround to this. A lot of people have tried and all so far fail to catch all edge cases.

The camelCase version of backgroundPosition seems viable but I don't know enough of jQuery to make an accurate assessment of how to go about it - from what I have read you can only use camelCase as getters if the property has been set previously. Please tell me if I am mistaken.

graham.reeds 2009-02-27 23:45:55

Answer 8

+1 A:

This worked for me:

    if (navigator.appName=='Microsoft Internet Explorer')
   {
    bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY');
   }
   else
   {
    bg = $(drag_div).css('background-position');
   }

hope it does for you.

Pete 2010-02-25 01:05:05

In the end the lack of MSIE compliance and converting SVG to JPEG in PHP forced me away from the background image trick and I now use Raphael and jQuery. The bonus is that it works in IE6 too!

graham.reeds 2010-02-25 08:57:12

ansaurus

tags:

views:

answers:

Fix for background-position in IE

related questions