jQuery Dialog Pop outs - positioning issue when scrolling down the page

Question

After getting a good start here: New google calendar, "pop-out" events, if they don't fit in the defined area , I now have some further questions and issues to hammer out.

Here is the jQuery Code:

// Google-Calendar-Style pop-outs
        $(function() {
            $(".inner").each(function() {
                var inner = $(this);
                var popout = inner.clone().removeClass("inner");
                popout.dialog({
                    autoOpen: false,
                    draggable: false,
                    resizable: false,
                    width: 150
                });
                var plusMore = $("<div><a href='#' onmouseover='this.style.cursor=\'pointer\''>See More...</a></div>");
                plusMore.insertBefore(inner.find("> div:eq(1)"));
                plusMore.click(function() {
                    var pos = inner.offset();
                    popout.dialog("option", {
                        position: [pos.left - 6, pos.top - 4]
                    }).dialog("open");
                });
            });
        });

Here is the CSS related to this:

<style type="text/css">
        .outer {
            height: 45px;
            overflow: hidden;
        }
        .inner > h1 {
            margin: 0;
            font-size: 1em;
        }
        .ui-widget.ui-dialog {
            font-size: 1em;
            font-family: inherit;
            padding: 2px 5px;
        }
        .ui-dialog div.ui-dialog-titlebar {
            padding: 0;
            background: transparent none;
            border-width: 0;
        }
        .ui-dialog div.ui-dialog-content {
            padding: 0;
        }
    </style>

Here is the HTML (note, I actually use Smarty to loop some arrays here, but this is the base... the inner most <div> is repeated with each loop (user) (so there is one outer and one inner, per cell):

<div class="outer"> 
  <div class="inner">
   <div>
       <a href=Tenant.php" style="text-decoration:none">{$tenant.firstName} {$tenant.lastName}</a><br>
       &nbsp;&nbsp;&nbsp;<a href="Message.php">Send Message</a><br>
    </div>
  </div>
</div>

Here is a screenshot with two problems I'd like to fix.

1. When I scroll down the page (even one tiny bit), and then click "see more..." - the pop up is not in the correct location. As seen in the image below, it should have been over the very first row/box - but instead it dropped down a lot lower. Don't be fooled and think it ended up aligned to box #4 - that is just a coincidence, because even the last entry in the table will have the box the same amount lower on the screen - and NOT aligned. There is NO issue if my scroll bar is at the very top of the page.

2. I would like to get rid of the space for the top title. I just want the list of users and links to begin at the top - on the same row as the pop-up box's "X."

Answer 1

jQueryUI positions dialogs relative to the viewport instead of the document, so you need to account for the scroll in your calculation. Use $(document).scrollTop():

popout.dialog("option", {
    position: [
        pos.left - 6 - $(document).scrollLeft(),
        pos.top - 4 - $(document).scrollTop()
    ]
});