JQuery trick while we wait for IE 9

17 Mar 10

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.

Add comment

JComments