10 Über cool jQuery Plugins

Posted on September 25, 2007 
Filed Under JQuery, Web development

I have been using jQuery for a while now to add a little flair to forms and features of the sites we develop here at Invisible Window. jQuery is one (an in my opponion, the best) of the JavaScript libraries that have sprung up to simplify and enhance JavaScript development. jQuery allows the developer to “traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.”

In addition to the core library, there are a host of jQuery plugins available each enhancing jQuery’s features. Here are 10 I think you should take a look at.

  1. jQuery Dimensions Plugin - The dimensions plugin extends jQuery with dimension centric methods. It has been rigorously tested and gives accurate results cross-browser. Methods like width and height are extended by dimensions to enable you to get the width and height of both the window and the document. Methods like offset and position help you find the coordinates of an element on your page. (http://brandonaaron.net/docs/dimensions/)
  2. jQuery Calculation Plugin - This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method by allowing you to interact with all types of form field elements. (http://www.pengoworks.com/workshop/jquery/calculation.plugin.htm)
  3. jQuery Tablesorter Plugin - Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell. (http://tablesorter.com/docs/)
  4. jQuery Tooltip Plugin - Display a customized tooltip instead of the default one for every selected element. The tooltip behaviour mimics the default one, but lets you style the tooltip and specify the delay before displaying it. In addition, it displays the href value, if it is available. (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/)
  5. jQuery Simple Star Rating Plugin - This is a jQuery plugin for star rating systems much like Netflix or GMail. (http://examples.learningjquery.com/rating/)
  6. jQuery Stylesheet Switcher - The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet. (http://www.kelvinluck.com/article/switch-stylesheets-with-jquery)
  7. ThickBox - ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. (http://jquery.com/demo/thickbox/)
  8. jQuery date picker plugin - A flexible unobtrusive calendar component for jQuery. (http://kelvinluck.com/assets/jquery/datePicker/v2/demo/)
  9. jQuery Tabs Plugin - Quickly, and easily, build an accessible and unobtrusive tabbed navigation interface for your web site. Provides predefined (slide and/or fade) and custom animations on tab selection, callback on tab selection, autoheight, bookmarking. Use with the History/Remote plugin to fix the back button. (http://www.stilbuero.de/2006/11/05/tabs-version-2/)
  10. pager jQuery plug-in - Unobtrusively paginate large pieces of content into smaller chunks. (http://rikrikrik.com/jquery/pager/)

This is by no means an exhaustive list and the plugins listed are in no particular order. I feel they should be enough to show the possibilities that open up when you include jQuery into your development and wet your appetite for more.

Happy surfing!

Highlighting Forms Using JQuery

Posted on April 26, 2007 
Filed Under JQuery, Web development

One of the things that I like best about working in the web industry is the speed at which it changes. Granted, sometimes it seems new technologies are coming out so fast that it’s hard to keep up, but that challenge is a fun one.

AJAX (Asynchronous JavaScript and XML) is one of the hot buzz words in the web industry now, and it’s been one of our major distractions lately. In a nut-shell AJAX lets a web page do “stuff” without reloading.

There are several libraries that facilitate authoring AJAX and the one we really like is JQuery. In this post we will look at how to change the border colors on an input field when a they gain focus (when they are being typed in). Here’s a visual example.

The code that makes up our form is pretty simple:


Name:
Email:

Comment:

To change this form, you’ll first need to do download the current JQuery library and upload it to your server. Personally I like to put all of my external .js files in their own folder (js) in addition to some good practical reasons for doing this (caching, download time, etc.), it helps keep things nice and organized. So save the JQuery library into your js folder as jquery.js.

In order to use the functions contained in the JQuery library, you’ll need to call the file. In the head of your document, place the following code:

The JQuery library is now ready for use. Now we will write a few lines of javascript that will tell the library what we want to do. First we need to tell the browser that we’re using javascript, this is done by including these lines:

Next we have to initialize the JQuery library by adding these lines to our javascript code:



This basically says “when the DOM (Document Object Model) is ready - do stuff. What stuff…this stuff



These three sections basically do the following:

  1. Set the borders on all input, textareas, and selects to #999 (light gray)
  2. When we put our cursor into a field (focus) change it to #EE9B00 (the orange from our logo)
  3. When we leave an input field (blur) set the border back to #999

That’s it - complex DOM scripting is so easy with JQuery.

More detail of what these JQuery lines can be found here.

Comments