How do I apply CSS styles to Raphael.js objects using jQuery?


Tags: jquery,css,raphael

Problem :

Does anybody have any experience with the Raphael.js SVG library?

I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by css.

var R = Array();  
    R[1] = new Raphael("level1", 408, 286);  
    R[2] = new Raphael("level2", 408, 286);  
    R[3] = new Raphael("level3", 408, 286);  
    R[4] = new Raphael("level4", 408, 286);  
    R[5] = new Raphael("level5", 408, 286);  

var attr = {  
    fill: "#ccc",  
    stroke: "#000",  
    "stroke-width": 0.5,  
    "stroke-linecap": "square",  
    "stroke-linejoin": "miter"  
};  

// loop through a bunch of objects (not shown for brevity)
    // in the end, I end up with a couple hundred objects drawn by Raphael  

    var o = R[fID].path(coordstring).attr(attr);  

    // creates an #o[ID] id value that jQuery can target 
    o.node.id = "o"+$(this).attr('id'); // id value comes from data source  

    o.click(function(){  
        highlightMapObject(this.node.id.substr(1));                             
    );  

// end loop  

// accessed from the o.click and from outside in jQuery
function highlightMapObject(oid){  
    var $target = $("#o"+oid);  
    $target.addClass('highlight');  
}  

The issue I seem to be running into is that trying to add a class to the Raphael object doesn't work, or if it is working, the CSS attributes of that class (like changed background colors, etc) aren't being applied.

So if my .highlight class is:

.highlight { background-color: #f00; }

That is either not being applied, or isn't overwriting the fill:"ccc" from the original Raphael attrs. My guess is that because the ID being targeted by jQuery is on the Raphael object NODE rather than the object itself, that's probably part of the problem.

I've seen lots of advice to avoid node altogether when dealing with Raphael, but it seems to be the only way I've found to open a Raphael object up to outside targeting (in this case via jQuery).

I don't have to use CSS to achieve the style change on these objects, but I do have to be able to achieve that change externally (via jQuery - in response to external highlight requests, etc) rather than all internally (via Raphael and only in response to object clicks).

Ideas?

Thanks!



Solution :

I am not exactly sure what you code is doing, but if you want to get a jQuery object out of a Raphael object then do this:

var $jQueryObject = $(raphaelObject.node);

From there you can use jQuery to add a class:

$jQueryObject.addClass('highlight');

    CSS Howto..

    css hover image and show icon not show

    How do I change the placeholder like as the elements replace each other place?

    How can i Convert left vertical menu to right?

    How to apply CSS locally on any online page?

    CSS selectors: how to make element hovering change wrapper's style

    How to change the height of div with the content of other div

    How to create an highlight animation when a control gets focused [closed]

    How to make more divs appear when hovering over one div?

    How to use CSS media query to scale background-image to viewing window

    How to create a horse-shoe-like gauge using CSS

    Using CSS to show/hide content. How do I make hide the default

    How to create desktop widgets [closed]

    How to attach a div to a particular dimension in html

    How to same element with unique XPath/CSS selector by both ID and Class?

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    How to get the bottom border to stretch fully across a page in CSS

    How to control dojo widget classes, or how to get fine-grained control of style

    how do i prevent respond.js reading my retina display media query?

    How do I create CSS only tabs/pages with #hash URLs?

    How to keep Fixed position navigation static positioned when resizing window

    How can I make responsive JQuery left margin?

    How to use position in CSS?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to display items side by side until window width then in next row

    How do I set the table row heights to minimum except last row?

    Big Cartel - Slideshow Questions

    How to make a gallery

    How do I make my React Components to be responsive via css media queries?

    How to do this kind of Button in CSS?