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

Scrolling to HTML element

Expand Messages
  • Alessandro Vernet
    Assume you have a large page. The page is too large to be displayed in the viewport, and you need to scroll to see the bottom of the page. Is there some
    Message 1 of 6 , Jul 27, 2007
      Assume you have a large page. The page is too large to be displayed in the
      viewport, and you need to scroll to see the bottom of the page.

      Is there some utility in YUI that would allow me to write some code to make
      the browser scroll to a given element on page? This way making sure that the
      element I scroll to is visible in the viewport, if it wasn't already visible
      to start with?

      Alex
      --
      Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise
      http://www.orbeon.com/

      --
      View this message in context: http://www.nabble.com/Scrolling-to-HTML-element-tf4159544.html#a11834613
      Sent from the ydn-javascript mailing list archive at Nabble.com.
    • Gopal Venkatesan
      ... AFAIK there is not anything in YUI for doing this using a single method, but it is very easy to do otherwise. You can do this using named anchors .
      Message 2 of 6 , Jul 30, 2007
        Alessandro Vernet wrote:
        >
        >
        >
        > Assume you have a large page. The page is too large to be displayed in the
        > viewport, and you need to scroll to see the bottom of the page.
        >
        > Is there some utility in YUI that would allow me to write some code to make
        > the browser scroll to a given element on page? This way making sure that the
        > element I scroll to is visible in the viewport, if it wasn't already visible
        > to start with?
        >

        AFAIK there is not anything in YUI for doing this using a single method,
        but it is very easy to do otherwise.

        You can do this using "named anchors".
        http://www.w3.org/TR/html401/struct/links.html

        Here's a quick example:
        http://gopalarathnam.com/examples/javascript/scroll.html

        PS. Even the "Go to Top" can be generated through the script.

        HTH.

        --
        Gopal Venkatesan

        http://gopalarathnam.com/
      • Alessandro Vernet
        Hi Gopal, ... The example doesn t do the scrolling with JavaScript. And I don t want to generate a link and tell the user to click on that link. I would like
        Message 3 of 6 , Jul 31, 2007
          Hi Gopal,


          Gopal Venkatesan wrote:
          >
          > AFAIK there is not anything in YUI for doing this using a single method,
          > but it is very easy to do otherwise.
          >
          > You can do this using "named anchors".
          > http://www.w3.org/TR/html401/struct/links.html
          >
          > Here's a quick example:
          > http://gopalarathnam.com/examples/javascript/scroll.html
          >

          The example doesn't do the scrolling with JavaScript. And I don't want to
          generate a link and tell the user to click on that link. I would like to
          just scroll there, for instance upon on some condition depending on what
          Ajax response I receive from the server.

          But I see there is a window.scrollTo(), which should do the trick. And you
          can find the position of an element with YAHOO.util.Dom.getXY(). So I think
          we're good on this one!

          Alex
          --
          View this message in context: http://www.nabble.com/Scrolling-to-HTML-element-tf4159544.html#a11937799
          Sent from the ydn-javascript mailing list archive at Nabble.com.
        • Matt Sweeney
          Hi Alex, It sounds like you want the HTMLElement scrollIntoView() method: http://developer.mozilla.org/en/docs/DOM:element.scrollIntoView Matt
          Message 4 of 6 , Jul 31, 2007
            Hi Alex,

            It sounds like you want the HTMLElement "scrollIntoView()" method:
            http://developer.mozilla.org/en/docs/DOM:element.scrollIntoView

            Matt

            Alessandro Vernet wrote:
            > Hi Gopal,
            >
            >
            > Gopal Venkatesan wrote:
            >
            >> AFAIK there is not anything in YUI for doing this using a single method,
            >> but it is very easy to do otherwise.
            >>
            >> You can do this using "named anchors".
            >> http://www.w3.org/TR/html401/struct/links.html
            >>
            >> Here's a quick example:
            >> http://gopalarathnam.com/examples/javascript/scroll.html
            >>
            >>
            >
            > The example doesn't do the scrolling with JavaScript. And I don't want to
            > generate a link and tell the user to click on that link. I would like to
            > just scroll there, for instance upon on some condition depending on what
            > Ajax response I receive from the server.
            >
            > But I see there is a window.scrollTo(), which should do the trick. And you
            > can find the position of an element with YAHOO.util.Dom.getXY(). So I think
            > we're good on this one!
            >
            > Alex
            >
          • Alessandro Vernet
            Hi Matt, ... That is even simpler! Somehow I missed that method. Thank you! Alex -- Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise
            Message 5 of 6 , Jul 31, 2007
              Hi Matt,


              Matt Sweeney wrote:
              >
              > It sounds like you want the HTMLElement "scrollIntoView()" method:
              > http://developer.mozilla.org/en/docs/DOM:element.scrollIntoView
              >

              That is even simpler! Somehow I missed that method. Thank you!

              Alex
              --
              Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise
              http://www.orbeon.com/

              --
              View this message in context: http://www.nabble.com/Scrolling-to-HTML-element-tf4159544.html#a11938492
              Sent from the ydn-javascript mailing list archive at Nabble.com.
            • Jason Lee
              ... It s almost midnight on a really rough day, so I could be WAY off, but isn t this kinda what you re looking for:
              Message 6 of 6 , Jul 31, 2007
                On 7/31/07, Matt Sweeney <msweeney@...> wrote:
                > It sounds like you want the HTMLElement "scrollIntoView()" method:
                > http://developer.mozilla.org/en/docs/DOM:element.scrollIntoView

                It's almost midnight on a really rough day, so I could be WAY off, but
                isn't this kinda what you're looking for:

                http://developer.yahoo.com/yui/examples/animation/scroll.html

                --
                Jason Lee, SCJP
                Software Architect -- Objectstream, Inc.
                JSF RI Dev Team
                http://blogs.steeplesoft.com
              Your message has been successfully submitted and would be delivered to recipients shortly.