Anthony McLin

JQuery trick while we wait for IE 9

I was just wrapping up a new website, when to my <sarcasm>big suprise</sarcasm> I found that it was broken in Internet Explorer 8. After doing various tricks to optimize and troubleshoot the code, I discovered that one feature in particular was working just fine in IE7, but was throwing javascript errors in IE8.

I'm utilizing the JQuery plugin MapHighlight to generate a fancy border/highlight effect on an interactive floorplan feature. It turns out, that in IE8, Microsoft removed support for a wildcard selector when creating VML objects. Luckily, this was a relatively easy fix, as someone already did the tough work for us.

Here's how to apply the fix yourself:

First of all, make sure you're using the uncompressed version of MapHilight, not the minified one.

On line 63 of jquery.maphilight.js, you'll find the following code:

document.createStyleSheet().addRule("v\\:*",
      "behavior: url(#default#VML); antialias: true;");

v\\:* is the offending wildcard that is no longer supported. Comment out this line, and replace it with this block instead:

var ss = document.createStyleSheet();
ss.addRule("v\\:shape", "behavior:url(#default#VML);
     display:inline-block; antialias:true");
ss.addRule("v\\:shape", "behavior:url(#default#VML);
     display:inline-block; antialias:true");
ss.addRule("v\\:group", "behavior:url(#default#VML);
     display:inline-block; antialias:true");
ss.addRule("v\\:polyline", "behavior:url(#default#VML);
     display:inline-block; antialias:true");
ss.addRule("v\\:stroke", "behavior:url(#default#VML);
    display:inline-block; antialias:true");
ss.addRule("v\\:fill", "behavior:url(#default#VML);
    display:inline-block; antialias:true");
ss.addRule("v\\:rect", "behavior:url(#default#VML);
    display:inline-block; antialias:true");
ss.addRule("v\\:oval", "behavior:url(#default#VML);
    display:inline-block; antialias:true");

It's a bit lengthier, and could be streamlined by using a foreach loop. But it gets the job done.

Needless to say, this is the kind of kludge that needs to wither up and die a quick painful death. I am so looking forward to real SVG support in IE9 as announced today. Although from the fine print in the FAQs, it looks like it may not run on Windows XP, so who knows how long it will be before we can rely on it being available to visitors.

Categories: 

Comments

Sweet, thanks for saving me the debug time!

Unfortunately MapHighlight doesn't work for me in IE9. This is my second port of call Googling for a solution.

not working in IE9 how to resolve this problem

- rizwan (not verified)

For those of you looking for IE9 support, it appears that MapHilight was updated in September 2011 to fix IE9 issues. I don't know if my example above is still necessary for IE8. I haven't tested the new release (1.2.2).

More info here:

http://lix.no/jquery-maphighlight-ie9/

- Anthony McLin

Add new comment