Combining Raphael and jQuery to achieve browser compatibility

Question

Having discovered that IE does not handle javascript onmouseout, I\'m determined to use jQuery instead so the cross-browser compatibility would be taken care of

Answer 1

You don't need to assign a class to it in order to expose it to jQuery. Certainly not. You can simply pass your DOM element to jQuery and it will do the magic for you...

$(st[0]).mouseout(function() {
  alert("That mouse is outta here!");
};

You are seeing the array syntax because that is generally how Javascript libraries maintain a reference to the original element (essentially just "wrapping" it and adding functionality). Pseudo-code explanation...

st == Raphael element
st[0] == DOM element

Answer 2

Note: That demo was made with an old version of Raphael. Now Raphael has its own custom event handlers including .mouseover() and .hover().

---

The short of it:

Simply wrap the DOM Object to make a jQuery Object out of it, or use the Raphael built in custom event handlers:

$(st[0]).mouseover( ... );            // This uses the jQuery .mouseover() method

Or, probably more convenient, and IE supported:

$(st[0]).hover( ... );                //     This uses the jQuery .hover() method

Or, using a Raphael built in event handler method:

st.mouseover( ... );                 // This uses the Raphael .mouseover() method
st.hover( ... );                     //     This uses the Raphael .hover() method

---

The long of it:

You can get the reference to the DOM object to work on using node or [0], since RaphaelObject[0] is always the reference to the DOM element:

aus.tas = R.path("...").attr(attr);

// aus.tas is a Raphael object
// aus.tas[0] is aus.tas.node is the reference to the DOM Object

$(aus.tas[0]).mouseover(function() {          // Could have also use aus.tas.node
    ...
});

// Raphael now has custom event handlers
aus.tas.mouseover(function() {
    ...
});
aus.tas.hover(function() {
    ...
}, function() {
    ...
});

So, with you function:

(function (st, state) {
      // st is a Raphael Object
      // st[0] is st.node is the reference to the DOM Object

      // This is now using jQuery for mouseover!
    $(st[0]).mouseover(function() {
        ...
    });
    ...
})(aus[state], state);

Additionally, I would suggest looking into the jQuery .hover() function, which does handle IE quite nicely:

(function (st, state) {
      // This is now using jQuery not Raphael for hover!
    $(st[0]).hover(function() {
        ... // the mouseenter function
    }, function() {
        ... // the mouseleave function
    });
    ...
})(aus[state], state);

As a simplified demonstration, here is how to bind mouseenter and mouseout using .hover() to a Raphael element (tested in IE 8):

​$(function() {
    var elie, paper = Raphael("canvas", 500, 500); 

      // Create Raphael element
    elie = paper.rect(0,0,100,100).attr("fill","#000");

      // Get reference to DOM object using .node and bind
      //     mouseover and mouseout to it:
    $(elie[0]).hover(function() {
        elie.attr("fill","#FFF");
    },function() {
        elie.attr("fill","#000");    
    });
});​

Try it out with this jsFiddle

Additionally, the Raphael .hover() method seem to work in IE too.

Answer 3

If you end up just copying the code that's used by the Australia demo, you'll run into IE trouble no matter which handler (hover, mouseover, etc) you use.

After banging my head on it for a while, it seems that the st.toFront() in the hover in/out functions cancel the "mouse out" event in IE. Delete those lines from the example code and you should be fine.

Answer 4

In my case, the actual problem was with calling the .toFront every freakin millisecond, because .hover(fooFunction, outFunction) calls fooFunction with every mouse cursor shift. Actually, the name quite suggests that it's a hover call, not a mouseenter :)

So, the trick is to make sure your fooFunction, or the contents of it, is only executed once (onmouseenter). Even in IE this works perfectly for me, without accessing any DOM nodes or trying to access other stuff which I don't want to touch:

var MouseEventHelper = {
    hover: function (el, funcIn, funcOut) {
        var entered = false;

        el.hover(
            function (e) {
                if (entered) {
                    return;
                }

                funcIn(e);
                entered = true;
            },
            function (e) {
                funcOut(e);
                entered = false;
            }
        );
    }
}

Then replace your hover calls like this:

var el = paper.rect(...);
MouseEventHelper.hover(
    el, 
    function (e) { 
        // do whatever you want!
        el.toFront();
    }
    function (e) { }
);

Answer 5

This is a bit of javascript trickery, st is passed in. Look at the JS code in the australia example.

(function (st, state) {
                    .. some code referring to st[0] in here .. 
                })(aus[state], state);

So st[0] in this code refers to the path DOM node from aus[state].

Try it yourself with this simple example in a Firebug console:

(function(a,b) {alert(a); })("hello", "b");

hth