Your Customers are Mobile, you will be too …

jQuery Mobile: Set Page Transitions for all Pages

In this quick tip we will show you how to set the transition type for all of your pages globally when using jQuery Mobile for mobile Design. This will save us from having to set the transition type on all our buttons and pages. So we end up with less work to do and if we need to change our transition because a platform we are designing for doesn’t support it we can quickly and easily change it.

Like I said this is a quick tip as all we need to do is add a short piece of code to the head of our HTML file.

<!--apply global settings-->
 <script type="text/javascript">
   $(document).bind("mobileinit", function()

This simple section of javascript in our head needs to be place BEFORE we call our javascript files. Placing this code after we make our jquery mobile file call it will fail to work. So ensure it is placed before this line:

<script src="jquery-mobile/" type="text/javascript"></script>

Personally I place it before all calls for javascript files to ensure that nothing in any of the other files is going to interfer with it.

For what we are doing this line is the most important part of the code:


This line of code is the code that sets the global transition setting for each of our pages. We simply replace the “none” with any of the available transition settings. The list of available transitions is available at the top of this page:

This page also includes full example of how each page transition works.

If for any reason you have a situation where you still need a different transition to the rest of the app you can still override this on the link or button that you want the second transition on as would any other time.

Hope you found this tip useful and see you again soon.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: