CODEWITHSUNDEEP
jqueryraphael
JDev
JDev

Reputation: 347

How to retrieve Raphael object id on the click /hover when objects are stored in an array

var shapes = new Array();
var kx=50,ky=150;
var RecWidth=120;
var RecHeight=85;
var RecRadius=10;

r = Raphael(10,10, '60%', '100%');

for (var i=0; i<= 10; i++) {

 shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);

 shapes[i].id="keylist"+i ;

 kx=kx+50;

 ky=ky+150;

}

above code will generate 10 Raphael rect on the page with different id's. Now i want to retrieve the id i.e keylist on the mouse click or hover event,so that based on the Keylist i want to show a popup with more information related to this key list.

my problem is that i don't know how to retrieve Raphael object id on the click /hover when objects are stored in an array like here array is Shapes ?.

Upvotes: 0

Views: 2108

Answers (1)

Robar
Robar

Reputation: 1971

If I understand your problem correctly, you could define a click or hover event handler like this:

for (var i=0; i<= 10; i++) {    
 shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);    
 shapes[i].id="keylist"+i;
 shapes[i].click(handleClick);
 shapes[i].hover(handleHoverIn, handleHoverOut);
 kx=kx+50;    
 ky=ky+150;    
}

function handleClick() {
    var id = this.id; // get your id
    // do something with your id    

}

// mouse enters the rectangle
function handleHoverIn() {
    var id = this.id; // get your id
    // do something with your id    

}

// mouse leaves the rectangle
function handleHoverOut() {
    var id = this.id; // get your id
    // do something with your id    

}

UPDATE:

Maybe this jsFiddle will help.

Upvotes: 1

Related Questions