Question

I am trying to get some mouse event management to work in IE using Raphael.

But I am getting an error ‘Raphael’ is undefined in Internet Explorer 9 even though it works well in other browsers, like Chrome.

Here is the jsfiddle and the code:

<div id="sample"></div>
<div id="status"></div>



var width = 400;
var height = 200;
var paper = Raphael(document.getElementById('sample'), 0, 0, width, height);

var rect = paper.rect(0, 0, width, height);
rect.attr({
    stroke: "#888",
    fill: "#eaeaea"
});



var circle = paper.circle(50, 60, 20);
    circle.attr({
        fill: "#f90"
    });

$(circle.node).mouseenter(function(e){
        $('#status').html('Entered circle');
    });
$(circle.node).mouseleave(function(e){
        $('#status').html('left circle');
    });

It is using this version of the library: https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js​

Can you assist in identifying why is not working in IE?

Thanksk

Answer 1

The problem is with the default hosting on github, see Issue 173

The fix is to change your Manage Resource link from the one linked to on raphaeljs.com that points to http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js to the one hosted on cdnjs.com – http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js.