jQuery Mobile - Programmatic Page Transitions Pt. 2

In my post jQuery Mobile - Programmatic Page Transitions Pt. 1 I answered a question in how one can programmatically navigate using jQuery mobile and select their page transitions. Now that jQuery Mobile 1.0a2 is out, some additional methods and utilities have been added.

You can find the additions here: jQuery Methods and Utilities

You no longer need to create a dom element and click it to cause a page navigation with a specified transition. The jQuery team has provided us with a new method to cause a page navigation.

jQuery Mobile - Swipe Up, Down, Left, Right

jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown:
Note: I have now moved the plugin to GitHub so if anyone wants to collaborate, they are more than welcome.

jQuery Mobile - Programmatic Page Transitions Pt. 1

Working a few weeks now with jQuery mobile, I find myself loving it more and more. Today I came across an issue though. How would I mimic the action clicking a link. Why would I want to do this do you ask? Well in jQuery mobile, you can specify the link and the transition you would like to navigate to as long as it is an element on the page. jQuery mobile then handles the click on those buttons and links to make sure that they cause the proper transitions. What if you don't want a button to cause the transition?

With some initial digging, I came across the fact that jQuery mobile watches the hashchange event. This event is fired when the location.hash ends up changing. I found this and was like perfect!



Voila! Programatically changing pages and jQuery navigating for me. Unfortunately this wasn't good enough. How do I make page transitions happen other than "slide"?

More digging occurred and a simple solution arose. jQuery mobile actually exposes a new method called ajaxClick. This is a jQuery.fn extension method. How we can use this to solve the problem of programatically transitioning is as follows:

How To: Remove Halo/Highlight Around Dom Elements

Now that I have started developing mobile applications and jumping into the jQuery Mobile space, I have really started to notice an irritation for the Halo/Highlight around elements on an Html page.

jQuery Mobile makes good use of this feature, but sometimes it appears when you do not want it to. To remove glowing halos or highlights from elements on the dom, use the following simple css:

selector{
outline: none 0px;
}