10 Exceptionally Cool Things You Can Do With jQuery

Introduction

jQuery is without a doubt an incredible addition to the JavaScript language. Don't get me wrong though, I have absolutely no qualms with prototype or any of the other libraries out there. jQuery just makes sense to me, so I use it often. What matters at the end of the day is that there is a system that helps you, makes sense to you, and that you enjoy using. Some people prefer PHP over ASP, C++ over JAVA, Coffee over Tea. I find that jQuery presents a simple DOM manipulation tool that's simple to use and very powerful. At the end of the day, JavaScript is one of those languages that is not as reasonably simple to understand as PHP or ASP is. It helps to have that jQuery DOM doing most of the work, leaving you to make sure it all looks good.

In this article I am going to show you a few simple things that you can do with jQuery to make your websites or application have a little more punch, style and more importantly, functionality. It is always important to remember that any plugins or additions MUST result in improved functionality more than anything else. Having something awesome on your webpage just because it looks cool will bore the user very fast. What I am going to show you here are a few things I have used in the past year or so. I hope, by the end if this article, that you will be inspired and at least have a little fun.

Let's begin.

1) AJAX!

I know, I know. It's old-hat. It's boring. I still love it. The simplicity behind not having to reload the page is awesome. The functionality in being able to process a form submission without reloading is great. The way a tabbed interface can load content so smoothly you'd think it was almost impossible. That's AJAX. It's real, it's cool, and it's here to stay - I think the boys at Facebook have proven that. It's on the top of my list because it makes things simple, every time. Do I really need to reload the page because I have decided to delete this message? NOPE. AJAX will simply reload the div and all is well with the world. Check it out at http://docs.jquery.com/ Ajax.

2) Accordion

I cannot help it. There is something about clicking on a link and the content comes out below. I might be crazy, but its FUN! And the web is supposed to be fun! Just because half of these things were created by Star-Trek Conventioneers with IQ's greater than my Farmville Score and WAY too much time on their hands does not mean that these things are not supposed to be fun. You know what makes me feel like I have done my job? When I show a client his/her website/application for the first time and their eyes light up when they see it actually working the way they have been dreaming about for the past year. Then I know I have done my job. jQuery accordion ALWAYS wins hands down for functionality, style and sheer show-off power without a trade-off. http://docs .jquery.com/UI/Accordion is the place to get it.

3) Color Gradient Divs

Ok, so we all know that to get a gradient (fade) you need to use images, right? Well, uhm. NOPE. You just need jQuery. The boys at davidwees.com have come up with an impressive and pretty simple system for creating gradient divs right there in your back yard, without images. I like this a lot and have used it on occasion. I find you do not want to make it obvious or let it stick out. Less is more and blending in is better than jumping out. You can download this at http://plugins.jquery.com/project/elementgradient.

4) Background Canvas

Along with HTML 5 comes awesome canvas functionality that have guys like me salivating at the thought of the end of the world for FLASH as we know it. While that probably won't happen though--I believe there is a place for Flash, albeit NOT on a web-page--at least not for a few decades, the promise of HTML5 has kept a few clever guys busy way into the dark hours of the night conjuring up jQuery magic when they probably should have been sleeping. That said, what has emerged is a new way to look at canvas: using jQuery and CSS to accomplish all layout, corners and curves on a web page. No images, tricky divs or tables. Pure CANVAS functionality as a precursor to HTML5 will give you gooseflesh the first time you use it. It's that cool. Grab this fromhttp://plugins.jquery.com/project/backgroundCanvas.

5) Form and Checkbox Restyling

Am I the only person who wonders if the guy who decided what the default look and feel of a checkbox and radio button should look like, should be properly punished? Come on, that could not have been the best they could have come up with, was it? And it's about as easy to style as a dodo in Egypt. However, some nice guys playing with jQuery actually took some time to try to make all this look a little better. It might not work for you EVERY TIME, but I have used it at least once and it impressed a lot of people without removing functionality. That's a lot said. Grab this one at http://www.protofunc.com/scripts/jquery/ checkbox-radiobutton.

6) Replication Tables

Let's put it mildly: I hate tables. They can never really do exactly what I want them to, all of the time, and styling them with CSS gets a bit hairy sometimes. However, more than that, I hate trying to emulate tables with divs. The "float: left;" issues can get a bit much when divs are all different heights and changing with every pageload. This is where Equal Heights jQuery plugin really shines. Basically, it takes your divs and gives them all the same height, as the following two pistures show. The first one is before we applied equal heights, and the second one, after. I'm sure you will agree that the effect not only saves you time, it probably saves you pain and a few hairs you don't need to pull out this week. Get this one at http://plugins.jquery.com/project/equal- heights.

7) Max Characters

This is a cool little feature that tells users how many characters they can still type inside a text area. It may seem trivial to you but trust me, people get very annoyed when either validation fails or messages or data is truncated because text is too long. People need to know how much space they have to say something. Give them that, and they will be happy. Grab this one at http://plugins .jquery.com/node/10772.

8) Pagination

Pagination is a pain. I have done it in 1000 different ways, PHP, AJAX, JavaScript. It's boring and it's a time waister. But pagination is important. If you are dealing with a system with relatively few entries (less than about 500 per page) then jQuery pager is perfect for you. With one line of code you get rid of your paging qualms forever, it's that simple. Important though, is to remember that JavaScript pagination requires an entire query to load, and then it only displays the relative results when it has to. But more than 500 results is going to make your page slow, so be warned.

9) Tooltips

You may be wondering why tooltips are here at all, but they have saved my life on more than one occasion. The ability to set a hover with actual meaningful and DYNAMIC description properties means developers like myself not only get to have fun, we get things done fast, because jQuery does all the work. The effect is extremely simple and effective, without having to recode the world in order to get the effect working. This gives guys like me, who tend to code slower as soon as JavaScript enters a page, time to worry about functionality and ignore the confusion. When looking at this image, take a moment to look at how simple the code is to implement: it's all like that with jQuery. find this one at http:// jquery.bassistance.de/tooltip/demo.

10) Layout

There are some awesome layout manipulation plugins out there, and I must say jQuery has some wonderful ones. I use one in particular a lot, simply because it allows you to have a collapsible left column that actually works properly. The image below shows how insanely complex such layouts can actually be, although I believe that too much layout on a single page would definetely detract from the purpose of the page, they obviously just did this for show. My point is use these things gracefully! Find this at http://layout.jquery- dev.net

Conclusion

As you have seen here, there is a lot of fun involved in jQuery, and when you do it right, a lot of functionality hits the mark, which is what worries me the most. You will also have noticed that I did not choose the flashy, splashy cheap magic trick to show you--there are millions of those in jQuery--but I have shown you things that you should see on many websites around the net. Remember, flashy works once, functionality lasts forever.

I hope you liked it!!

If you liked my post then,

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!