Obtaining event.PageX equivalent where there's no real event

Question

I'm displaying the datePicker when hovering over an image. The code to fire the event is as follows.

$("#calendar").on("mouseover", function (event) {
  $("#calendar").datepicker("dialog", null, function (date) {
    $("#departureDate").val(date);
  }, options, [event.PageX, event.PageY]);
});

This works as supposed to, because the event mouseover has coordinates where it occurs. Now, I'd also like to fire the event when focusing on an input box, so I added the following code, noticing that the datePicker isn't displayed because the event is null. When I enter [0, 0] as coordinates, I get it to show but in the wrong location.

$("#departureDate").on("focus", function (event) {
  $("#calendar").datepicker("dialog", null, function (date) {
    $("#departureDate").val(date);
  //}, options, [event.PageX, event.PageY]);
  }, options, [0, 0]);
});

How can I obtain the coordinates of the control that is being focused on?
Or even wider - how can I obtain the coordinates of a control that has caused any event?

Maybe I'm not getting it, but are you really just looking for the top and left offset of the input. As a sidenote, what is wrong with the way the datepicker positions itself by default ? — adeneo, Jun 11 '14 at 17:30
#1: Yes, I'm looking for the position of e.g. input box that gains the focus to display the datePicker at. How can I get to where it's placed on the page pixel-wise? #2 I'm getting the datePicker in the middle of my screen . And I wish to control where it's put. Perhaps there's a smarter way to approach it? — Konrad Viltersten, Jun 11 '14 at 17:37
You don't need the mouse position to get the position of the input, just do `$(this).offset()` to get the elements offset ? — adeneo, Jun 11 '14 at 17:38

score 1 · Accepted Answer · answered Jun 11 '14 at 17:40

1

You can use jQuery's offset() or position() for that

$("#departureDate").on("focus", function (event) {
    var offset = $(this).offset(); // or .position() 
    $("#calendar").datepicker("dialog", null, function (date) {
        $("#departureDate").val(date);
    }, options, [offset.top, offset.left]);
});

.offset()

Get the current coordinates of the first element in the set of matched elements, relative to the document.

.position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Note that there is a difference, one gets the coordinates relative to the parent, and one gets the coordinates relative to the document.

answered Jun 11 '14 at 17:40

adeneo

312,895
29
395
388

Hmm... There seems not to be any *offset()* - it's *undefined*... Maybe it's because I lied before? It's *$("#departureDate").on("focus", function (event) { executeCalendar(event); });* and in the function I do the magic. Is the reference to *$(this)* wrong then? – Konrad Viltersten Jun 11 '14 at 17:45
I went *event.target.offsetLeft + 270,event.target.offsetTop]* and now it does what's supposed to. I'm guessing 270 is the width of the picker, so I can put in that, instead. Thanks! – Konrad Viltersten Jun 11 '14 at 17:52

score 0 · Answer 2 · edited May 23 '17 at 12:21

Stackoverflow has the solution. Overall you have to declare global variables(or an object) that are updated whenever the mouse moves. Then access them when the event you desire fires.

You can only get mouse coordinates using mouse events. If you want to capture the position of the mouse, you can use a global mousemove event listener, and store the coordinates in a set of variables, which can later be accessed by the focus function. Example:

var pageX, pageY; //Declare these globally
$(window).mousemove(function(e){
    pagex = e.pageX;
    pageY = e.pageY;
});

$('input').focus(function(){
    console.log(pageX, pageY); // These variables have been defined by the global
                               //  mousemove event
});

Good try but no go. This only refers to **where the mouse is**. A component can gain focus by e.g. tabification or programmatically. I need the coordinates to **where the component is**, not the mouse. — Konrad Viltersten, Jun 11 '14 at 17:35

Obtaining event.PageX equivalent where there's no real event

2 Answers2