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

I could not understand what you meant by `Now I'd like to let the mouse cursor become the upper left corner of the popup` Can you elaborate? — Niks, May 10 '13 at 10:01
of course: the popup is a rectangle and I want its upper left corner receive the coordinates of the current mouse position. Thanks! — Federico, May 10 '13 at 10:55
correct me if I'm wrong: You want the user's mouse cursor to point at that corner using jQuery? — Niks, May 10 '13 at 11:05
Because if that's what you want, here's your answer http://stackoverflow.com/questions/1208729/jquery-set-mouse-position-not-cursor-position — Niks, May 10 '13 at 12:17
I just want the popup to appear where the cursor is at the moment the user clicks the h:commandButton. — Federico, May 10 '13 at 12:21
the link you suggested doesn't seem to be what I need.. Maybe you have any other hint? Thanks again! — Federico, May 13 '13 at 11:33
Well, at the moment I cannot help you with a pure RichFaces solution, but as far pure jQuery is concerned, here's a quick sample that I created http://jsfiddle.net/7Wufr/1/ — Niks, May 13 '13 at 13:47

score 1 · Accepted Answer · answered May 30 '13 at 10:45

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

Open rich:popupPanel on current mouse cursor position with jquery

1 Answers1