2 Replies Latest reply on Apr 17, 2013 6:35 AM by jeisen

    How to scroll automatically to a panel?

    jeisen

      Hi,

       

      I have an error panel (rich:panel). The error panel is included inside a template and is always located on top of the page.

      This panel contains my error messages (rich:messages). The panel is rendered when messages exists (!empty facesContext.maximumSeverity).

       

      Now a page can be very large. So when an error occurs at the end of the page, the error panel is shown but the user doesn't see it because it is on top of the page.

       

      So what is the best way to scroll automatically to the top of the page? Or more general, how to scroll automatically to a panel when the panel appears?

       

      I tried to add a jquery tag inside the panel, like:

       

      <rich:panel id="panelId" rendered="#{rendered}">

        ...

        <rich:jQuery selector="panelId" timming ="immediate" query="alert('test')"

      </rich:panel>

       

      The idea is that, when the panel is rendered, the JavaScript is executed immediately and executes some java script - scrolling. But this didn't worked for me. It only executes the java script when i add an event attribute to the jQuery tag (event="click"). But what is the correct event and how to trigger it?

       

      How to solve this problem, how must I trigger the java script?

       

      I' am using RF4.3.0Final.

       

      Thanks in advance!

        • 1. Re: How to scroll automatically to a panel?
          chan32167

          Have u tried javascript window.scroll(0.0); We use that checking if there are any validation errors, and if there are we execute that window.scroll thing

           


          /**

          * @return

          */

          public boolean isExistErrors() {

          Severity maximunSeverity = getFacesContext().getMaximumSeverity();

          if (FacesMessage.SEVERITY_ERROR.equals(maximunSeverity)) {

          return true;

          }

          return false;

          }

           

          <a4j:commandLink title="#{msg.lbl_imprimir_carta}"

                      action="#{siniestroController.imprimirCarta('')}"

                      oncomplete="if(#{siniestroController.existErrors}){window.scroll(0,0)};"

                      render="notificacionPanel,contentPanel">

                      <h:graphicImage library="images" name="ic_enviarmail.gif"

                          styleClass="button-link" />

                  </a4j:commandLink>

          • 2. Re: How to scroll automatically to a panel?
            jeisen

            Scroll to page head in case of messages > INFO:

             

            <h:panelGroup id="ScrollToPageHeadPanel" rendered="#{!empty facesContext.maximumSeverity and !(facesContext.maximumSeverity.ordinal lt 1)}">

                 <script type="text/javascript" language="javascript">

                      window.scrollTo(0,0);

                      </script>

            </h:panelGroup>

             

            I didn't get it with JQuery.