Open rich:popupPanel on current mouse cursor position with jquery

Question

The following code will open a rich:popupPanel vertically aligned with and directly below the h:commandButton:

<h:commandButton value="Open popup" id="openBtn">
    <rich:componentControl event="click" target="myPopup"
        operation="show">
        <a4j:param name="event" value="event" noEscape="true" />
        <rich:hashParam>
            <a4j:param noEscape="true" name="top"
                value="jQuery(#{rich:element('openBtn')}.parentNode).offset().top  + jQuery(#{rich:element('openBtn')}.parentNode).height()" />
            <a4j:param noEscape="true" name="left"
                value="jQuery(#{rich:element('openBtn')}.parentNode).offset().left" />
        </rich:hashParam>
    </rich:componentControl>
</h:commandButton>
<rich:popupPanel id="myPopup" modal="false" autosized="true" resizeable="false" .... 

Now I'd like the popup to appear where the cursor is at the moment when user clicks the <h:commandButton> , but I couldn't find out how to do this (unfortunately I don't have any practice with jquery). Can you please help me?

Thanks

Answer 1

maybe you should try this:

<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('openBtn')}.parentNode).offset().top  + jQuery(#{rich:element('openBtn')}.parentNode).height() - $(window).scrollTop()" />

This sets the value of "top" to the position of the element subtracting the vertical position of the scroll bar.

jQuery scrollTop()