Hi! I am trying to make Prototype work in a mixed XHTML/SVG DOM (see Code below). The page renders perfectly in Firefox 2.0.0.13 except for the 2nd link-Element that was added dynamically using Prototype''s Element class. Although the element seems to be okay when being investigated with Firebug, it is not clickable: The text inside the link is rendered as standard text and when the mouse cursor enters, nothing happens. Same for clicking. The first link that is present in the DOM from the beginning however works normal. Is this because we are in an XML DOM rather than in an HTML DOM? Any ideas how to fix this? (Solutions involving <embed> or <object> to render the SVG part are obvious but not very attractive for this test) Furthermore I don''t care about IE compatibility right now. BTW: I tried to add the link''s text content using method update(). This doesn''t work, because this method is not present on the link element! It is present though, if i change the file extension from .xml to .html, but then of course, the SVG circle is not rendered. For your convenience, the code below is online at http://game.lagomorph.de/test.xml Please help! Thanks, Jan <?xml version="1.0" encoding="UTF-8"?> <!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" xmlns:svg="http:// www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="prototype-1.5.2_pre0.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript" language="JavaScript"> <![CDATA[ function addLink() { var link = new Element(''a'', { href: ''/test''}); link.textContent = "link2"; $(''container'').insert(link); } ]]> </script> </head> <body onload="addLink()"> <h1>XHTML/SVG/Prototype test</h1> <div id="container"> <svg:svg id="svg_unit_palette" version="1.1" baseProfile="full" width="300px" height="200px"> <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"></svg:circle> </svg:svg> <a href="/test">link1</a> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Jan,
Element constructor uses document.createElement internally. What you
need is document.createElementNS [1]:
var el = document.createElementNS("http://www.w3.org/1999/xhtml",
"html:a");
el.appendChild( document.createTextNode("test") );
el.setAttribute(''href'', ''/test'');
$(''container'').appendChild(el);
[1] http://developer.mozilla.org/en/docs/DOM:document.createElementNS
- kangax
On Apr 1, 2:00 pm, Jan Bölsche
<regular.gonza...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:> Hi!
>
> I am trying to make Prototype work in a mixed XHTML/SVG DOM (see Code
> below). The page renders perfectly in Firefox 2.0.0.13 except for the
> 2nd link-Element that was added dynamically using Prototype''s
Element
> class. Although the element seems to be okay when being investigated
> with Firebug, it is not clickable: The text inside the link is
> rendered as standard text and when the mouse cursor enters, nothing
> happens. Same for clicking.
> The first link that is present in the DOM from the beginning however
> works normal.
>
> Is this because we are in an XML DOM rather than in an HTML DOM? Any
> ideas how to fix this? (Solutions involving <embed> or <object>
to
> render the SVG part are obvious but not very attractive for this test)
> Furthermore I don''t care about IE compatibility right now.
>
> BTW: I tried to add the link''s text content using method update().
> This doesn''t work, because this method is not present on the link
> element! It is present though, if i change the file extension
> from .xml to .html, but then of course, the SVG circle is not
> rendered.
>
> For your convenience, the code below is online
athttp://game.lagomorph.de/test.xml
>
> Please help! Thanks,
> Jan
>
> <?xml version="1.0" encoding="UTF-8"?>
> <!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"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
> <head>
> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" /
>
> <script src="prototype-1.5.2_pre0.js"
language="JavaScript"
> type="text/javascript"></script>
> <script type="text/javascript"
language="JavaScript">
> <![CDATA[
>
> function addLink() {
> var link = new Element(''a'', { href:
''/test''});
> link.textContent = "link2";
> $(''container'').insert(link);
>
> }
>
> ]]>
> </script>
> </head>
> <body onload="addLink()">
> <h1>XHTML/SVG/Prototype test</h1>
> <div id="container">
> <svg:svg id="svg_unit_palette"
version="1.1" baseProfile="full"
> width="300px" height="200px">
> <svg:circle cx="150px"
cy="100px" r="50px" fill="#ff0000"
> stroke="#000000"
stroke-width="5px"></svg:circle>
> </svg:svg>
> <a href="/test">link1</a>
> </div>
> </body>
> </html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I think it might be convenient if Element could create namespaced
elements - something like "new Element(''xhtml:div'')"
or "new
Element(''svg:circle'')"
- kangax
On Apr 2, 9:56 am, kangax <kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Jan,
> Element constructor uses document.createElement internally. What you
> need is document.createElementNS [1]:
>
> var el = document.createElementNS("http://www.w3.org/1999/xhtml",
> "html:a");
> el.appendChild( document.createTextNode("test") );
> el.setAttribute(''href'', ''/test'');
> $(''container'').appendChild(el);
>
> [1]http://developer.mozilla.org/en/docs/DOM:document.createElementNS
>
> - kangax
>
> On Apr 1, 2:00 pm, Jan Bölsche
<regular.gonza...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
> wrote:
>
> > Hi!
>
> > I am trying to make Prototype work in a mixed XHTML/SVG DOM (see Code
> > below). The page renders perfectly in Firefox 2.0.0.13 except for the
> > 2nd link-Element that was added dynamically using Prototype''s
Element
> > class. Although the element seems to be okay when being investigated
> > with Firebug, it is not clickable: The text inside the link is
> > rendered as standard text and when the mouse cursor enters, nothing
> > happens. Same for clicking.
> > The first link that is present in the DOM from the beginning however
> > works normal.
>
> > Is this because we are in an XML DOM rather than in an HTML DOM? Any
> > ideas how to fix this? (Solutions involving <embed> or
<object> to
> > render the SVG part are obvious but not very attractive for this test)
> > Furthermore I don''t care about IE compatibility right now.
>
> > BTW: I tried to add the link''s text content using method
update().
> > This doesn''t work, because this method is not present on the
link
> > element! It is present though, if i change the file extension
> > from .xml to .html, but then of course, the SVG circle is not
> > rendered.
>
> > For your convenience, the code below is online
athttp://game.lagomorph.de/test.xml
>
> > Please help! Thanks,
> > Jan
>
> > <?xml version="1.0" encoding="UTF-8"?>
> > <!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"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
> > <head>
> > <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" /
>
> > <script src="prototype-1.5.2_pre0.js"
language="JavaScript"
> > type="text/javascript"></script>
> > <script type="text/javascript"
language="JavaScript">
> > <![CDATA[
>
> > function addLink() {
> > var link = new Element(''a'', { href:
''/test''});
> > link.textContent = "link2";
> > $(''container'').insert(link);
>
> > }
>
> > ]]>
> > </script>
> > </head>
> > <body onload="addLink()">
> > <h1>XHTML/SVG/Prototype test</h1>
> > <div id="container">
> > <svg:svg id="svg_unit_palette"
version="1.1" baseProfile="full"
> > width="300px" height="200px">
> > <svg:circle cx="150px"
cy="100px" r="50px" fill="#ff0000"
> > stroke="#000000"
stroke-width="5px"></svg:circle>
> > </svg:svg>
> > <a
href="/test">link1</a>
> > </div>
> > </body>
> > </html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---