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

Re: Scroll by Javascript

Expand Messages
  • Francis Hemsher
    ... SVG ... If you have an svg drawing that doesn t dynamically change content then the easiest would be to actually pan and zoom the svg and get a readout of
    Message 1 of 10 , Jun 1, 2003
    • 0 Attachment
      nbee78 wrote:

      > I have an html page with a table of 2 columns...
      >
      > Left Column: contains some web control (input) as a condition for
      > user to choose
      > Right Column: embed a SVG.
      >
      > What i want to do is: when user choose some condition and click a
      > buttong, the SVG on the right automatically scroll to some location
      > (to show specific part of the whole SVG which meets the user need).
      >
      > Can I do that using javascript? (simply, I just want to scroll
      SVG
      > in vertical and horizontal by javascript)...


      If you have an svg drawing that doesn't dynamically change content
      then the easiest would be to actually pan and zoom the svg and get a
      readout of values that are satisfactory for a specific selection in
      your table. (note that you can also zoom in/out with svg). If your
      are using IE5.5+ and the Adobe SVG viewer 3.0, try the following:


      Give you embed an id:

      <embed id="svgEmbed"...

      When the HTLM page loads, get the svg Object:

      <body onLoad=getDocSVG()>

      var mySVG
      function getDocSVG()
      {
      docSVG=document.embeds["svgEmbed"].getSVGDocument()
      mySVG=docSVG.documentElement
      }

      Also include the functions in your HTMLpage

      function showZoomLevel()
      {
      scale=mySVG.currentScale
      zoomValue.value=scale
      }

      function showTranslate()
      {
      tx=mySVG.currentTranslate.x;
      ty=mySVG.currentTranslate.y;
      translateValue.value="tx="+tx+" ty="+ty
      }

      function scrollSVG(x,y,zoom)
      {
      mySVG.currentScale=zoom
      mySVG.currentTranslate.x=x
      mySVG.currentTranslate.y=y
      }

      add two temporary text inputs for a readout of values as you zoom and
      pan the svg.
      Zoom:<input type=text id="zoomValue">
      Translate:<input type=text id=translateValue">

      Add the following to your svg document.
      <svg onzoom="top.showZoomLevel()" onscroll="top.showTranslate()" ...

      Once you have determined satisfactory values for each table element,
      place the function call scrollSVG(x,y,zoom) with your arguments for
      that specific location.

      Good Luck,
      Francis
    • nbee78
      Thank you so much Francis...It s great!!! ... for ... a ... location ... need). ... a ... and ... () ...
      Message 2 of 10 , Jun 2, 2003
      • 0 Attachment
        Thank you so much Francis...It's great!!!


        --- In svg-developers@yahoogroups.com, "Francis Hemsher"
        <francishemsher@c...> wrote:
        > nbee78 wrote:
        >
        > > I have an html page with a table of 2 columns...
        > >
        > > Left Column: contains some web control (input) as a condition
        for
        > > user to choose
        > > Right Column: embed a SVG.
        > >
        > > What i want to do is: when user choose some condition and click
        a
        > > buttong, the SVG on the right automatically scroll to some
        location
        > > (to show specific part of the whole SVG which meets the user
        need).
        > >
        > > Can I do that using javascript? (simply, I just want to scroll
        > SVG
        > > in vertical and horizontal by javascript)...
        >
        >
        > If you have an svg drawing that doesn't dynamically change content
        > then the easiest would be to actually pan and zoom the svg and get
        a
        > readout of values that are satisfactory for a specific selection in
        > your table. (note that you can also zoom in/out with svg). If your
        > are using IE5.5+ and the Adobe SVG viewer 3.0, try the following:
        >
        >
        > Give you embed an id:
        >
        > <embed id="svgEmbed"...
        >
        > When the HTLM page loads, get the svg Object:
        >
        > <body onLoad=getDocSVG()>
        >
        > var mySVG
        > function getDocSVG()
        > {
        > docSVG=document.embeds["svgEmbed"].getSVGDocument()
        > mySVG=docSVG.documentElement
        > }
        >
        > Also include the functions in your HTMLpage
        >
        > function showZoomLevel()
        > {
        > scale=mySVG.currentScale
        > zoomValue.value=scale
        > }
        >
        > function showTranslate()
        > {
        > tx=mySVG.currentTranslate.x;
        > ty=mySVG.currentTranslate.y;
        > translateValue.value="tx="+tx+" ty="+ty
        > }
        >
        > function scrollSVG(x,y,zoom)
        > {
        > mySVG.currentScale=zoom
        > mySVG.currentTranslate.x=x
        > mySVG.currentTranslate.y=y
        > }
        >
        > add two temporary text inputs for a readout of values as you zoom
        and
        > pan the svg.
        > Zoom:<input type=text id="zoomValue">
        > Translate:<input type=text id=translateValue">
        >
        > Add the following to your svg document.
        > <svg onzoom="top.showZoomLevel()" onscroll="top.showTranslate
        ()" ...
        >
        > Once you have determined satisfactory values for each table element,
        > place the function call scrollSVG(x,y,zoom) with your arguments for
        > that specific location.
        >
        > Good Luck,
        > Francis
      • nbee78
        Ah...there are some problems. I describe like this: My web server is English. My graph header is like this:
        Message 3 of 10 , Jun 2, 2003
        • 0 Attachment
          Ah...there are some problems. I describe like this:

          My web server is English.

          My graph header is like this:

          <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
          <!DOCTYPE svg PUBLIC
          "-//W3C//DTD SVG 20010904//EN"
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
          [
          <!ATTLIST svg
          xmlns:gui CDATA #IMPLIED>
          ]
          >

          And client computer is in Korean (Korean Operating System).

          When load SVG in client browser, I got a warning like this:

          "Unrecognized DOCTYPE declaration. Image might not display correctly."

          In that case, I can not scroll like your direction.

          Has anyone has experience about this problem??? Please help.......







          --- In svg-developers@yahoogroups.com, "nbee78" <nbee78@y...> wrote:
          > Thank you so much Francis...It's great!!!
          >
          >
          > --- In svg-developers@yahoogroups.com, "Francis Hemsher"
          > <francishemsher@c...> wrote:
          > > nbee78 wrote:
          > >
          > > > I have an html page with a table of 2 columns...
          > > >
          > > > Left Column: contains some web control (input) as a condition
          > for
          > > > user to choose
          > > > Right Column: embed a SVG.
          > > >
          > > > What i want to do is: when user choose some condition and
          click
          > a
          > > > buttong, the SVG on the right automatically scroll to some
          > location
          > > > (to show specific part of the whole SVG which meets the user
          > need).
          > > >
          > > > Can I do that using javascript? (simply, I just want to
          scroll
          > > SVG
          > > > in vertical and horizontal by javascript)...
          > >
          > >
          > > If you have an svg drawing that doesn't dynamically change
          content
          > > then the easiest would be to actually pan and zoom the svg and
          get
          > a
          > > readout of values that are satisfactory for a specific selection
          in
          > > your table. (note that you can also zoom in/out with svg). If
          your
          > > are using IE5.5+ and the Adobe SVG viewer 3.0, try the following:
          > >
          > >
          > > Give you embed an id:
          > >
          > > <embed id="svgEmbed"...
          > >
          > > When the HTLM page loads, get the svg Object:
          > >
          > > <body onLoad=getDocSVG()>
          > >
          > > var mySVG
          > > function getDocSVG()
          > > {
          > > docSVG=document.embeds["svgEmbed"].getSVGDocument()
          > > mySVG=docSVG.documentElement
          > > }
          > >
          > > Also include the functions in your HTMLpage
          > >
          > > function showZoomLevel()
          > > {
          > > scale=mySVG.currentScale
          > > zoomValue.value=scale
          > > }
          > >
          > > function showTranslate()
          > > {
          > > tx=mySVG.currentTranslate.x;
          > > ty=mySVG.currentTranslate.y;
          > > translateValue.value="tx="+tx+" ty="+ty
          > > }
          > >
          > > function scrollSVG(x,y,zoom)
          > > {
          > > mySVG.currentScale=zoom
          > > mySVG.currentTranslate.x=x
          > > mySVG.currentTranslate.y=y
          > > }
          > >
          > > add two temporary text inputs for a readout of values as you zoom
          > and
          > > pan the svg.
          > > Zoom:<input type=text id="zoomValue">
          > > Translate:<input type=text id=translateValue">
          > >
          > > Add the following to your svg document.
          > > <svg onzoom="top.showZoomLevel()" onscroll="top.showTranslate
          > ()" ...
          > >
          > > Once you have determined satisfactory values for each table
          element,
          > > place the function call scrollSVG(x,y,zoom) with your arguments
          for
          > > that specific location.
          > >
          > > Good Luck,
          > > Francis
        • nbee78
          I can not scroll with Windows 2000 Professional, IE 6... There s no error but it didn t scroll.... Please help.. ... correctly. ... condition ... selection
          Message 4 of 10 , Jun 3, 2003
          • 0 Attachment
            I can not scroll with Windows 2000 Professional, IE 6...

            There's no error but it didn't scroll....

            Please help..




            --- In svg-developers@yahoogroups.com, "nbee78" <nbee78@y...> wrote:
            > Ah...there are some problems. I describe like this:
            >
            > My web server is English.
            >
            > My graph header is like this:
            >
            > <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
            > <!DOCTYPE svg PUBLIC
            > "-//W3C//DTD SVG 20010904//EN"
            > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
            > [
            > <!ATTLIST svg
            > xmlns:gui CDATA #IMPLIED>
            > ]
            > >
            >
            > And client computer is in Korean (Korean Operating System).
            >
            > When load SVG in client browser, I got a warning like this:
            >
            > "Unrecognized DOCTYPE declaration. Image might not display
            correctly."
            >
            > In that case, I can not scroll like your direction.
            >
            > Has anyone has experience about this problem??? Please help.......
            >
            >
            >
            >
            >
            >
            >
            > --- In svg-developers@yahoogroups.com, "nbee78" <nbee78@y...> wrote:
            > > Thank you so much Francis...It's great!!!
            > >
            > >
            > > --- In svg-developers@yahoogroups.com, "Francis Hemsher"
            > > <francishemsher@c...> wrote:
            > > > nbee78 wrote:
            > > >
            > > > > I have an html page with a table of 2 columns...
            > > > >
            > > > > Left Column: contains some web control (input) as a
            condition
            > > for
            > > > > user to choose
            > > > > Right Column: embed a SVG.
            > > > >
            > > > > What i want to do is: when user choose some condition and
            > click
            > > a
            > > > > buttong, the SVG on the right automatically scroll to some
            > > location
            > > > > (to show specific part of the whole SVG which meets the user
            > > need).
            > > > >
            > > > > Can I do that using javascript? (simply, I just want to
            > scroll
            > > > SVG
            > > > > in vertical and horizontal by javascript)...
            > > >
            > > >
            > > > If you have an svg drawing that doesn't dynamically change
            > content
            > > > then the easiest would be to actually pan and zoom the svg and
            > get
            > > a
            > > > readout of values that are satisfactory for a specific
            selection
            > in
            > > > your table. (note that you can also zoom in/out with svg). If
            > your
            > > > are using IE5.5+ and the Adobe SVG viewer 3.0, try the
            following:
            > > >
            > > >
            > > > Give you embed an id:
            > > >
            > > > <embed id="svgEmbed"...
            > > >
            > > > When the HTLM page loads, get the svg Object:
            > > >
            > > > <body onLoad=getDocSVG()>
            > > >
            > > > var mySVG
            > > > function getDocSVG()
            > > > {
            > > > docSVG=document.embeds["svgEmbed"].getSVGDocument()
            > > > mySVG=docSVG.documentElement
            > > > }
            > > >
            > > > Also include the functions in your HTMLpage
            > > >
            > > > function showZoomLevel()
            > > > {
            > > > scale=mySVG.currentScale
            > > > zoomValue.value=scale
            > > > }
            > > >
            > > > function showTranslate()
            > > > {
            > > > tx=mySVG.currentTranslate.x;
            > > > ty=mySVG.currentTranslate.y;
            > > > translateValue.value="tx="+tx+" ty="+ty
            > > > }
            > > >
            > > > function scrollSVG(x,y,zoom)
            > > > {
            > > > mySVG.currentScale=zoom
            > > > mySVG.currentTranslate.x=x
            > > > mySVG.currentTranslate.y=y
            > > > }
            > > >
            > > > add two temporary text inputs for a readout of values as you
            zoom
            > > and
            > > > pan the svg.
            > > > Zoom:<input type=text id="zoomValue">
            > > > Translate:<input type=text id=translateValue">
            > > >
            > > > Add the following to your svg document.
            > > > <svg onzoom="top.showZoomLevel()" onscroll="top.showTranslate
            > > ()" ...
            > > >
            > > > Once you have determined satisfactory values for each table
            > element,
            > > > place the function call scrollSVG(x,y,zoom) with your arguments
            > for
            > > > that specific location.
            > > >
            > > > Good Luck,
            > > > Francis
          • Francis Hemsher
            ...
            Message 5 of 10 , Jun 3, 2003
            • 0 Attachment
              "nbee78" wrote:
              > I can not scroll with Windows 2000 Professional, IE 6...
              >
              > There's no error but it didn't scroll....
              >

              <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
              <!DOCTYPE svg PUBLIC
              "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
              [
              <!ATTLIST svg
              xmlns:gui CDATA #IMPLIED>
              ]>

              Try:

              <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
              1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >

              Francis
            • nbee78
              Thanks for your reply. But when I use I got the
              Message 6 of 10 , Jun 3, 2003
              • 0 Attachment
                Thanks for your reply.

                But when I use

                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
                1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >

                I got the warning message: Unrecognized DOCTYPE...

                It's Windows 2000 Profressional Korean + IE 6. And it still can not
                scroll.

                Do you have any solution?


                --- In svg-developers@yahoogroups.com, "Francis Hemsher"
                <francishemsher@c...> wrote:
                > "nbee78" wrote:
                > > I can not scroll with Windows 2000 Professional, IE 6...
                > >
                > > There's no error but it didn't scroll....
                > >
                >
                > <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
                > <!DOCTYPE svg PUBLIC
                > "-//W3C//DTD SVG 20010904//EN"
                > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
                > [
                > <!ATTLIST svg
                > xmlns:gui CDATA #IMPLIED>
                > ]>
                >
                > Try:
                >
                > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
                > 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
                >
                >
                > Francis
              • Francis Hemsher
                ... No idea, but I ll check it on my Windows XP, IE6 machine and see if there is a problem there also. Francis
                Message 7 of 10 , Jun 3, 2003
                • 0 Attachment
                  > But when I use
                  >
                  > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
                  > 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
                  >
                  >
                  > I got the warning message: Unrecognized DOCTYPE...
                  >
                  > It's Windows 2000 Profressional Korean + IE 6. And it still can not
                  > scroll.
                  >
                  > Do you have any solution?
                  >

                  No idea, but I'll check it on my Windows XP, IE6 machine and see if
                  there is a problem there also.

                  Francis
                • Francis Hemsher
                  ... 20010904/DTD/svg10.dtd ... not ... I ran it on XP/IE6/ASV3 and all is OK. Sorry, Francis
                  Message 8 of 10 , Jun 3, 2003
                  • 0 Attachment
                    > > But when I use
                    > >
                    > > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
                    > > 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-
                    20010904/DTD/svg10.dtd"
                    > >
                    > >
                    > > I got the warning message: Unrecognized DOCTYPE...
                    > >
                    > > It's Windows 2000 Profressional Korean + IE 6. And it still can
                    not
                    > > scroll.
                    > >
                    > > Do you have any solution?
                    > >
                    -----------------
                    > No idea, but I'll check it on my Windows XP, IE6 machine and see if
                    > there is a problem there also.

                    I ran it on XP/IE6/ASV3 and all is OK.
                    Sorry,
                    Francis
                  • nbee78
                    OK...thank you so much ... if
                    Message 9 of 10 , Jun 3, 2003
                    • 0 Attachment
                      OK...thank you so much


                      --- In svg-developers@yahoogroups.com, "Francis Hemsher"
                      <francishemsher@c...> wrote:
                      > > > But when I use
                      > > >
                      > > > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
                      > > > 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-
                      > 20010904/DTD/svg10.dtd"
                      > > >
                      > > >
                      > > > I got the warning message: Unrecognized DOCTYPE...
                      > > >
                      > > > It's Windows 2000 Profressional Korean + IE 6. And it still can
                      > not
                      > > > scroll.
                      > > >
                      > > > Do you have any solution?
                      > > >
                      > -----------------
                      > > No idea, but I'll check it on my Windows XP, IE6 machine and see
                      if
                      > > there is a problem there also.
                      >
                      > I ran it on XP/IE6/ASV3 and all is OK.
                      > Sorry,
                      > Francis
                    Your message has been successfully submitted and would be delivered to recipients shortly.