7 Replies Latest reply on Nov 21, 2012 7:48 AM by iabughosh

    Looking for something like "showDelay" for rich:popupPanel?

    smoking81 Newbie

      Hi everybody!

      The following code displays a text ("Open popup") which will open a rich:popupPanel as soon as the user goes with the mouse over the text.

       

      Do you know how could I let the popup be displayed only if the mouse pointer is kept at least X seconds over the text (and not immediately as it happens now)? (Note: this rich:popupPanel is similar to a rich:tooltip, and what I want to achieve is the same as what can be done through showDelay attribute for such component).

       

       

              <h:outputLabel id="popupLabel" value="Open popup">
              <rich:componentControl event="mouseover" operation="show" target="popup">
                        <a4j:param name="event" value="event" noEscape="true" />
                        <rich:hashParam>
                                  <a4j:param noEscape="true" name="top"
                                            value="jQuery(#{rich:element('popupLabel')}.parentNode).offset().top + jQuery(#{rich:element('popupLabel')}.parentNode).height()" />
                                  <a4j:param noEscape="true" name="left"
                                            value="jQuery(#{rich:element('popupLabel')}.parentNode).offset().left" />
                        </rich:hashParam>
              </rich:componentControl>
              </h:outputLabel>
              <rich:popupPanel id="popup" modal="false" autosized="true"
              resizeable="false">
              <f:facet name="controls">
                        <h:outputLink value="#"
                                  onclick="#{rich:component('popup')}.hide(); return false;">X</h:outputLink>
              </f:facet>
                    <!-- POPUP CONTENT GOES HERE -->
             </rich:popupPanel>
      

       

       

       

      Thanks a lot in advance!

        • 1. Re: Looking for something like "showDelay" for rich:popupPanel?
          Siva P Master

          You can call the javascript onmouse over function of "Open Popup" text.from there you can open popup.

           

          <script type="text/javascript">

          function showPopup(popupid)

          {

                var start = new Date();   

                  var end = new Date();

                  var secondsOpen = Math.floor((end - start) / 1000);

               if(secondsOpen == 5)

               {

                    #{rich:component(popupId)}.show();

               }     

          }

             

              </script>

           

          Thanks,

          Siva

          • 2. Re: Looking for something like "showDelay" for rich:popupPanel?
            smoking81 Newbie

            Hallo Siva! Thank you for your answer!

            I just had the opportunity to try out your code but unfortunately I had several problems with it:

             

            1) If I call #{rich:component(popupId)}.show(); within a Javascript function (eg by invoking onmouseover="showPopup('myId');" or "showPopup(myId);"), the popup won't show.

            2) The problem with popupPanel is that by default it gets displayed in the middle of the page, so to correctly position it one must use rich:componentControl. This is the reason I didn't use onmouseover="#{rich:component('myId')}.show();'" for outputLabel directy..

             

            Any other suggestion?

             

            Thanks again! Bye

            • 3. Re: Looking for something like "showDelay" for rich:popupPanel?
              iabughosh Master

              hello smoking81,

              you can do this walkaround :

               

              <a4j:commandButton value="Show" oncomplete="setTimeout('openPopup()', 5000);"/>

              <a4j:jsFunction name="openPopup"

                   oncomplete="#{rich:component('pop')}.show();"/>

               

              regards.

              1 of 1 people found this helpful
              • 4. Re: Looking for something like "showDelay" for rich:popupPanel?
                smoking81 Newbie

                Hi Ibrahim,

                 

                I tried out this:

                 

                <h:outputLabel value="Open Popup" id="label" onmouseover="setTimeout(showPP(),10000);" />

                <a4j:jsFunction name="showPP" oncomplete="#{rich:component('popup')}.show(event, {top:jQuery(#{rich:element('label')}.parentNode).offset().top + jQuery(#{rich:element('label')}.parentNode).height(),left:jQuery(#{rich:element('label')}.parentNode).offset().left});" />

                 

                Result is popup gets immediately (correctly) displayed, that is, the timeout has no effect..

                • 5. Re: Looking for something like "showDelay" for rich:popupPanel?
                  iabughosh Master

                  i think you need to put single quote for setTimeout method parameter :

                  your code : setTimeout(showPP(), 10000);

                  correct code : setTimeout('showPP()', 1000);

                  1 of 1 people found this helpful
                  • 6. Re: Looking for something like "showDelay" for rich:popupPanel?
                    smoking81 Newbie

                    Thank you Ibrahim, this will work:

                     

                    <h:outputLabel value="Open Popup" id="label" onmouseover="setTimeout('showPP()',10000);" />

                    <a4j:jsFunction name="showPP" oncomplete="#{rich:component('popup')}.show(event, {top:jQuery(#{rich:element('label')}.parentNode).offset().top + jQuery(#{rich:element('label')}.parentNode).height(),left:jQuery(#{rich:element('label')}.parentNode).offset().left});" />

                     

                    Unfortunately, this is still not the desired result, since I want to open the dialog only if the user stays X seconds with the mouse on the label (and setTimeout will open it in any case, just with a delay of X seconds)..

                    • 7. Re: Looking for something like "showDelay" for rich:popupPanel?
                      iabughosh Master

                      to achieve this you need some extra code :

                      <a4j:commandButton value="Show" onmouseover="setTimeout('openPopup()', 5000);setFlag(true);" onmouseout="setFlag(false);"/>

                       

                      <a4j:jsFunction name="setFlag">

                           <a4j:param name="showDialog" assignTo="#{yourBean.showDialog}"/>

                      </a4j:jsFunction>

                      <a4j:jsFunction name="openPopup"

                           oncomplete="if(#{yourBean.showDialog}){#{rich:component('pop')}.show();}"/>

                       

                      where yourBean is a bean with Session or View scope and showDialog is a boolean property.