data-position=”fixed” on the footer stops the footer from appearing in the middle of the page, but prevents it from being “pushed” down with longer content:
The trick to make this work is to use the same calculation from the original article to get the available space of the content, but instead of setting the height of the content DIV, we set the CSS min-height attribute. Continue reading
In Part 1 we used the Animate.css library of CSS animations as transitions for jQuery Mobile (jQM) pages, popups, and dialogs. In Part 2, we will write our own KeyFrame animation CSS in order to have a unique/one-of-a-kind transition.
You will remember from last time, that to use a CSS transition with jQM, we create a class name for the transition and point that class at a named CSS animation. We can use different animations for the page entering, leaving, and the 2 reverse directions. An animation in CSS is created by defining a set of transforms at various points during the transition duration called keyFrames. Each KeyFrame’s time is defined as a percentage of the animation duration, so the simplest animations can be defined with only 2 KeyFrames: 0% – start transform, and 100% – end transform. The browser is responsible for figuring out how to animate the transform values between the KeyFrames. Continue reading
The jQuery Mobile (jQM) framework includes a set of CSS-based transition effects that can be applied to any page link that uses Ajax navigation. jQM also provides CSS hooks so that developers can easily include custom CSS transitions.
In this post we will look at using animations found in the popular animate.css library as jQM page transitions, and in part 2, we will develop a custom 3d transition from scratch.