W
Walton
I am creating/modifying VML using javascript. I create a VML object
<polyline>. <polyline> has an attribute called "points".
i create the polyline like so:
var line = document.createElement('v
olyline');
i set the "points" attribute like so:
line.setAttribute('points','0,0,10,10,20,0');
now i check to see if setAttribute worked by doing a getAttribute (it
works)
alert(line.getAttribute('points'));
this returns:
0,0,10,10,20,0
once i attach the polyline to document, the trouble starts:
document.body.appendChild(line);
now i try to get getAttribute "points" again:
alert(line.getAttribute('points'))
this returns the string: [object]
interestingly enough:
alert(line.getAttribute('points').length)
this returns 3 (the amount of coordinate pairs)
indexing line.getAttribute('points') doesn't work:
i.e.
var pts = line.getAttribute('points');
alert(pts[0]); //doesn't work -- undefined
iterating through its properties doesn't reveal anything either:
for (var x in pts) { //never enters the loop
alert(x); //doesn't get here
} //never enters the loop
also- doing a setAttribute on points throws an error
line.setAttribute("points","0,0,10,10,20,20"); //Object doesn't
support this property or method
now- once i remove the polyline from the DOM i can get and set
attributes all i want now.
document.body.removeChild(line);
alert(line.getAttribute('points')); //returns "0,0,10,10,20,0"
so obviously some change is taking place to this node when it gets
attached to the DOM. one thing that comes to attention is that it is
not HTML. you must import the VML namespace for VML to work in IE
pages.
What i would like to know is:
what is that object i get when i do line.getAttribute("points"); when
line is attached to the DOM? it obviously has something in it if
line.getAttribute("points").length returns the amount of coordinate
pairs. i need to get to those values and modify them.
this example should show exactly what i'm running into (IE ONLY):
<html>
<head>
<title>nothing</title>
<!--[if IE]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
</style>
<![endif]-->
<script type="text/javascript">
function drawLine() {
var points = "0,0,10,10,20,0";
var line = document.createElement('volyline');
line .setAttribute('points',points); //set attributes
//before appending to DOM see if points attribute is set, it is
alert("before appending shape to DOM, shape's points are:\n" +
line.getAttribute('points'));
//append the polyline to the DOM
document.body.appendChild(line );
//get the points attribute - starts doing unexpected things
var pts = line .getAttribute('points');
alert("now after appending to DOM...")
//not a nice comma separated string anymore -> [object]
alert(pts);
//it has a length though. something is in here
alert("size of points: " + pts.length); // =3 coordinate pairs
//since it has a length, try indexing it:
alert("index the points. points[0]: " + pts[0]); //didn't work
either. undefined.
//find out what properties the [object] has
for (var x in pts) { //doesn't work
alert(x);
}
//that didn't work, maybe it's not the same as a javascript Object?
//remove line from the dom and check its points attribute again.
document.body.removeChild(line );
//it works again! ..almost, but not at least i can modify it.
alert("removing linefrom DOM and getAttribute points. looks
different: " + line .getAttribute('points'));
}
</script>
</head>
<body onload="drawLine()">
</body>
</html>
//disclaimer- i am aware of SVG and how much better it is.
thanks in advance,
john
<polyline>. <polyline> has an attribute called "points".
i create the polyline like so:
var line = document.createElement('v
olyline');i set the "points" attribute like so:
line.setAttribute('points','0,0,10,10,20,0');
now i check to see if setAttribute worked by doing a getAttribute (it
works)
alert(line.getAttribute('points'));
this returns:
0,0,10,10,20,0
once i attach the polyline to document, the trouble starts:
document.body.appendChild(line);
now i try to get getAttribute "points" again:
alert(line.getAttribute('points'))
this returns the string: [object]
interestingly enough:
alert(line.getAttribute('points').length)
this returns 3 (the amount of coordinate pairs)
indexing line.getAttribute('points') doesn't work:
i.e.
var pts = line.getAttribute('points');
alert(pts[0]); //doesn't work -- undefined
iterating through its properties doesn't reveal anything either:
for (var x in pts) { //never enters the loop
alert(x); //doesn't get here
} //never enters the loop
also- doing a setAttribute on points throws an error
line.setAttribute("points","0,0,10,10,20,20"); //Object doesn't
support this property or method
now- once i remove the polyline from the DOM i can get and set
attributes all i want now.
document.body.removeChild(line);
alert(line.getAttribute('points')); //returns "0,0,10,10,20,0"
so obviously some change is taking place to this node when it gets
attached to the DOM. one thing that comes to attention is that it is
not HTML. you must import the VML namespace for VML to work in IE
pages.
What i would like to know is:
what is that object i get when i do line.getAttribute("points"); when
line is attached to the DOM? it obviously has something in it if
line.getAttribute("points").length returns the amount of coordinate
pairs. i need to get to those values and modify them.
this example should show exactly what i'm running into (IE ONLY):
<html>
<head>
<title>nothing</title>
<!--[if IE]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
</style>
<![endif]-->
<script type="text/javascript">
function drawLine() {
var points = "0,0,10,10,20,0";
var line = document.createElement('v
olyline');line .setAttribute('points',points); //set attributes
//before appending to DOM see if points attribute is set, it is
alert("before appending shape to DOM, shape's points are:\n" +
line.getAttribute('points'));
//append the polyline to the DOM
document.body.appendChild(line );
//get the points attribute - starts doing unexpected things
var pts = line .getAttribute('points');
alert("now after appending to DOM...")
//not a nice comma separated string anymore -> [object]
alert(pts);
//it has a length though. something is in here
alert("size of points: " + pts.length); // =3 coordinate pairs
//since it has a length, try indexing it:
alert("index the points. points[0]: " + pts[0]); //didn't work
either. undefined.
//find out what properties the [object] has
for (var x in pts) { //doesn't work
alert(x);
}
//that didn't work, maybe it's not the same as a javascript Object?
//remove line from the dom and check its points attribute again.
document.body.removeChild(line );
//it works again! ..almost, but not at least i can modify it.
alert("removing linefrom DOM and getAttribute points. looks
different: " + line .getAttribute('points'));
}
</script>
</head>
<body onload="drawLine()">
</body>
</html>
//disclaimer- i am aware of SVG and how much better it is.
thanks in advance,
john