Create Element in Firefox

[Sunny]

Hi,

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.create Element('"' +
countyVMLtext + '"');
I am adding a SVG shape to the page.

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position : absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visib le" version="1.1">< path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff " d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round "></path></svg>

Here is my Javascript:

var shps = document.getEle mentsByTagName( "svg");
lastshp = shps.length
shps2 = shps.item(0).pa rentNode
var resptext = req.responseTex t
countyVMLArray = resptext.split( "<svg")
for(var c=1; c!= countyVMLArray. length; ++c){
color = "#FFFFFF"

countyVMLtext = "<svg" + countyVMLArray[c]
alert(countyVML text);
county[c] = document.create Element('"' + countyVMLtext + '"');
shps2.appendChi ld(county[c]);
county[c].setAttribute(" fillcolor", "#FF8040");
}
lastshp = shps.length

*************** *************** *************** *************** *************** ****
I am loading this shapes from xml file. XML is loading properly. And
the code works in IE Fine but not in Firefox
Why?

[Martin Honnen]

Re: Create Element in Firefox

Sunny wrote:

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.create Element('"' +
countyVMLtext + '"');

createElement takes an element name and an element name is not allowed
to contain a double quote character ". So doing
document.create Element('"' + countyVMLtext + '"')
is nonsense as that will construct an element name as the argument to
createElement that starts and ends with a double quote.
Additionally, if you want to create SVG elements then you need the W3C
DOM Level 2 namespace aware method createElementNS e.g.
var svgEl = document.create ElementNS('http ://www.w3.org/2000/svg',
'svg');

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position : absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visib le" version="1.1">< path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff " d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round "></path></svg>

If you have a string with XML markup then you can't pass that to
createElement or createElementNS , instead with Firefox/Mozilla you need
to use DOMParser e.g.
var doc = new DOMParser().par seFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg', 'application/xml');

someElement.app endChild(someEl ement.ownerDocu ment.importNode (doc.documentEl ement,
true));
--

Martin Honnen

http://JavaScript.FAQTs.com/

[Sunny]

Re: Create Element in Firefox

On Oct 6, 10:02 am, Martin Honnen <mahotr...@yaho o.dewrote:

Sunny wrote:

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.create Element('"' +
countyVMLtext + '"');

>
createElement takes an element name and an element name is not allowed
to contain a double quote character ". So doing
document.create Element('"' + countyVMLtext + '"')
is nonsense as that will construct an element name as the argument to
createElement that starts and ends with a double quote.
Additionally, if you want to create SVG elements then you need the W3C
DOM Level 2 namespace aware method createElementNS e.g.
var svgEl = document.create ElementNS('http ://www.w3.org/2000/svg',
'svg');
>

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position : absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visib le" version="1.1">< path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff " d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round "></path></svg>

>
If you have a string with XML markup then you can't pass that to
createElement or createElementNS , instead with Firefox/Mozilla you need
to use DOMParser e.g.
var doc = new DOMParser().par seFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg', 'application/xml');
>
someElement.app endChild(someEl ement.ownerDocu ment.importNode (doc.documentEl ement,
true));
--
>
Martin Honnen
http://JavaScript.FAQTs.com/

Hi, I tried using document.create Element(countyV MLtext) &
document.create ElementNS('http ://www.w3.org/2000/svg',countyVMLt ext);

But still gives the error "String contains an invalid character" code:
"5"
And when I try:
var doc2 = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
shps2.appendChi ld(shps2.ownerD ocument.importN ode(doc2.docume ntElement,true) );

It dont give any error but it dont paint the shape too.
Please help.

[Martin Honnen]

Re: Create Element in Firefox

Sunny wrote:

Hi, I tried using document.create Element(countyV MLtext) &
document.create ElementNS('http ://www.w3.org/2000/svg',countyVMLt ext);

Well I gave you an example of an element name: 'svg'. I don't know what
countyXMLtext has as its value but you need to pass in an element name
like 'svg' or 'circle' and not markup.

And when I try:
var doc2 = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
shps2.appendChi ld(shps2.ownerD ocument.importN ode(doc2.docume ntElement,true) );
>
It dont give any error but it dont paint the shape too.

I gave you an example of a proper SVG fragment string too with the SVG
namespace being present:

var doc = new DOMParser().par seFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg>', 'application/xml');

document.body.a ppendChild(docu ment.body.owner Document.import Node(doc.docume ntElement,
true));

So make sure your markup that is supposed to be SVG has the proper
namespace, otherwise the XML parser will not recognize it as SVG and
will not build SVG DOM elements to be rendered as shapes.



--

Martin Honnen

http://JavaScript.FAQTs.com/

[Sunny]

Re: Create Element in Firefox

On Oct 6, 12:44 pm, Martin Honnen <mahotr...@yaho o.dewrote:

Sunny wrote:

Hi, I tried using document.create Element(countyV MLtext) &
document.create ElementNS('http ://www.w3.org/2000/svg',countyVMLt ext);

>
Well I gave you an example of an element name: 'svg'. I don't know what
countyXMLtext has as its value but you need to pass in an element name
like 'svg' or 'circle' and not markup.
>

