Loading ...
Sorry, an error occurred while loading the content.

Can anyone tell me why this doesn't work in Firefox?

Expand Messages
  • xyz1332003
    It works in IE, Opera and Safari. A red circle is displayed and when I click on the circle, another circle appears. But not in Firefox 3.5.3. How do I trouble
    Message 1 of 9 , Sep 28, 2009
    • 0 Attachment
      It works in IE, Opera and Safari. A red circle is displayed and when I click on the circle, another circle appears. But not in Firefox 3.5.3.
      How do I trouble shoot this? Thanks.

      <?xml version="1.0" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="250px" >
      <script type="text/javascript">
      <![CDATA[
      function createShape(evt) {
      var SVGDoc = evt.target.ownerDocument;
      var SVGRoot = SVGDoc.documentElement;
      var myShape;

      myShape = SVGDoc.createElement("circle");
      myShape.setAttribute("cx", 125);
      myShape.setAttribute("cy", 125);
      myShape.setAttribute("r", 50);
      myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000");
      SVGRoot.appendChild(myShape);
      }
      ]]>
      </script>
      <circle cx="60px" cy="100px" r="50px" style="fill:white; stroke:red; stroke-width:4"
      onclick="createShape(evt)"/>
      </svg>
    • Jake B
      It might be due to evt.target.ownerDocument. I seem to recall having some trouble with that. I would recommend that you check the JavaScript console for errors
      Message 2 of 9 , Sep 28, 2009
      • 0 Attachment
        It might be due to evt.target.ownerDocument. I seem to recall having some
        trouble with that. I would recommend that you check the JavaScript console
        for errors (Tools -> Error Console). I would also recommend that you install
        the Firebug <http://getfirebug.com/> firefox extension, as it makes
        debugging these problems much much easier.

        Good luck,

        Jake

        On Tue, Sep 29, 2009 at 1:10 AM, xyz1332003 <xyz1332003@...> wrote:

        >
        >
        > It works in IE, Opera and Safari. A red circle is displayed and when I
        > click on the circle, another circle appears. But not in Firefox 3.5.3.
        > How do I trouble shoot this? Thanks.
        >
        > <?xml version="1.0" standalone="no"?>
        > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
        > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
        > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="
        > http://www.w3.org/1999/xlink" width="400px" height="250px" >
        > <script type="text/javascript">
        > <![CDATA[
        > function createShape(evt) {
        > var SVGDoc = evt.target.ownerDocument;
        > var SVGRoot = SVGDoc.documentElement;
        > var myShape;
        >
        > myShape = SVGDoc.createElement("circle");
        > myShape.setAttribute("cx", 125);
        > myShape.setAttribute("cy", 125);
        > myShape.setAttribute("r", 50);
        > myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000");
        > SVGRoot.appendChild(myShape);
        > }
        > ]]>
        > </script>
        > <circle cx="60px" cy="100px" r="50px" style="fill:white; stroke:red;
        > stroke-width:4"
        > onclick="createShape(evt)"/>
        > </svg>
        >
        >
        >


        [Non-text portions of this message have been removed]
      • xyz1332003
        ... Thanks for your reply. I already have Firebug installed. At first I was using evt.getTarget().getOwnerDocument(); SVGDoc.getDocumentElement(); and recieved
        Message 3 of 9 , Sep 28, 2009
        • 0 Attachment
          --- In svg-developers@yahoogroups.com, Jake B <otakuj462@...> wrote:
          >
          > It might be due to evt.target.ownerDocument. I seem to recall having some
          > trouble with that. I would recommend that you check the JavaScript console
          > for errors (Tools -> Error Console). I would also recommend that you install
          > the Firebug <http://getfirebug.com/> firefox extension, as it makes
          > debugging these problems much much easier.


          Thanks for your reply.

          I already have Firebug installed.

          At first I was using

          evt.getTarget().getOwnerDocument();
          SVGDoc.getDocumentElement();

          and recieved an error that said evt.getTarget().getOwnerDocument(); is not a function.

          I changed it to

          evt.target.ownerDocument.
          SVGDoc.documentElement;

          Now no error, but nothing happens when I click.
          Unfortunately I can find no tutorials on how to use Firebug. Everything I find tells what Firebug can do, but not how to do it.
        • Jake B
          Here s a good tutorial on using Firebug: http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii One thing that will help
          Message 4 of 9 , Sep 28, 2009
          • 0 Attachment
            Here's a good tutorial on using Firebug:

            http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii

            One thing that will help you is the command console.dir(object). This allows
            you to print out all of an object's properties and drill down into them. The
            interactive console will be useful to you as well. Firebug is a really
            invaluable tool and it's worthwhile to learn to use it well.

            Good luck,

            Jake

            On Tue, Sep 29, 2009 at 2:04 AM, xyz1332003 <xyz1332003@...> wrote:

            >
            >
            > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
            > Jake B <otakuj462@...> wrote:
            > >
            > > It might be due to evt.target.ownerDocument. I seem to recall having some
            > > trouble with that. I would recommend that you check the JavaScript
            > console
            > > for errors (Tools -> Error Console). I would also recommend that you
            > install
            > > the Firebug <http://getfirebug.com/> firefox extension, as it makes
            > > debugging these problems much much easier.
            >
            > Thanks for your reply.
            >
            > I already have Firebug installed.
            >
            > At first I was using
            >
            > evt.getTarget().getOwnerDocument();
            > SVGDoc.getDocumentElement();
            >
            > and recieved an error that said evt.getTarget().getOwnerDocument(); is not
            > a function.
            >
            > I changed it to
            >
            > evt.target.ownerDocument.
            > SVGDoc.documentElement;
            >
            > Now no error, but nothing happens when I click.
            > Unfortunately I can find no tutorials on how to use Firebug. Everything I
            > find tells what Firebug can do, but not how to do it.
            >
            >
            >


            [Non-text portions of this message have been removed]
          • Olaf Schnabel
            Hi xyz change the line myShape = SVGDoc.createElement( circle ); to myShape = SVGDoc.createElementNS( http://www.w3.org/2000/svg , circle ); and your script
            Message 5 of 9 , Sep 28, 2009
            • 0 Attachment
              Hi xyz

              change the line

              myShape = SVGDoc.createElement("circle");

              to

              myShape = SVGDoc.createElementNS("http://www.w3.org/2000/svg","circle");

              and your script will work in Firefox, Opera, IE (I have no Safari to
              test it but I am pretty sure it will work there too).

              Best regards
              Olaf

              xyz1332003 wrote:
              > It works in IE, Opera and Safari. A red circle is displayed and when I click on the circle, another circle appears. But not in Firefox 3.5.3.
              > How do I trouble shoot this? Thanks.
              >
              > <?xml version="1.0" standalone="no"?>
              > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
              > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="250px" >
              > <script type="text/javascript">
              > <![CDATA[
              > function createShape(evt) {
              > var SVGDoc = evt.target.ownerDocument;
              > var SVGRoot = SVGDoc.documentElement;
              > var myShape;
              >
              > myShape = SVGDoc.createElement("circle");
              > myShape.setAttribute("cx", 125);
              > myShape.setAttribute("cy", 125);
              > myShape.setAttribute("r", 50);
              > myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000");
              > SVGRoot.appendChild(myShape);
              > }
              > ]]>
              > </script>
              > <circle cx="60px" cy="100px" r="50px" style="fill:white; stroke:red; stroke-width:4"
              > onclick="createShape(evt)"/>
              > </svg>
              >
              >

              --
              Dr. Olaf Schnabel
              Institute of Cartography
              ETH Zurich
              Wolfgang-Pauli-Str. 15
              8093 Zurich
              Switzerland

              tel: ++41 44 633 3031
              fax: ++41 44 633 1153
              e-mail: oschnabel@...
              www private: http://www.ika.ethz.ch/schnabel
              www project: http://www.e-cartouche.ch
              www institute: http://www.karto.ethz.ch
            • xyz1332003
              Thanks. I will check it out.
              Message 6 of 9 , Sep 28, 2009
              • 0 Attachment
                Thanks.

                I will check it out.
              • xyz1332003
                It works in EI, Opera and Safari. I cannot get any error in Firebug. The only Firebug tutorial I know of, walks me through some steps but doesn t seem to
                Message 7 of 9 , Sep 29, 2009
                • 0 Attachment
                  It works in EI, Opera and Safari.

                  I cannot get any error in Firebug. The only Firebug tutorial I know of, walks me through some steps but doesn't seem to explain exactly how to find a bug or error and solve it, or at leased it is not obvious to me. I need to know how to trouble shoot this and make it work. Thanks.

                  <?xml version="1.0" standalone="no"?>
                  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
                  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="250px" >
                  <script type="text/javascript">
                  <![CDATA[
                  function createShape(evt) {
                  var SVGDoc = evt.target.ownerDocument;
                  var SVGRoot = SVGDoc.documentElement;
                  var myShape;

                  myShape = SVGDoc.createElement("circle");
                  myShape.setAttribute("cx", 125);
                  myShape.setAttribute("cy", 125);
                  myShape.setAttribute("r", 50);
                  myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000");
                  SVGRoot.appendChild(myShape);
                  }
                  ]]>
                  </script>
                  <circle cx="60px" cy="100px" r="50px" style="fill:white; stroke:red; stroke-width:4"
                  onclick="createShape(evt)"/>
                  </svg>
                • G. Wade Johnson
                  It seems like someone has already mentioned the fact that createElement() should be createElementNS(). See below. On Wed, 30 Sep 2009 02:06:24 -0000 ... // The
                  Message 8 of 9 , Sep 29, 2009
                  • 0 Attachment
                    It seems like someone has already mentioned the fact that
                    createElement() should be createElementNS(). See below.

                    On Wed, 30 Sep 2009 02:06:24 -0000
                    "xyz1332003" <xyz1332003@...> wrote:

                    > It works in EI, Opera and Safari.
                    >
                    > I cannot get any error in Firebug. The only Firebug tutorial I know
                    > of, walks me through some steps but doesn't seem to explain exactly
                    > how to find a bug or error and solve it, or at leased it is not
                    > obvious to me. I need to know how to trouble shoot this and make it
                    > work. Thanks.
                    >
                    > <?xml version="1.0" standalone="no"?>
                    > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
                    > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                    > <svg xmlns="http://www.w3.org/2000/svg"
                    > xmlns:xlink="http://www.w3.org/1999/xlink" width="400px"
                    > height="250px" > <script type="text/javascript"> <![CDATA[
                    > function createShape(evt) {
                    > var SVGDoc = evt.target.ownerDocument;
                    > var SVGRoot = SVGDoc.documentElement;
                    > var myShape;
                    >
                    > // myShape = SVGDoc.createElement("circle");
                    // The namespace is required, otherwise it's not an SVG circle.
                    myShape = SVGDoc.createElementNS( "http://www.w3.org/2000/svg",
                    "circle" );
                    > myShape.setAttribute("cx", 125);
                    > myShape.setAttribute("cy", 125);
                    > myShape.setAttribute("r", 50);
                    > myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000");
                    > SVGRoot.appendChild(myShape);
                    > }
                    > ]]>
                    > </script>
                    > <circle cx="60px" cy="100px" r="50px" style="fill:white; stroke:red;
                    > stroke-width:4" onclick="createShape(evt)"/>
                    > </svg>

                    There is a difference between a "circle" element in the SVG namespace
                    and a "circle" element in the null namespace. The viewer does not know
                    how to render the second.

                    HTH,
                    G. Wade
                    --
                    Understanding is a three-edged sword. -- Kosh in "Deathwalker"
                  • xyz1332003
                    My goodness Dr. Olaf Schnabel I am sorry. Somehow your reply was not on my list. Perhaps I did not select view all at the proper time. Thanks for your reply; I
                    Message 9 of 9 , Sep 29, 2009
                    • 0 Attachment
                      My goodness Dr. Olaf Schnabel I am sorry.

                      Somehow your reply was not on my list. Perhaps I did not select view all at the proper time.

                      Thanks for your reply; I will study it and thank you G. Wade Johnson for pointing this out to me.
                    Your message has been successfully submitted and would be delivered to recipients shortly.