Latest web development tutorials
 

jQuery pagebeforehide Event

< jQuery Mobile Events

Example

Alert some text when the page we are transitioning away from, is about to be hidden:

$(document).on("pagebeforehide","#pagetwo",function(){
  alert("pagebeforehide event fired - pagetwo is about to be hidden");
});
Try it Yourself »

Definition and Usage

The pagebeforehide event is triggered on the "from" page, before the transition animation starts.

Related events:

  • pagehide - Triggered on the "from" page, after the transition animation completes
  • pagebeforeshow - Triggered on the "to" page, before the transition animation completes
  • pageshow - Triggered on the "to" page, after the transition animation completes

Note: This event is triggered every time a page transition starts/stops.

Syntax

To trigger the event for all pages in jQuery Mobile:

$("document").on("pagebeforehide",function(event){...}) Try it

To trigger the event for a specific page:

$("document").on("pagebeforehide","page",function(event){...}) Try it

Parameter Description
function(event,data) Required. Specifies the function to run when the pagebeforehide event occurs.

The function has two optional parameters:

  • The event object - which can contain any jQuery event properties (e.g. event.target, event.type, etc.) See jQuery Events Reference for more information
  • The data object - contains one property, the nextPage, which returns the page we are transitioning to
page Optional. Points to the id of the page to specify the pagebeforehide event for. For internal pages, use #id. For external pages, use externalfile.html.

Try it Yourself - Examples

A demonstration of related events
A demonstration that shows when pagebeforeshow, pageshow, pagebeforehide and pagehide fire.

The event object
Using the event.timeStamp property.

The data object
Using the nextPage property to return the page we are transitioning to.

< jQuery Mobile Events