And when I try:
var doc2 = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
shps2.appendChi ld(shps2.ownerD ocument.importN ode(doc2.docume ntElement,true) );

>

It dont give any error but it dont paint the shape too.

>
I gave you an example of a proper SVG fragment string too with the SVG
namespace being present:
>
var doc = new DOMParser().par seFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg>', 'application/xml');
>
document.body.a ppendChild(docu ment.body.owner Document.import Node(doc.docume ntElement,
true));
>
So make sure your markup that is supposed to be SVG has the proper
namespace, otherwise the XML parser will not recognize it as SVG and
will not build SVG DOM elements to be rendered as shapes.
>
--
>
Martin Honnen
http://JavaScript.FAQTs.com/

Hi Martin,

I am able to create the svg objects on the web page now.
Thanks for ur Help.
Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
countyVMLArray = resptext.split( "<svg")
for(var c=1; c!= countyVMLArray. length; ++c){
countyVMLtext = "<svg" + countyVMLArray[c]
county[c] = new
DOMParser().par seFromString(co untyVMLtext, 'application/xml');

shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t,true));
county[c].addEventListen er('click',test Click, false);
}
*************** ********
This creates the shape, But it does not attach the event to the svg
element.
What to do?
Thanks.

[Martin Honnen]

Re: Create Element in Firefox

Sunny wrote:

Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
countyVMLArray = resptext.split( "<svg")
for(var c=1; c!= countyVMLArray. length; ++c){
countyVMLtext = "<svg" + countyVMLArray[c]
county[c] = new
DOMParser().par seFromString(co untyVMLtext, 'application/xml');
>
shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t,true));
county[c].addEventListen er('click',test Click, false);
}
*************** ********
This creates the shape, But it does not attach the event to the svg
element.
What to do?

You are attaching the event listener to the result of parseFromString .
That is not the node that will be inserted as importNode creates a
clone. So try

var tempDoc = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
county[c] = shps2.ownerDocu ment.importNode (county[c].documentElemen t,true));
county[c].addEventListen er('click',test Click, false);
shps2.appendChi ld(county[c]);

Also depending on your markup you might not want to call
addEventListene r on county[c] but on child or descendant elements.




--

Martin Honnen

http://JavaScript.FAQTs.com/

[Sunny]

Re: Create Element in Firefox

On Oct 7, 7:05 am, Martin Honnen <mahotr...@yaho o.dewrote:

Sunny wrote:

Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
           countyVMLArray = resptext.split( "<svg")
                    for(var c=1; c!= countyVMLArray. length; ++c){
            countyVMLtext = "<svg" + countyVMLArray[c]
               county[c] = new
DOMParser().par seFromString(co untyVMLtext, 'application/xml');

>

shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t,true));
    county[c].addEventListen er('click',test Click, false);
 }
*************** ********
This creates the shape, But it does not attach the event to the svg
element.
What to do?

>
You are attaching the event listener to the result of parseFromString .
That is not the node that will be inserted as importNode creates a
clone. So try
>
var tempDoc = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
county[c] = shps2.ownerDocu ment.importNode (county[c].documentElemen t,true));
county[c].addEventListen er('click',test Click, false);
shps2.appendChi ld(county[c]);
>
Also depending on your markup you might not want to call
addEventListene r on county[c] but on child or descendant elements.
>
--
>
        Martin Honnen
       http://JavaScript.FAQTs.com/- Hide quoted text -
>
- Show quoted text -

Hi martin,
Thanks for ur help.
Now I can attach the events fine.
But still I dont have any luck with changing the opacity of the svg
shape dynamically.
Also, How can I refer a shape?
Like in IE, I can get the shape like:
window.event.sr cElement.value
In firefox, I tried,
window.event.ta rget.value
But its giving me an error:
window.event has no properties

Do you know Why, & How can I refer to that particular element.?

Thanks for all ur help.

[Martin Honnen]

Re: Create Element in Firefox

Sunny wrote:

In firefox, I tried,
window.event.ta rget.value
But its giving me an error:
window.event has no properties
>
Do you know Why, & How can I refer to that particular element.?

The function you pass to the addEventListene r method as the second
argument takes one argument, the event object e.g.
foo.addEventLis tener('click', myListener, false);
with
function myListener (evt) {
alert(evt.targe t.tagName);
}


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Sunny]

Re: Create Element in Firefox

On Oct 7, 10:03 am, Martin Honnen <mahotr...@yaho o.dewrote:

Sunny wrote:

In firefox, I tried,
window.event.ta rget.value
But its giving me an error:
window.event has no properties

>

Do you know Why, & How can I refer to that particular element.?

>
The function you pass to the addEventListene r method as the second
argument takes one argument, the event object e.g.
foo.addEventLis tener('click', myListener, false);
with
function myListener (evt) {
alert(evt.targe t.tagName);
}
>
--
>
Martin Honnen
http://JavaScript.FAQTs.com/

Thanks Martin,
I am able to get the value of that particular shape by using
this.value in function.
but how can i change the height of an element in firefox.
Like in IE this works fine
county[c].style.width = '2';
county[c].style.height = '2';

But the same thing is not working in Firefox.
I wonder why?
What to do?