I was late to the jQuery party. Little over a year ago I started learning about it. Three months later I developed my first plugin, TagDragon. Today, it is hard to image my development life without jQuery. This post will give an overview of where and how I use jQuery in my pet project JungleDragon.

Form validation

Form validation has been implemented using Javascript for well over a decade. jQuery makes it a whole lot easier, especially using this plugin. With this plugin, bullet proofing even the most complex form becomes a breeze. I even wrote a dedicated article about it: Advanced jQuery form validation.

Autosuggest

JungleDragon allows users to tag their images. In order to allow for the reuse of tags, I needed an autosuggest control that lists tag "candidates" as the user types along. I could not find a component that matched all my needs, therefore I created my own: TagDragon. In just one line of code, you get a suggest control like this:

Developing this plugin really taught me jQuery quite well and boosted my usage. The biggest strength of this plugin is its simplicity and versatility. For example, TagDragon is not only used for entering tags, it is also used to browse/search for tags:

Tooltips

Wherever I feel a JungleDragon element requires some explanation, I apply a rich tooltip using the qTip library:

Page messages

It is common for web applications to communicate to users through messages, for example to indicate the success (or error) of an action, or to show a tip. In JungleDragon, I implemented this using jQuery as a narrow top bar that slides down with the message, if there is any. Clicking on it slides it down again:

Custom animations

Everytime you earn karma in JungleDragon, I run a custom developed animation. There are three events:

• Earning or losing karma
• Promoting or demoting to a new level
• Promoting or demotign to a new class

This post shows you the animations in action using a video.

Comment system behavior

The JungleDragon comment system has a lot of jQuery behavior coded:

• Inline reply form that slides down or up
• Ajax vote on a comment (I do all Ajax using jQuery)
• Expand/Collapse nested replies
• Toggle comment
• Comment body validation

Hotbox

Again one of my own "inventions", a hotbox is a context-sensitive dialog menu that appears when holding the space bar. You can see it in action here.

The simple things in life

There is a ton of jQuery in JungleDragon for smaller things:

• Realtime stylesheet switching
• Confirmation dialogs
• Open a page based on a row hover in table
• Button labels that dynamically change based on the selection made by the user
• Selecting all text of a textarea when clicking on it

The difficult things in life

Saving the best for last, this is by far the most sophisticated and complex use of jQuery in JungleDragon. In fact, it is a mix of the jQuery and Raphael libraries. It concerns n interactive graph that plots a user's activity stream and their karma awards:

You have to see this in action to appreciate it. Upon hovering the plot points, it tells you what karma you earned there and why. It works in IE too. Soon I will write a dedicated post to detail this component.

Conclusion

As I proceed in JungleDragon development, surely I will use even more jQuery. My conclusion is that if you do web development, you need to learn jQuery. I've written an article about it before: 7 reasons why you really should learn jQuery.

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.