jQuery UI Auto Complete

Written By: Editor - Feb• 13•11

Although jQuery UI is an exceptional set of solid tools and great at theming your jQuery apps into your sites, I’ve done very little with it. However, after some frustration with an auto-complete snippet I’ve been using, I decided to look around for better options. jQuery UI has a solid example and I came upon a funny little movie database plugin that uses it, one that has the features I desire for my app. Tada! instant tutorial on how to implement a better auto-complete.

Yes, I know that this is really a plugin, but I’m not interested in looking up movie titles. Few people will need this plugin. But the source is free and open and we can get mcuh more out of it than just movie titles if we use it as a learning experience. The way it is presented on Tutorialzine does cover using the TMDb API, but we can ignore that and envision using our own data or any other API we might like (e.g. Twitter? No! Not another Twitter app!)

A Simple Movie Search App w/ jQuery UI

Posted in Better Tutorials | Comments Off

Rocking and Rolling Rounded Menu

Written By: Editor - Feb• 12•11

rocking and rolling closed

Today I was searching for a sleek nav bar drop down menu solution, something that hasn’t been done to death. The site I will be using it on is not very important, but it doesn’t need to be hum-drum, either. What I found is something that I’ve seen before but have never used… or seen used by others, actually.

rocking and rolling open

The Rocking and Rolling Rounded Menu is a drop down type solution without dropping down. Instead, the little round icon grows a comet tail, in which are links to the category the icon represents. As it opens, the round icon rolls to the left and the comet tail appears behind it. It is very understated and has the benefit of staying in one horizontal space instead of dropping down to overlay content. It is not a spectacular, in your face effect, but it is memorable and sleek, and almost cute… without being cutesy.

Posted in Better Plugins | Comments Off

Isotope Layout Plugin

Written By: Editor - Feb• 11•11

This plugin has generated a lot of buzz on Twitter, mostly because the demo is pretty awesome. I have not heard of anyone actually using it for something, yet, but I can see the applications. A good amount of thought would need to be put into the site ahead of time, but being able to use the resorting features of this plugin would make it a worthwhile exercise.

Obviously, the inspiration for this plugin comes from the periodic table. Try that demo and see how the sorting and ordering and viewing by family works. Now imagine doing the same thing with an image gallery! Say you have a hundred thumbnail images and you can categorize them into something like landscape, portraits, still life, sports, etc. Now you can show all or show a category or show by year or by subject or by photographer, and all of those options are in a simple nav bar or two and each click of the buttons rearranges the images before your eyes. Then each thumbnail image could be a link that opens the full-sized image in a modal. Zowie. You just gave some serious punch and some great usability features to your gallery. Sweet!

Go try Isotope

Posted in Better Plugins | Comments Off

Drag ‘n’ Drop File Upload

Written By: Editor - Feb• 10•11

Taking a cue from Google, Sebastian Tschan has recently offered up this interesting plugin with great features, including fallback for old browsers. There is a progress bar, multi-file uploading, compatibility with App Engine, PHP and Ruby back ends, customizable look and feel with jQuery UI, etc. The documentation and source code are there, as is bug tracking and support. This is a great example of going the extra mile to provide a better user experience.

jQuery File Upload Demo

Posted in Better Plugins | Comments Off

An Intensive Exploration Of jQuery

Written By: Editor - Feb• 07•11

Just about one year ago, Ben Nadel from the Kinky Solutions blog posted a free video entitled An Intensive Exploration Of jQuery, which is an excellent tutorial that is over an hour and a half long and covers every important facet of the library. It took me several short sessions to get through it and even longer to digest it all. Today I went looking for it again because I definitely need a refresher after spending several months using ExtJS more than jQuery. It is still pretty fresh. The Ajax stuff has changed if you are moving to 1.5, but most applications are still anchored in 1.4 and will be for awhile.

Ben has done a great job splitting the presentation up into small segments so you can take it in a bit at a time. Definitely worth bookmarking, both for yourself and to recommend to others.

Posted in Better Tutorials | 1 Comment »

Free eBook on Design Patterns

Written By: Editor - Feb• 06•11

This is not new, but it is worth reminding you that you need this. If you are going to work with jQuery and/or Javascript for more than a week then you need to learn yourself a thing or two about design patterns as they apply in this arena. Thankfully, someone has not only written a great primer on the subject, they’ve made a free eBook out of it. Addy Osmani will be mentioned on this site many times. He is very good and he is quite prolific. Go right now and grab a download of  Essential JavaScript And jQuery Design Patterns, then set aside a few snippets of time to dive in. You may want to print this one and carry it around with you for awhile, since it is kind of a big gulp for one sitting. You may want to have it handy to refer to when you are re-factoring your code or considering a new solution. Trust me, this will make you a better coder all around, not just in Javascript.

Posted in Better Tutorials | Comments Off
<<34567>>