Outcomes

  • Learn what transitions are
  • Learn how to set a different transition type
  • Create a custom script file

Resources

  • Data Transitions

Transitions

You may notice while going through your apps, the pages just kind of blink into existence. We’de like to change that.

data-transition=””

Links are the elements that take us places so that’s where we’ll put our data attributes. Go ahead and put data-transition=”pop”. Or set it to whatever transition type you want. The full list is here in the demo page. At time of writing this, the transition page in the version 1.4.2 demos is reading 404, so I linked an earlier version. The transitions from version 1.3.1 are:

  • fade
  • pop
  • flip
  • turn
  • flow
  • slidefade
  • slide
  • slideup
  • slidedown
  • none

Play around with these and see which one you like. Something to notice is that when you hit the back button, the transition will play in reverse. Cool, huh?

Setting A Global Transition

As always, we don’t want to have to manually add data-transition=”pop” to every stupid link in the document, so we’ll just change the default page transition for the entire document. To do this, we’ll have to get a little crafty.

Create a New js File

We are going to write a script that will override the current global page transition (which happens to be ‘fade’). Don’t be intimidated by this. As always, we’ll do this together.

Open up your text editor of choice and create a new document named “custom-scritps.js”. Just as we create a .css file and fill it full of CSS style rules, we create a .js file and fill it with jQuery scripts. jQuery is really just a shorthand way of calling up javascript scripts.

Inside this file, enter the following:

$(document).bind("mobileinit", function () {
 $.mobile.defaultPageTransition = 'slide';
 });

That probably means nothing to you. That there is a jQuery function. If you would like to learn how to use jQuery, you should check out the jQuery track on Codecademy. It’s surprisingly easy to pick up and fun to use. You’ll feel like a magician with all the cool stuff you learn to do. Anyway, back to the lesson.

Link It To Your App

Here is where we start getting a little bit more sophisticated. If you haven’t already been doing so, put the html file for this project into a folder called “project-5″. In the same folder, put the newly created “custom-scripts.js” file. In your index.html, go to the head section where we will be linking our custom script.

You’ll notice that there are two js files linked in the head. The first one calls up the jQuery API and the second calls up the jQuery Mobile API. We are going to put our custom script in between these two. Very important that they be in between.

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="custom-scripts.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

Test Out Your Handiwork

If that broke your site, then you should go back and check to see that there are no problems with your syntax. You may have left out a quote or bracket or something. Otherwise, you’ve got a grand spanking new transition! Notice that when you hit the back button, the animation goes backward.

Project

I think it’s fairly obvious what you should do.

Change the global page transition to something other than ‘fade’.

Send me the link when you’re done.

Look at project 5 on our GitHub to see how I did it.