Quote:
Originally Posted by hemi
it is working fine but whn i insert another div that one is not working
that mean
<body onload="initObj()">
<div id="holder" onclick="cw = setTimeout('rotateClockwise()',interval);" onchange="ccw = setTimeout('rotateCounterClockwise()',interval);">
<span>hema </span>
</div>
<div id="holder" onclick="cw = setTimeout('rotateClockwise()',interval);" onchange="ccw = setTimeout('rotateCounterClockwise()',interval);">
<span>chandra</span>
</div>
the second div is not working |
The way you have it setup, each object must have it's own canvas.
And each canvas must be defined separately.
The div's that are used as the canvases must have their own id's.
You can not assign the same id to different elements.
Each element must have a unique id.
You can also use one canvas with multiple objects and each object on the canvas can be manipulated separately.
Here is an example of two objects using separate canvases.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script>
var rot1=0;
var rot2=0;
var degrees=90;
var speed=3;
var interval=10;
var txt1,txt2,R,cw1,cw2,ccw1,ccw2,obj;
function initObj()
{
var container1 = document.getElementById("holder1");
var text1 = container1.getElementsByTagName("span")[0];
var attr1 = {font: '24px Fontin-Sans, Arial', opacity: 1};
R1 = Raphael("holder1", 225, 225);
txt1 = R1.text(110, 110, text1.innerHTML).attr(attr1).attr({fill: "#f0f"});
text1.style.visibility = "hidden";
var container2 = document.getElementById("holder2");
var text2 = container2.getElementsByTagName("span")[0];
var attr2 = {font: '24px Fontin-Sans, Arial', opacity: 1};
R2 = Raphael("holder2", 225, 225);
txt2 = R2.text(110, 110, text2.innerHTML).attr(attr2).attr({fill: "#f0f"});
text2.style.visibility = "hidden";
}
function rotateClockwise(obj)
{
if(obj==1)
{
if(ccw1){clearTimeout(ccw1);}
if(rot1<degrees)
{
rot1+=speed;
txt1.rotate(rot1, true);
R1.safari();
cw1 = setTimeout("rotateClockwise(1)",interval);
}
}
if(obj==2)
{
if(ccw2){clearTimeout(ccw2);}
if(rot2<degrees)
{
rot2+=speed;
txt2.rotate(rot2, true);
R2.safari();
cw2 = setTimeout("rotateClockwise(2)",interval);
}
}
}
function rotateCounterClockwise(obj)
{
if(obj==1)
{
if(cw1){clearTimeout(cw1);}
if(rot1>0)
{
rot1-=speed;
txt1.rotate(rot1, true);
R1.safari();
ccw1 = setTimeout("rotateCounterClockwise(1)",interval);
}
}
if(obj==2)
{
if(cw2){clearTimeout(cw2);}
if(rot2>0)
{
rot2-=speed;
txt2.rotate(rot2, true);
R2.safari();
ccw2 = setTimeout("rotateCounterClockwise(2)",interval);
}
}
}
</script>
</head>
<body onload="initObj()">
<div id="holder1" onclick="cw1 = setTimeout('rotateClockwise(1)',interval);" onchange="ccw1 = setTimeout('rotateCounterClockwise(1)',interval);">
<span>hema </span>
</div>
<div id="holder2" onclick="cw2 = setTimeout('rotateClockwise(2)',interval);" onchange="ccw2 = setTimeout('rotateCounterClockwise(2)',interval);">
<span>chandra</span>
</div>
</body>
</html>
I am not sure how you are going to use the onchange event listener.
But if you read the documentation you will see that you can assign events to each object separately.
I do not know all the different ways you can use the Raphael library,
because I have not used it myself.
I just happened upon the Raphael library when I was trying to help you.
It took me a little while to figure out how to set it up to make this program work.
So you are going to have to study it and play around with it yourself.
I am not going to hold your hand and do all the learning and programming for you.
There are plenty examples on the Raphael website that you can learn from.