Still getting the hang of Javascript, so please be patient...
I've set up two fiddles for comparison. The only variation between them is that one has a text object as a title while the other doesn't. Surprisingly, this tiny detail completely alters the behavior when hovering over the circle objects.
My goal is to replicate the functionality of the second fiddle, even when there's a title like in the first fiddle.
I'm struggling to understand how to extract my function from the loop to prevent JSHint from throwing errors at me... It seems like my confusion surrounding closure, binding, and similar concepts might be causing this issue.
Fiddle 1 with title, strange mouseover behavior
Fiddle 2 no title, normal mouseover interaction
//Code for Fiddle 1: the same code except the part indicated is excluded in Fiddle 2
var rsr = Raphael("holder", '1160', '1400');
// this next section will be removed in the second fiddle
rsr.text(220, 50, 'Title').attr({
'font-size': 32,
'text-anchor': 'middle'
});
// end of exclusion in Fiddle 2
var cir = []; // an array to hold circles
var xco = [206, 144.9, 317.4, 317.5]; // x coordinates of circle centers
var yco = [167.7, 231.8, 191.4, 256.8]; // y coordinates of circle centers
var rd = [25.5, 46, 34, 18.5]; // radii of circles
var circcolr = ['#939dac', '#000000', '#ecea5a', '#0da9f2']; // fill colors of circles
for (var i = 0; i < 4; i++) {
cir[i] = rsr.circle(xco[i], yco[i], rd[i]);
cir[i].attr({
fill: circcolr[i],
'fill-opacity': 1,
stroke: 'none'
});
}
for (var i in cir) {
(function (st) {
console.log(st.id);
st.node.onmouseover = function () {
st.animate({
r: rd[st.id] * 1.2
}, 200);
};
st.node.onmouseout = function () {
st.animate({
r: rd[st.id]
}, 100);
};
})(cir[i]);
}