1 Reply Latest reply on Jun 30, 2011 9:40 AM by . .

    Animated anchor

    . . Newbie

      Hello,

       

      Is there a way to animate an anchor using rich:jQuery setting speed effect? (I am using 3.3.0 GA1)

       

      <a4j:form>

          <a4j:outputPanel layout="block">

              <rich:dataTable id="table"

                      var="item"

                      value="#{myBean.items}">

                 

                 <a4j:support event="onRowClick"

                                    action="#{myBean.action}"

                                    reRender="subPanel"

                                    oncomplete="scroll('#myAnchor')" />

       

                 <rich:column>#{item.description}</rich:column>

              </rich:dataTable>

          </a4j:outputPanel>

       

          <a4j:outputPanel id="subPanel" layout="block">

              <a name="#myAnchor"></a>

              <rich:dataTable id="subTable"

                                     var="subItem"

                                     value="#{myBean.subItems}">

                 <rich:column>#{subItem.description}</rich:column>

              </rich:dataTable>

          </a4j:outputPanel>

      </a4j:form>

       

      <script type="text/javascript">

        function scroll(anchor) {

          window.location.href="page.jsp" + anchor;

        }

      </script>

        • 1. Re: Animated anchor
          . . Newbie

          I've found a solution to apply animation in anchor event using jQuery:

           

          <div id="myDiv">

               <a4j:form>

                    <a4j:outputPanel layout="block">

                         <rich:dataTable id="table"

                                                var="item"

                                                value="#{myBean.items}">

           

                               <a4j:support event="onRowClick"

                                                  action="#{myBean.action}"

                                                  reRender="subPanel"

                                                  oncomplete="scroll('#myAnchor')" />

           

                               <rich:column>#{item.description}</rich:column>

                         </rich:dataTable>

                    </a4j:outputPanel>

           

                    <a4j:outputPanel id="subPanel" layout="block">

                         <a id="myAnchor" name="myAnchor" href="#myAnchor"></a>

                         <rich:dataTable id="subTable"

                                                var="subItem"

                                                value="#{myBean.subItems}">

                               <rich:column>#{subItem.description}</rich:column>

                         </rich:dataTable>

                    </a4j:outputPanel>

               </a4j:form>

          </div>

           

          <script type="text/javascript">

            function scroll(anchor) {

              var top=(jQuery(anchor).position().top);

              jQuery("#myDiv").animate({'scrollTop': top},1000)

            }

          </script>