Essential jQuery Tips, Plugins and Tutorials for Building a Fancy Website

Introduction

I have almost finished a website that I've been working for almost 2 months. It was a web application that requires consistent layout across different browsers, intensive AJAX calls, javascript fanciness, form validation and of course server side technologies such as PHP and MySQL. This project is something new to me because it has a iPhone app that synchronize all the data. Oh well, I didn't write the synchronization module, my colleague did it and I found it's pretty amazing.

I love this project because I can use everything I have learned from jQuery and I discovered a lot of new jQuery skills and knowledge as well, so in this post, I'm going to let you know all the plugins and scripts that I used in this project. You gotta love jQuery, it's so simple and amazingly easy to adapt.

When I look at the website, I look at the total plugins I used and total scripts I wrote, oh, it's 50% 50%! I did write some really complicated one, it's calendar and schedule list that uses AJAX and intensive PHP script that I will not go through it in this post because it's way too complicated and I don't know how to explain it.

One more thing, I always stick with one javascript framework to avoid framework conflict, I know it has the noConflict thingy, I just don't want to go through those avoidable pains.

jQuery Plugins

I encourage code reuse, and sometimes reinventing the wheel isn't that practical and necessary, why? because:

we always have a tight deadline, we don't want to spend extra time rewrite a script and debugging it
we want something well documented, stable and reliable
we want something just work!

jQuery Easing | Demo

If I have to choose top 10 jquery plugins, this will definitely in the list. jQuery comes with simple animation, but with addition of this easing plugins, it gives advanced easing options.
jQuery Tipsy Tooltip | Demo

So, my scenario was something like this, user can upload jpg and pdf but jpg will not have a file name but a thumbnail. If you look at the image above, that's why I need the tooltips. I like this, it's simple and looks really cool. I do have a tutorial for making your own tooltip - Create a Simple CSS + Javascript Tooltip with jQuery
jQuery UI Datepicker | Demo

When it comes to datepicker, I always have two favourite solutions one is the datepicker from eyecon and the latter from jQuery UI. I tried eyecon's solution, but it doesn't work that well when you have multiple instances running in a same page. Luckily jQuery has its own official datepicker and it works really good. I'm amazed by the vast configurations, stability and thoughtful consideration such as when you tab to the textfield, the datepicker will popup.
sIFR | Demo

I seldom use this plugins, it mainly based on designer's request. I used this to display welcome message after user logged in and it's very easy to implement if you have the swf file ready. Not sure how this plugin will perform when most of the browsers support the CSS3 which able to support different font face. We will see.
jQuery Multi File Upload | Demo

Yep, this is one of the clever implementation and I like it. I found several solutions but this one is easy to implement and it has error handling for example check file type! It's exceptionally useful because you want to avoid user uploaded a wrong file type but only get notified after the file was uploaded to the server. So, client side validation can save plenty of times and bandwidth.
fancybox | Demo

There are a lot of lightboxes out there. I choose this because of it's simplicity and design. I only need it to display images, I don't have to use those heavy duty multimedia (video, flash and audio) files support. It support single image, image gallery, inline, iframe and ajax.
LavaLamp for jQuery lovers! | Demo

The elegant and famous LavaLamp :) I tried to use my own lavalamp from article (Simple Lava Lamp Menu Tutorial with jQuery), but because it's not a plugin (and I don't want to convert it into plugin), I found it's hard to implement multiple lavalamp in one page. Yes, I use lavalamp for my submenu, I need 4 instances of lavalamp :) To be honest, My own script gave me a major headache, this is one of the bad example of reinvent the wheel when there is something stable out there :p. So I use this instead, and it works amazingly well! I will create an article for this tutorial

jQuery Script that I've written

I only write a script under several circumstances:

I want something simple and easy to customize
I found the solution, but it's a massive plugin while what I want is just one of the thousand features the plugin offered
I can't find any solutions out there
I need several plugins to work altogether to achieve something
it's fun to re-implement it and I want to know how to do it (provided I have enough times) :)

jQuery Tabbed Interface | Demo

This script would be my all time favourite and it's one of the most famous posts in Queness as well! It displays information and in the same time it can saves heaps of spaces in a webpage. The one I used has a completely different styling though.
Simple toggle view | Demo

It's simple to hide information and show it only if user want to view it. This is my favourite script as well, it simplifies the user interface, and other benefits that we get from tab interface.
jQuery Popup Dialog | Demo

Yes, when you want consistency accross different browsers, a custom dialog box will be the only way to go! That's the reason I have to write a script for it. It's kinda looks like modal windows, but it just display message and that's it. However, I think this would be a very nice script for everyone to use. So I have written one tutorial last week and mixed it with CSS3, no more images and more flexibility! :) sorry IE users will not able to see the coolness of it.

One thing that I learnt

Attach event, plugins to dynamically generated content: I know about the live() method and I have been using it. There are two ways to do this, one is bind the element and the other way which is the easiest and cleanest is using jQuery built-in live() event. The new thing I learn is how to attach plugins to dynamically generated content. This is how you do it:

The scenario: I populate the content based on date and it will have images in it, so it needs tooltip and also fancybox to display images. However, it's not working because the content is dynamically created and fancybox and tipsy are not attached to the link. So, the solution is...

// Dealing with live content, divContainer would the area where your content will load into
// Attach a mouseover so that it will 
$('#divContainer').live("mouseover", function() { 
	
	// Tooltips
	$('a.tooltip').tipsy(); 

	// Fancybox	
	$("a.zoom").fancybox();
		    
});

// For normal click event, we can use this
$('a.cancel').live("click", function() { 
	
	alert('You've just clicked on a dynamically generated link');
		    
});

Conclusion

I'm pretty happy with this website because I have the freedom to choose and implement scripts that I want. The best thing is, I've learned something out of it for example browser layout consistencies, better and more efficient jaavscript code, cleaner and lighter css and html code...

So, the ultimate goal of this post is to share with you all about my experiences I learned from this project and I hope it will help you too!

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.