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..

    How to remove floats so items don't wrap with CSS only in this Codepen

    How to change padding using php in options framework

    How can I click a specific li without an id or class?

    How to set the style of the message in an SWT Text field?

    CSS? How is this arrow made?

    How to override css for giving background image?

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How do I specify that a html cell should have the minimum width it needs to display all of its content

    How to achieve this bevel button in CSS?

    How do I make a Javascript alert display only once, ever? [closed]

    How to keep an unordered list centered within the screen?

    How can I prevent my button from being mangled?

    How do I make my elements occupy the width of their “max-width” specification?

    How to center my hmenu (no matter the resolution)?

    CSS how to center ::after pseudo elem

    text-rendering in css, what is it? and how to use it?

    How to find dependand JS and CSS

    How does Grails process static files without resources plugin?

    How to set overflow content to go underneath instead of fitting in one row

    How to make display:flex work for responsiveness - Bootstrap?

    How to simulate multiple
    tag with CSS

    Only Lower Half Of The Border Is Shown

    How to make a resizable menu centered on the middle?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    Show/Hide Html TR/TD

    How to make value text in form be italic

    How to apply a CSS class to all instances of a control in ASP.NET

    CSS: How to make a block to cover all width of parent block

    how to style a horizontal submenu with nested