jQuery Mobile Carousel - Sencha Style

So it has been a common question on the jQuery mobile forums about how one could actually recreate the Sencha style carousel.

I have quickly whipped up a carousel plugin for jQuery and jQuery mobile that uses the iPad jQuery UI touch plugin to capture mobile touch events.

This plugin works and has been tested on Chrome 9.0.597.19 beta (Mac), Safari 5.0.2 (Mac), FireFox 3.6, 4 (Mac)

Demo: http://jsfiddle.net/blackdynamo/yxhzU/
Source Code (Git): https://github.com/blackdynamo/jQuery-Mobile-Carousel

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:

NivoSlider: A jQuery Image Gallery (Slider) Plugin

NivoSlider by Gilbert Pellegrom is an incredible plugin for providing a transitioning slideshow or slider to your visitors. Highly customizable with tons of options and transition effects, this is a must have plugin. The gap between what Flash can do over Javascript is shrinking on a daily basis.

Basic Example:

Fantabulous Auto Tabbing with jQuery

One of the tasks my team was assigned was the ability to implement auto tabbing in a web application. 98 percent of the population would cringe as they read the previous sentence because auto tabbing is not natural. It is a business requirement, and because the business wouldn't budge on the feature, it HAD to be done.

Enter jQuery AutoTab by Matthew Miller

AutoTab is fairly simple, as are most jQuery plugins. It just extends the jQuery namespace adding a function called autotab. Apply this method to any text box, enter target, previous and format and the plugin does the rest for you.

Without copy and pasting the details of the plugin, click here to see the documentation.