Search within TutorialsPark

jQuery Mobile : Transition Effects


Learn how to use scripts with jQuery Mobile to manage Page Navigation


jQuery Mobile: Changing the Current Page with Scripts

Other than relying on user clicks and toggles, you can use JavaScript to manage Navigation settings

The jQuery Mobile changePage Method can be used change the page displayed when a button is clicked.

The Script listens for the event called tap using bind method. The Event is triggered when the user taps on the screen(or clicks on a device with no touch feature)

Example: jQuery Mobile - Changing the Page Displayed

Give it a TRY! » Note: The change method is called and the ID value is passed for jQuery Mobile Page to Display.


Table : Setting for changePage Method

Name Description
allowSamePageTransition A value of false means changePage request will be ignored where the target is current page.
changeHash A value of true means that the hash fragment in the URL bar will be upadated to the new location.
data To specify the data to be used in the Ajax request used to load a document.
dataURL To specify the URL used when updating the browser URL bar.
loadMsgDelay To set the time in milliseconds after which the loading dialog will be displayed to the user.
reloadPage To force a reloading of a page even if it is already in the DOM of the page container.
reverse A value of true means transition effect will be played in backward direction, default value is false
showLoadMsg To set the loading message to be displayed when a page is requested.
transition To set the transition effect to be used when displaying new pages.
type To specify the method (get or post)

jQuery Mobile: Controlling the Direction of Transition Effect

When the button on the second page is clicked, the direction of the transition effect is reversed by setting the value of reverse to true

Syntax: jQuery Mobile Changing the Default Page Transition Effect

Give it a TRY! » Note: The effect is not that notice able on a static page, and much more pronounced on a dynamic page.


jQuery Mobile: Controlling the Load Dialog

A dialog box displays a statement when the jQuery Mobile loads a document from a remote server for duration longer than 50 milliseconds.

jQuery Mobile allows you to configure and change the period after which the dialog box is displayed by setting a value for loadMsgDelay property.

Syntax: jQuery Mobile Controlling the Load Dialog Box

Give it a TRY! » Note: The page for 100 milliseconds before displaying the message.


jQuery Mobile: Disabling the Loading Dialog

The Dialog Box can be disabled by setting a value of false for showLoadMsg property.

Syntax: jQuery Mobile Disabling the Load Dialog Box

Give it a TRY! » Note: Do not use these setting unless you want to remove all dialog notification.