Difference results using PageY and ClientY mouse positions

Question

My question is similar to Opening JQuery Ui Dialog in MousePosition, however differs in that I want the Jquery Dialog Box to be shown very close to the button which was clicked. My current issue is that when I set the position attribute, the Dialog box is show at the bottom of the page when using

$("button.deleteEmailRow").live("click", function (e) {

    var target = this
    $("#emailAddress").html(this.name); // not imp for my problem
    $("#dialog-email-confirm").dialog({
        autoOpen: false,
        width: 400,
        modal: false,
        resizable: false,
        dialogClass: 'dialogs-only',
        buttons: {
            "Delete Email Recipient": function () {//snip; 
                                     return false;},
            "Cancel": function () {//snip;  
                                     return false;
            }
        }
    });
    $("#dialog-email-confirm")
          .dialog('option', 'position', [e.pageX+30, e.pageY])
          .dialog('open');
});

However, when using the following, it works as intended.

    $("#dialog-email-confirm")
          .dialog('option', 'position', [e.clientX+30, e.clientY])
          .dialog('open');

According to the Jquery website, the first script should work.

When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.

I checked to make sure that values are the same using the following and found that there was a a difference with regards to the Y-coordinates.

var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
alert(pageCoords + '
' + clientCoords);

I have read through QuirksMode, and also played around with some test code which behaves as expected. Why is above producing difference results in my script? Is is related to my HTML structure?

Edit (Updated HTML):


  
    
    
    
    
    
    
    
    
  
  
    
      
      
      
        
          
            Configuration Settings
          
          
            
              Settings // snip
              
                List of recipients for Successful Notifications
              
              
                
                  
                  
                    
                      
                        
                      
                      
                        
                      
                    
                    
                      
                        
                      
                      
                        
                      
                    
                    
                      
                        
                      
                      
                        
                      
                    
                    
                      
                        
                      
                      
                        
                      
                    
                    
                      
                        Add new recipient
                      
                    
                  
                
              
 Cancel
              
                
                  
                    Any changes you have made will not be saved.
                  
                
              
              
                
                  
                    Are you sure you wish to delete this recipient from the list : ?

Tests using Google Chrome v14

Refer to http://jsfiddle.net/SUYA7/ for full sample.

Vlad · Accepted Answer

With pageX/pageY you are using document/page relative position but jQuery dialog expects position relative to the viewport.

Difference results using PageY and ClientY mouse positions

Answers (2)

Related Questions