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 = ScaleRaphael("test", 500, 500);

  var c = paper.circle(50, 50, 40);

  c.node.setAttribute('class','bluecircle');

  $('.bluecircle').attr({fill: 'blue'});

But in Internet Explorer (IE8, which uses VML instead of SVG) nothing is shown.

Basically what I'm trying to do is to give each object a class, so I can use Jquery selectors to manipulate all objects at once that have a certain class...

Does anybody know a way how to do this, that also works in IE ?

Ununa

I'm working on this problem too, but only very recently, and I haven't gotten any further than you. The underlying question: does IE expose any method to get VML objects by class name? – Revolutionary

Answer 1

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'});
    }
  }
});

Revolutionary

I've not checked if the implementation of sets has changed in V2.0. So will this still work? – Radii

Answer 2

I'd try

c.node.className = 'bluecircle';

Prefigure

Nope. There are other threads that suggest it and my preliminary tests indicate these people are just wrong :( – Revolutionary