Raphael JS: how to use jQuery selectors on objects in IE?

Question

I\'m trying to use Raphael JS, but jQuery selectors don\'t seem to work with Raphael JS in IE8.

In Chrome and Firefox this works:

  var paper = Sca         


        

Answer 1

I'd try

c.node.className = 'bluecircle';

Answer 2

This is not exactly the same as using classes to address a group of objects, but I wrote a patch against Raphael to allow for named sets. Simply invoke with paper.set('uniqueID', element1, element2, ...). Elements contain a groups array with each group they've been assigned to, and the top Raphael paper object has a groups dictionary keyed by the 'uniqueID'.

The following test code shows how you can apply a hover handler to a named set, and use the hover callback to turn all the members of the group black on hover:

var marker1 = paper.circle(50, 20, 10).attr({'fill' : '#ff0000'});
var marker2 = paper.circle(100, 20, 10).attr({'fill' : '#ff0000'});
var marker3 = paper.circle(150, 20, 10).attr({'fill' : '#ff0000'});
var marker4 = paper.circle(200, 20, 10).attr({'fill' : '#ff0000'});

var s = paper.set('setID', marker1, marker2);
s.push(marker3, marker4);
s.pop();

// If marker 1, 2, or 3 is hovered, act on whole group
s.hover(function() {
  for (var i = 0, ii = this.groups.length; i < ii; ++i) {
    var set = this.paper.groups[this.groups[i]];
    for (var j = 0, jj = set.items.length; j < jj; ++j) {
      set.items[j].attr({'fill' : '#000000'});
    }
  }
});