# Other Languages > jQuery >  [RESOLVED] x and y position (outside of jQuery UI Dialog)

## szlamany

Ok - I'm using the jQuery UI Dialog box - which places a "overlay" object over the entire screen - with the dialog box in front of it.

I've attached a click EVENT to the overlay object - and I just clicked the HEADING of a grid that appears through the overlay.

How can I even begin to use that X and Y to find that COLUMN HEADING??

----------


## sapator

If this make no sense you can stop me as i am just guessing right now because i haven't used the Jquery dialog.
So using .offset or .closest().offset you will get the position of the dialog box (or div contains it (?)). After that you can do a subtraction of the page window.height , width or document.height, width to get the relevant position of the dialog within the page and go from there. Just a thought here, not sure it's doable.

----------


## szlamany

Thanks - .offset was where I needed to go!  I looked at .position as I was quitting last night and it didn't seem right...

At any rate - this code works.  Note that I had to use .innerWidth and .innerHeight to account for the padding (but not the borders).  Nice thing about the OVERLAY div is that it covers the entire DOCUMENT - so it's at 0,0 making the clientX and clientY really work nicely!



```
        function graphGrid(strId, objGraph, blnDoReader) {
            blnInGraph = true;
            var wesPC = $("#" + strId);
.
.
.
            var wesCols = wesPC.find(".slick-header-column");
            var wesCol = [];
            for (var i = 0; i < wesCols.length; i++) {
                wesCol = $(wesCols[i]);
                g_graphCols.push({ offset: wesCol.offset()
                                , height: wesCol.innerHeight()
                                , width: wesCol.innerWidth()
                                , name: wesCol.find(".slick-column-name").html()
                });
            }
.
.
.
        function overlayClick(sender) {
            if (blnInGraph) {
                $('.acs-dlg-graph-item').val('');
                for (var i = 0; i < g_graphCols.length; i++) {
                    if (sender.clientX >= g_graphCols[i].offset.left && sender.clientX <= g_graphCols[i].offset.left + g_graphCols[i].width
                        && sender.clientY >= g_graphCols[i].offset.top && sender.clientY <= g_graphCols[i].offset.top + g_graphCols[i].height) {
                        $('.acs-dlg-graph-item').val(g_graphCols[i].name);
                    }
                }
            }
        }
```

And it looks like this!!

----------


## Siddharth Rout

Moved from _XML, HTML, Javascript, Web and CSS_ as per OP's request

----------

