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

[smoking81]

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!

[sivaprasad9394]

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

[smoking81]

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

[iabughosh]

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.

[smoking81]

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..

[iabughosh]

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

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

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

[smoking81]

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)..

[iabughosh]

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.