event.pageYS2C Home « Objects « event.pageY

Event object document position (Y-axis) property.

Description

The event.pageY Event object property, contains the value of the mouse position relative to the top edge of the document (X-axis).

Syntax


Signature Description
event.clientYThe value of the mouse position relative to the top edge of the document (Y-axis).

Parameters

None.

Return

A Number object.

event.pageY Examplego to top of page Top

Contains the value of the mouse position relative to the top edge of the document (Y-axis).

In the example below we show two new messages in the 'p' elements below every time the mouse moves over the image with the id of 'curry1'.

When the mouse moves while over the image, we trigger off the mousemove JavaScript event on the 'image'. This then fires off the $('#curry1').mousemove(function(){}) code which outputs the messages.


$(function(){
  $('#curry1').mousemove(function(event) {
    var pageCoords = '(' + event.pageX + ', ' + event.pageY + ' )';
    var viewableCoords = '(' + event.clientX + ', ' + event.clientY + ' )';
    $('#animspan1').text('( event.pageX, event.pageY ) : ' + pageCoords);
    $('#animspan2').text('( event.clientX, event.clientY ) : ' + viewableCoords);
  });
  $('#curry1').mousemove();
});

a picture of curry

The page coordinates are:

The viewable page coordinates are:

go to home page Homepage go to top of page Top