Six Revisions » JavaScript

The Power of jQuery with Ajax

Jacob Gube — Fri, 25 Jun 2010 16:35:15 +0000

As the web evolves, new technologies are emerging and uniting in remarkable ways. The combination of Ajax and jQuery, in particular, is one of the most powerful unions to date.

The purpose of this article is to give a brief and generalized overview of both Ajax and jQuery, and also discuss how jQuery has made Ajax development easier than ever before.

What is Ajax?

Since its conception in 2005^[1], Ajax (Asynchronous JavaScript and XML) has changed the web as we know it today. It’s helped websites evolve into Rich Internet Applications (RIAs) by allowing web pages to make direct requests to web servers without reloading the page. This capability is vital in replicating the rich user experiences achieved in client applications.

Ajax in Practice

Let’s say that you have a login form for your web application. To ensure that the provided login name and password entered by the user is a match without using Ajax, your web application would have to load a whole new web page that shows an account screen if the login was successful, or show an error screen if the login failed. This is the old way of handling logins.

A more savvy approach to this problem would be to check if the login and password is correct using Ajax.

Here’s how Ajax would work in this instance: Once the user has typed in a login name and password and submitted the login web form, you could have a JavaScript function that invokes an Ajax call that sends two parameters — the login name and password.

The web server (usually through a server-side script/language such as PHP) takes the two parameters and then queries your user database to see if there is a match.

If there is a match found in your database, then the web server can return a success flag. Otherwise, the web server could return an error message.

Next, you would then have a JavaScript function that accepts the Ajax response. If the response is successful, it could use window.location to send the user to their account screen.

If the response contains an error message, the application can display the error on the screen without ever reloading the page.

The main thing to take away from this is that you don’t have to reload an entire page just to handle username/password verification, making your web application more responsive and, if the page is heavy, saving you some significant bandwidth.

What is jQuery?

Released in January of 2006^[2], jQuery is a cross-browser JavaScript library designed to simplify the client-side script of HTML.

Used by close to a million websites^[3], jQuery is the most popular JavaScript library in use to date.

jQuery makes it easy to handle DOM objects, events, effects and Ajax, automatically takes care of JavaScript leaks, and has countless third-party plugins.

The Problem with Ajax

Despite its revolutionary impact on the web, Ajax can be difficult to use even for veteran developers.

People will usually create their own custom functions to handle Ajax calls so that the functionality can be reused across a web application. This can become very tedious when a web application makes use of different types of Ajax calls — such as the ability to handle both synchronous and asynchronous calls — or the ability to handle different response formats such as string messages, HTML, CSV, XML, JSON, etc.

As a professional web developer, I’ve personally spent countless hours building custom methods to handle Ajax calls.

Traditional Ajax calls usually take on the following form:

function httpRequest(id) {
  if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari
    http=new XMLHttpRequest();
  }
  else { // code for IE6, IE5
    http=new ActiveXObject("Microsoft.XMLHTTP”);
  }
  http.onreadystatechange=function() {
    if (http.readyState==4 && http.status==200) {
      response = http.responseText;
      // do something with response
    }
  }
  dest=”servlet.php?id=” + id;
  http.open("GET”, dest);
  http.send();
}

If your web application only uses one Ajax call, it’s not that big of a deal to implement. The problem occurs, however, when your web application leverages lots of Ajax calls and you try to break the code apart to make it reusable.

The idea of Ajax is to send a request to some web server, wait for a response, and update your HTML page. It would be convenient to create a custom function like httpRequest() that takes two parameters — a request URL and a response function — that could be reused throughout your system.

Once you start setting this up, however, you’ll immediately see that the simple task of making an Ajax call suddenly becomes a nightmare when you try to construct response function evaluations using eval() and figuring out how to make your new function handle synchronous calls, asynchronous calls, and different response formats.

At the end of the day, the simple idea of creating a custom httpRequest() function quickly turns into a big project.

The other advantage of jQuery is that it has additional Ajax functions and methods that you can use, which can further reduce development and debugging time.

Hello Ajax. Meet jQuery.

Among other advantages, one of my favorite features of jQuery is its ability to leverage Ajax with very little effort. To make an Ajax call, you can do something like this:

$.Ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

If you’ve developed Ajax applications before without jQuery, you’ll immediately see the value here. jQuery has put all of the properties of Ajax into one simple API. You can control everything including the url, cache, success function, data type, and even synchronization, all from one neat declaration. It’s nothing short of beautiful.

Get Started with Ajax + jQuery

If you’re not using a JavaScript Web Development framework like jQuery or MooTools yet, and you’re planning on creating responsive web applications, you should leverage these awesome libraries.

For jQuery, the following list highlights some tutorials you can check out.

References

About the Author

Eric Rowell is a professional web developer and designer who is fascinated with everything related to the web, including RIAs, emerging technology, and social media marketing. He is the Founder and Chief Editor of Web Krunk and loves HTML, HTML5, CSS, JavaScript, Ajax, jQuery, Flash, PHP and Java. You can follow him on Twitter at @webkrunk.

20 Fresh JavaScript Data Visualization Libraries

Jacob Gube — Sun, 17 Jan 2010 14:05:40 +0000

There are plenty of JavaScript libraries out there for rendering your otherwise plain and boring numerical data into beautiful, interactive, and informative visualizations. The beauty of using JavaScript for data visualization is that, if created correctly, your data will be highly accessible (usually via HTML tables). A long time ago (2008), I wrote about JavaScript solutions for graphing and charting data and this article revisits the topic with twenty more JavaScript libraries that you can use to bring your data to life.

1. Highcharts

Highcharts is one of the most promising JavaScript charting libraries to hit the scene recently, with its large array of features including seven charting types (line, pie, and bar among them), the ability to zoom in and out of charts, and tooltips for offering more information about data points. The library has many options for customization and they’re well documented on one page for easy referencing.

2. gRaphaël

gRaphaël is a charting library based on Raphaël, a vector graphics drawing JavaScript library. The library is divided into sub-libraries so that you can just download the type of chart that you’re interesting in creating. With the main library, g.raphael.js, at only 12KB and sub-libraries between 4KB to 8KB, this can be a lightweight but fully featured JavaScript charting solution for web developers.

3. JavaScript InfoVis Toolkit

JavaScript InfoVis, a charting library influenced partly by MooTools, is a robust and excellent solution for data visualization. It’s modular (just like MooTools) so that you can include just the parts you need to keep your pages light. It has animation effects capability to captivate and engage your users, plenty of charting types, a helper class for working with JSON data, and much more.

4. jQuery Visualize Plugin

If you’re already using jQuery, it’d be performance conscious of you to look into plugins for your visualization requirements. jQuery Visualize, a plugin developed by the Filament Group (the core developers of jQuery UI), is a jQuery plugin for generating charts using HTML5’s canvas element. It has 14 options for customizing your charts. Don’t forget to try out their Configurable demo.

5. moochart

For now, moochart only plots bubble diagrams, but there are plans to expand this MooTools 1.2 plugin to feature pie, line, and bar graphs. The plugin has 14 options that you can use for customizing your diagram’s look, and tooltips for providing more information about a bubble when mousing over them. moochart is open source and released under the MIT license.

6. JS Charts

JS Charts boasts easy usage by emphasizing on the end-user’s ability to use the library with little to no coding, making it ideal for web designers who’d like to chart data without spending too much time learning how to write JavaScript. JS Charts has a web-based GUI and offers hosting for your charts to take some load off your own servers. It supports three chart types: bar, pie, and line.

7. dygraphs

dygraphs is a JavaScript library for producing interactive charts for time series data. It was designed to plot dense data sets (such as temperature fluctuations). It has user interfacing options such giving the user the ability to specify time intervals on the fly, displaying of values when mousing over parts of the chart, and zooming. It also integrates with the Google Visualization API.

8. JSXGraph

JSXGraph, developed at the University of Bayreuth in Germany, is a standalone JavaScript library for plotting complex geometric shapes and data such as Bezier curves, differential equations, and much more. It has animation features for moving graphs, interactive components such as sliders for experimenting with changing values of variables, and plenty of charting types to choose from.

9. Protochart

Protochart is a JavaScript library for use with the Prototype JS framework. It uses HTML5’s canvas for modern browsers, and the ExCanvas library for Internet Explorer support. It has six types of charts including line, pie, bars, points, lines with points, and area graphs. It allows for the display of legends that are highly configurable to help identify items on your charts.

10. Bluff

Bluff is a lightweight charting library that ports Ruby’s Gruff gem to JavaScript. Weighing at only 11KB gzip’ed (you also need JS.Class which only weighs 2.6KB gzip’ed), it’s surprising that you’ll be able to get 15 different types of charts out of this library. It features tooltips, a ton of configurable options, legend support, and the .set_theme method for declaring reusable themes.

11. Style Chart

Style Chart is a free JavaScript-based charting web service/API for creating hosted charts. It’s also available as a downloadable library in case you want to host your own charts (though you need to register in order to download it). It has the things you’d expect from a robust and configurable charting library such as tooltips, legends, and 19 types of charts including 3D pie, 3D bar graphs and Pareto charts.

12. jqPlot

jqPlot is another jQuery plugin for data visualization developed by Chris Leonello. It’s open source, embodying two sets of licensing: MIT and GPL version 2. It has many options for you to take advantage of in order to truly customize your charts.

13. jQuery Sparklines

jQuery Sparklines is a simple and lightweight jQuery plugin for charting dynamic sparklines (a condensed data graphic). It emphasizes on ease of use and minimal coding; you can create complex sparklines with as little as one line of JavaScript code. When minified and gzip’ed, the plugin only weights 4.7KB so it won’t bog down your page response times much.

14. jQuery Google Charts

jQuery Google Charts (abbreviated as jGCharts), developed by Massimiliano Balestrieri, is a data visualization jQuery plugin for working with the Google Charts API. It has plenty of chart types, including a 3D pie chart that’s dynamically generated. It has a GUI in development (still in alpha release), which will allow you to create charts easily with a graphical front-end.

15. Canvas Pie Chart with Tooltips

This MooTools class/plugin is for plotting pie charts using the canvas element. It’s based on Canvas pie by Stoyan Stefanov. It’s a simple and straightforward data visualization option for MooTools developers who are only interested in plotting out pie charts.

Canvas Pie Chart with Tooltips Demo and Download

16. TufteGraph

TufteGraph is a jQuery plugin that emphasizes on ease of use and minimalism. It offers you only a few options for styling and instead relies on CSS for customizing the look and feel of your graphs, which ultimately means that your web pages will render faster because JS has to work less. Check out this introduction video to TufteGraph.

17. Timeline

Timeline is a JavaScript widget for creating interactive timelines. You can scroll through items featured in chronological order by using your mousewheel or by holding down your mouse button on the timeline and dragging left or right. Clicking on a dot, which represents an item in the time line, will reveal more information. Timeline is open source, released under the BSD license.

18. Protovis

Protovis is a data visualization library for charting data. Protovis was created by the Stanford Visualization Group. It uses JavaScript and SVG to dynamically plot out your data. Protovis is open source released under the BSD license. You can download the source on their home page.

Protovis Demos

19. milkchart

milkchart is a JavaScript charting/graphing library that requires MooTools. milkchart renders HTML data tables into one of its five types of charts: column, bar, line, scatter, and pie (with future expansions planned for area graphs) using HTML5’s Canvas element. milkchart is open source under the Apache License.

milkchart Download

20. Timeplot

Timeplot allows you to dynamically generate time series graphs. Hovering over data points reveals their value. Timeplot was developed as part of the SIMILE Project at MIT. Here’s a step-by-step tutorial on how to utilize Timeplot. Timeplot is open source and available the BSD license. The Timeplot demo and download links are on this page.

Timeplot Demos and Download Info

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Getting Started with jQuery

Jacob Gube — Mon, 04 Jan 2010 18:02:10 +0000

The web development scene is moving forward at a lightning-fast pace, and it’s imperative that developers continue to keep their skills fresh. If you’ve been involved in front-end design or development in any form over the past five years or so, then it’s very likely that you’ve experimented at some point with one of the popular JavaScript libraries, many of which have become quite prominent and are now used on a number of large commercial websites.

In this article, I’ll be introducing and laying the groundwork for advanced JavaScript development with one of the most popular JavaScript libraries available: jQuery.

Although there are many beginning tutorials online that can provide a great starting point for jQuery development, in this article I’m hoping to go beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library. Of course, much of this information–outside of the syntax and other jQuery-specific details–will be applicable to any JavaScript library.

Why a JavaScript library?

To quote the official jQuery slogan: "Write less, do more." The role of a web developer is to create code that determines what will result from a user’s interaction with a web page. Web developers should not have to spend hours debugging browser quirks. Instead, they should be free to deal solely with the actions and the results. This is where a JavaScript library comes into play.

Overcoming browser differences

Different browsers handle DOM manipulation, transparency effects, and animation in different ways, requiring, in some cases, reams of code just to create a simple effect. Using a JavaScript library allows you to completely bypass all of those challenges, giving you access to an API (Application Programming Interface) that deals directly with the tasks you actually want to accomplish. All the challenges and issues common to JavaScript are dealt with behind the scenes, allowing you to integrate functionality without wondering whether or not it will work in a particular browser.

Unobtrusive JavaScript

Another impelling reason to use a JavaScript library is that all libraries allow you to include JavaScript in your pages unobtrusively, thus keeping your behavior layer (the JavaScript) separate from the content and presentation layers (the XHTML and CSS).

Accomplishing complex tasks with ease

Finally, a very powerful feature of any JavaScript library is its ability to manipulate any element or set of elements on a web page with just one line of code. Take, for example, the following HTML:


  
    Text Here
    Text Here
    Text Here
    Text Here
    Text Here

Let’s say you wanted to use JavaScript to change the background color of the first list item element (

) in the unordered list above. Using pure JavaScript, your code would look something like this:

var myListCollection = document.getElementsByTagName("ul");
  for (var i = 0; i < myListCollection.length; i++) {
    if (myListCollection[i].className === "list") {
      myListCollection[i].childNodes[0].style.backgroundColor = "blue";
    }
  }

Using jQuery, you can accomplish the same thing with just one, easy-to-maintain line of code:

$("ul.list li:first-child").css("background-color, "blue");

Understand CSS concepts

One area that is imperative to powerful jQuery development, is strong knowledge of CSS. The reason for this is because jQuery often utilizes CSS-based syntax to manipulate DOM elements. Here are some concepts that you should be quite familiar with before diving into extensive jQuery development:

Type selectors
Class selectors
ID selectors
Descendant Selectors
Child Selectors
Attribute Selectors
CSS Specificity
The Cascade & Inheritance

Most of the above CSS concepts should already be very familiar to any modern-day front-end developer, since any CSS layout would utilize these. jQuery not only incorporates the basic selectors (type, class, and ID), but it also uses descendant and child selectors, which aren’t supported by all currently-used browsers. But with jQuery, due to its built-in browser normalization, all selectors are supported equally.

Understanding that jQuery incorporates CSS syntax when accessing elements will greatly enhance your ability to quickly and easily create powerful JavaScript applications with jQuery.

Understand JavaScript concepts

In order to make full use of jQuery, it is a good idea to learn certain JavaScript concepts. Sure, you can do a ton of stuff in jQuery without knowing much about some of the concepts listed below, but you’ll have a bigger advantage in your jQuery development if you take the time to understand a few fundamentals, including:

Object creation
Properties of objects
Object literals
Functions as methods
Anonymous functions
Closures

Again, it is not necessary to fully understand any of the above concepts in order to start working with jQuery, but your abilities with jQuery’s API will increase greatly if you understand one or more of the above concepts.

Object-Oriented JavaScript: An Introduction to Core Concepts
Object-Oriented Javascript at Webreference.com

The jQuery source code

Before getting started with any jQuery development, you’ll first have to download the latest version of the jQuery library and include it in your pages:

The above line of HTML should appear before any actual jQuery code, otherwise you’ll get errors.

Alternatively, instead of hosting the source code yourself, you could link directly to the most recent version on the Google Ajax Libraries API which can save you some server resources. (read more ways to offload website features).

jQuery syntax

Now that you have an overview of the benefits of jQuery, along with some understanding of concepts involved, let’s take a look at some syntax to get us started with this powerful library.

The jQuery wrapper

The jQuery wrapper is the function that is at the core of all jQuery commands. I used it earlier in one of the examples above. Here it is again:

$("li a");

The $ symbol is an alias for the jQuery function, so the above line of code could alternatively be written:

jQuery("li a");

But, for obvious reasons (e.g. to keep your code terse), you’ll rarely see that syntax.

The jQuery function shown in the above two examples returns an object containing an array of the DOM elements specified inside the parentheses (in this case, all anchor tags that are nested inside of

tags). Of course, in both examples above, we haven’t specified an action; all we’re doing is returning those DOM elements, which does nothing. In the next section, we’ll add methods that will act on the group of elements we’re targeting.

jQuery commands

jQuery’s API includes easy access to effects and other actions via built-in methods that would normally take dozens of lines of code to accomplish in a cross-browser fashion with pure JavaScript. For example, let’s add a "fade out" method to the code from the previous examples:

$("li a").fadeOut();

The above line of code "fades out" all anchor tags on the page that are nested inside of

tags. If we want to fade the anchors back in again, we just use the fadeIn() method:

$("li a").fadeIn();

Chaining commands

jQuery also allows developers to chain commands, stringing one after another. So, we could combine the previous two examples, as follows:

$("li a").fadeOut().fadeIn();

The above code will fade out all anchor tags nested within list items, then immediately fade them back in. The number of chained items is infinite (or within reasonably set limits), allowing for numerous commands to work on the same group of elements, each happening in succession.

That’s just a small sampling of what’s possible with jQuery, and how easy it is to accomplish tasks that would normally take many lines of code, and a lot of browser testing. Although you’ll still do browser testing when running jQuery code, the results will virtually always be the same: cross-browser, unobtrusive JavaScript that’s easy to write and easy to maintain.

Running code when the DOM is ready

Earlier we touched on the concept of unobtrusive JavaScript, and how jQuery is written to allow your scripts to remain separate from content and presentation. So far, the code examples we’ve discussed would run fine as long as they were included at the bottom of an HTML page. If, on the other hand, they were included in the head of the document, they would fail to work because, at that point, the document tree has not yet rendered.

jQuery allows us to run our code only when the DOM is ready. This is done by means of the $(document).ready handler. The beauty of this handler is that it doesn’t make the code wait until the entire page finishes loading, as would be the case with a typical window.onload event. With the (document).ready handler, your code will run as soon as the DOM tree is finished rendering, before all images and other media have finished loading, thus minimizing load time.

Let’s try running our previous code example when the DOM is ready:

$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

The above code tells jQuery to run an anonymous function when the document tree is done rendering. The anonymous function contains the code we saw previously, which faded our anchors out, then immediately faded them back in again. This code could be included in the of the document, near the bottom of the page, or anywhere else, and it would run exactly the same way.

The "ready" event is just one of the many events available through jQuery’s API. Others include click, dblclick, load, blur, keydown, submit, and more.

Conclusion

jQuery is capable of so much more, and I’ve only just begun demonstrating its power and simplicity. But I think this suffices to provide a good overview, with some syntax basics, thus preparing beginning jQuery developers for easy-to-write and practical JavaScript code.

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. Follow Louis on Twitter or contact him through this form.

10 Awesome Techniques and Examples of Animation with jQuery

Jacob Gube — Mon, 02 Nov 2009 02:51:24 +0000

jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API.

In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps.

1. Puffing Smoke Effect in jQuery

This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Kessler thoughtfully supplies a configurable jQuery plugin with instructions based on his site’s header, so that you may create a similar animation effect for your website.

Live Demo: Smoke Effect

2. Crafting an Animated Postcard

Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. The tutorial takes advantage of the popular jQuery Easing plugin to help with the animation and the setTimeout() JavaScript function to time the events accordingly.

Live Demo: Animated Postcard

3. Create a Realistic Hover Effect

In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. The tutorial features objects that, when hovered on, rises upwards. In the live demo of the effect, notice how the reflections and shadows at the bottom also changes when the object lifts up; hence "realistic" in the name of the technique.

Live Demo: Realistic Hover Effect

4. Scrolling Background Effect

The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. The script is also dependent on the user’s system time; the animation starts at a different position depending on whether you visit the site at night or in the morning, a nice touch.

Live Demo: youlove.us (web page header)

5. Multiple Animations with Glimmer

Glimmer, a JavaScript animation creation tool that leverages the jQuery library, has several live demonstrations for some of the things you can do with the app. For instance, with Glimmer, you can create cool animation sequences or make a spiffy and impressive rotating banner for your website.

Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample

6. jQuery Blend

jQuery Blend is a plugin for animating CSS background images. The project emphasizes on web development best practices such as progressive enhancement so that users with JavaScript disabled are still able to interact with your interface, albeit without the animation effects, making for a truly universal design.

Live Demo: website navigation with different options

7. Parallax Scrolling Background

In this jQuery tutorial, you will learn how to construct a Parallax Scrolling background – first popularized in web interfaces with the use of Flash. The technique involves div elements with CSS background images. The Parallax Scrolling technique requires the scrollTo plugin by Argentinean Web Developer and Game Programmer, Ariel Flesler.

Live Demo: Scrolling Clouds

8. Stunning Sliding Door Effect

Designer and Developer Kevin Liew shows other website builders how to create a striking animation effect where a top image splits up into four pieces, moving smoothly to the corners, and revealing another image beneath it. It’s an animation effect suited for interactive thumbnails of images.

Live Demo: Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.

Live Demo: parallax

10. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.us example of vertically moving a large CSS background image. Illustrations on how the technique works will help readers grok the concept more fully. Devirtuoso, the author of the tutorial, goes through due diligence by offering an IE6 hack for backwards compatibility.

Live Demo: Animated Header

Can jQuery replace Flash? Do you know of other impressive uses of jQuery to animate page elements? Why don’t we talk about it in the comments? *Co-written by Jacob Gube

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

6 Advanced JavaScript Techniques You Should Know

Jacob Gube — Thu, 08 Oct 2009 16:00:09 +0000

There have been a number of articles published over the years that discuss best practices techniques for JavaScript. I thought I would go a little bit beyond the scope of those articles and outline a number of advanced techniques and practices that I have personally used or read about that could be invaluable in certain circumstances.

This article doesn’t necessarily cover every detail of the methods I’m describing, but provides an overview, along with code examples, of some practical JavaScript coding techniques.

1. Closures to Extend Variable Scope

Closures in JavaScript are a fairly straightforward concept, and have been discussed online in a number of in-depth articles. The fact that they are straightforward doesn’t necessarily mean they’re simple however, as seen by the extensive articles that cover the subject.

Simply put, closures allow variable scope to be extended past the common scope restrictions of functions. I like the way Jeremy Keith describes closures in his book Bulletproof Ajax:

"Think of closures as a kind of regional scope: broader than local but not as broad as global."

To create a closure, you nest a function inside of a function. That inner function has access to all variables in its parent function’s scope. This comes in handy when creating methods and properties in object oriented scripts. Here is a simple example that demonstrates the use of a closure:

function myObject() {
  this.property1 = "value1";
  this.property2 = "value2";
  var newValue = this.property1;
  this.performMethod = function() {
    myMethodValue = newValue;
    return myMethodValue;
  };
  }
  var myObjectInstance = new myObject();
  alert(myObjectInstance.performMethod());

The key portions of the script are the nested anonymous function are highlighted in green and the method call in the alert function (last line). Because the method in the alert is actually calling a nested function, that method is able to read the value of the variable called newValue, even thought that variable is not within the scope of the anonymous function, or method.

Developers use closures all the time, probably unknowingly, since a closure is created any time an anonymous function is nested inside another function and utilizes variables from the parent function’s scope. The power of the closure is revealed when that method (the inner function) is called, and values that normally wouldn’t be accessible are within "regional" scope and are thus able to be used as any other value.

See the references below for some deeper explanations of closures and their relation to scope. I also highly recommend you pick up a good advanced JavaScript book that offers a good discussion of the concepts associated with closures.

2. Object Literals to Pass Optional Arguments

Here is a handy coding tip to keep in mind when dealing with functions that can accept a large number of optional arguments. Instead of passing the large number of arguments in the conventional fashion, which could unnecessarily complicate the function, you can pass just one argument which ends up being a collection of arguments declared in an object literal.

Let’s look, first of all, at how we might do this in the typical manner, so we can see the contrast:

function showStatistics(name, team, position, average, homeruns, rbi) {
  document.write("Name: " + arguments[0] + "
");
  document.write("Team: " + arguments[1] + "
");

  if (typeof arguments[2] === "string") {
    document.write("Position: " + position + "
");
  }
  if (typeof arguments[3] === "number") {
    document.write("Batting Average: " + average + "
");
  }
  if (typeof arguments[4] === "number") {
    document.write("Home Runs: " + homeruns + "
");
  }
  if (typeof arguments[5] === "number") {
    document.write("Runs Batted In: " + rbi + "");
  }
}
showStatistics("Mark Teixeira");
showStatistics("Mark Teixeira", "New York Yankees");
showStatistics("Mark Teixeira", "New York Yankees", "1st Base", .284, 32, 101);

The function above can take up to 6 arguments. The first two arguments are mandatory, so inside the function, we don’t check for their existence. The last 4 arguments are not mandatory, so we only display their values if they exist.

We call the function 3 different times (last 3 lines), with different numbers of arguments each time. You can see that if the number of passed arguments was in the dozens, or more, the code could look a little messy, and would be harder to maintain, or read.

Now let’s look at the same code using object literals to pass the arguments:

function showStatistics(args) {
  document.write("Name: " + args.name + "
");
  document.write("Team: " + args.team + "
");
  if (typeof args.position === "string") {
    document.write("Position: " + args.position + "
");
  }
  if (typeof args.average === "number") {
    document.write("Average: " + args.average + "
");
  }
  if (typeof args.homeruns === "number") {
    document.write("Home Runs: " + args.homeruns + "
");
  }
  if (typeof args.rbi === "number") {
    document.write("Runs Batted In: " + args.rbi + "");
  }
}

showStatistics({
  name: "Mark Teixeira"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees",
  position: "1st Base",
  average: .284,
  homeruns: 32,
  rbi: 101
});

Technically, this second method of passing the arguments might require a little bit more code, but with a large collection of arguments, there are a few advantages.

First, the function itself is simplified because it accepts only one argument (args), which is a collection of all the values passed from the object literal (name, team, position, etc). Plus, the actual argument values are easy to read, and can easily be understood, updated, or modified, since the correlation between the values and the argument references are more direct.

If the function required only a small number of arguments, then this method would not be necessary, and might actually have the opposite effect. So, use this technique sparingly, and only in situations where you foresee the collection of arguments being hard to maintain over time.

3. Contextual Targeting of DOM Elements

There are sometimes instances where you need to traverse the DOM and gain access to a specific element, or group of elements, but due to certain restrictions, you may not have direct access to the elements via a CSS class name or ID in the HTML code. This might be because of user-generated content produced through a rich text editor, or dynamic content pulled from a database.

Whatever the case, it’s not impossible to access those unidentified DOM elements via JavaScript. Using what I call "contextual targeting", you can gain access to, and modify, almost any element in the DOM. As long as you have a map of the general template that contains the element you want to target, you can access that element and manipulate it the same way you would an element that has a class name or ID.

Let’s create some basic HTML code that will serve as our example page:


  Site Title


  
    Testing
    Testing
    Testing
    Testing
    Testing
    Testing
  


  Page Title
  Lorum Ipsum link here. Pellentesque habitant morbi
     tristique senectus et netus et malesuada fames ac turpis egestas.
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
     ante. Donec eu libero sit amet quam egestas semper.
     Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
     Pellentesque habitant morbi tristique senectus et netus et malesuada
     fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
     ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
     egestas semper. Aenean ultricies mi vitae est. Mauris
     placerat eleifend leo.
  Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
    tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
    eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
    eleifend leo.


   Copyright | contact | policy |
      privacy

Using the HTML code above, if we wanted to target all the anchor tags on the page, we could collect them and manipulate them like this:

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i
If we wanted to target only the anchor tags in the footer, however,  we would target them based on their context, or surrounding elements,  like this:
var myFooterElement = document.getElementById("footer");
var myLinksInFooter = myFooterElement.getElementsByTagName("a");
for (i=0;i
The first line grabs a reference to the footer element. The second line collects all   tags inside the footer. Then we loop through them and do what we want  with them. Thus, they are accessible even though they are not grouped  via class names.

You can accomplish the same thing by using node properties, as shown below.
var myLinkCollection = document.getElementsByTagName("a");

for (i=0;imyLinkCollection[i].parentNode.parentNode.id === "footer") {
    // do something with footer anchor tags here
  }
}  
Similar code could be used to target the lone anchor tag inside the "content" section.
We could also limit our anchor tag search to include only tags that have the href attribute set, so as to avoid finding any in-page links. We do this by using the getAttribute method:
var myLinkCollection = document.getElementsByTagName("a");

for (i=0;igetAttribute("href")) {
    // do something with the anchor tags here
  }
}  
Finally, you’ll notice that there is a  tag  with an inline style. The inline style could have been generated  through a content management system, so you may not have the ability to  edit it directly. You can target all  elements with inline styles like this:
var myLinkCollection = document.getElementsByTagName("span");

for (i=0;i
The possibilities are endless with contextual targeting, and there  are even more options available if you’re using a JavaScript library  that normalizes browser differences and simplifies DOM manipulation.
Further Reading:

getElementsByTagName at Sitepoint’s JavaScript Reference
getElementsByTagName at W3Schools

4. Using Namespaces to Prevent Conflicts
If you’re doing an extensive amount of raw JavaScript coding and  suspect that additions could be made to the same pages you’re working  on, you can prevent any future conflicts with your code by giving your  code its own namespace.
Object-oriented JavaScript implements namespace-like principles due  to the fact that properties and methods are declared inside of objects,  thus there are less likely to be conflicts. A conflict could arise,  however, through object names. And very likely, the conflict will occur  "silently", thus you may not be alerted to the issue immediately.
You can prevent all conflicts by creating a unique namespace. Let’s use the showStatistics function to demonstrate how we can encapsulate code into its own namespace:
if (typeof MY == "undefined") {
  MY = new Object();
  MY.CUSTOM = new Object();
}

MY.CUSTOM.namespace = function() {
  function showStatistics(args) {
    document.write("Name: " + args.name + "
");
    document.write("Team: " + args.team + "
");
    if (typeof args.position === "string") {
      document.write("Position: " + args.position + "
");
    }
    if (typeof args.average === "number") {
      document.write("Average: " + args.average + "
");
    }
    if (typeof args.homeruns === "number") {
      document.write("Home Runs: " + args.homeruns + "
");
    }
    if (typeof args.rbi === "number") {
      document.write("Runs Batted In: " + args.rbi + "");
    }
  }

  showStatistics({
    name: "Mark Teixeira",
    team: "New York Yankees",
    position: "1st Base",
    average: .284,
    homeruns: 32,
    rbi: 101
  });
}
MY.CUSTOM.namespace();  
The first few lines create the namespace by checking to see if the  "MY" object already exists. This object can be whatever you want it to  be. Just pick a name that you don’t think will ever be used again.  After the MY object is created, we are then able to create the "CUSTOM"  object as a property of the MY object. Then our namespace function  becomes a method of the MY.CUSTOM object. Keep in mind that "MY",  "CUSTOM" and "namespace" can each be your own custom names. I chose  these for demonstration purposes. They could be CHEESEBURGER.ONIONS.pickles if you want!
The showStatistics function is exactly the same as in  the example earlier that utilizes an object literal to pass in the  values. But in this case, the entire function, including the object  literal, is encapsulated inside my.custom.namespace. The  last line invokes the entire function using dot notation, and the  function runs exactly the same as it normally would, except that it is  protected from conflicting with another function called  "showStatistics".
Further Reading:

Object Oriented JavaScript: Namespaces (About.com)
Namespacing your JavaScript (Dustin Diaz)

5. Hybrid Application Development
You can create powerful JavaScript applications if you use a  combination of a JavaScript library and raw JavaScript code. Many  JavaScript libraries are used to implement "pretty" animations and  other customizable effects–sometimes via plugins– that often don’t  require much to be added to them other than some custom values.
On the other hand, there may be situations where you’ll want to  accomplish something specificly requested by a client. Maybe it’s  something not available in a library and that requires extensive  coding, possibly utilizing Ajax and a variety of DOM methods.
There is no point in reinventing the wheel. You can implement your  favorite JavaScript library and take advantage of its simplified Ajax  calls, DOM methods, and normalization of browser differences. Thus, you  can have the advantages of the library, while still creating custom  scripts that are specific to your project.
Further Reading:

List of JavaScript libraries at Wikipedia
40 Useful JavaScript Libraries (Smashing Magazine)
JavaScript Libraries: A directory of tools shaping the new web

6. Rendering Readable HTML
Finally, this is a technique to use in situations that require  dozens of lines of HTML code being generated dynamically via  JavaScript. Take the following example:
var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here.";
var footerContent = "Copyright 2009";
var HTMLCode = '\n' + pageTitle + '\n
               \n
               ' + pageContent + '\n
               \n
               ' + authorBio +'\n
               \n
               \n
               
               ' + footerContent + '\n
               \n';

pageContainer.innerHTML = HTMLCode;  
The line to take note of above is the one that declares the value of the HTMLCode  variable. It renders just find in the generated source code, since it  utilizes the "new line" character, so it looks like perfectly good  HTML. But if this line of code were any longer it would be extremely  difficult to read and maintain in the .js file.
Here is the same code as above, but implementing a much more organized method of displaying the HTML:

var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here.";
var HTMLCode = 	'\n' +
                '' + pageTitle + '\n'
                '\n' +
                  '' + pageContent + '\n' +
                  '\n' +
                    '' + authorBio + '\n' +
                  '
\n'		        '\n' +
                '' +
                  '' + footerContent + '\n' +
                '\n';

pageContainer.innerHTML = HTMLCode;
Now the code is much more readable, and conforms to the manner in  which HTML is rendered in an actual HTML page. It even includes proper  HTML indenting, and still uses the new line character to properly  format the outputted HTML.
Conclusion
Although I didn’t provide a detailed explanation of every concept  dealt with in this collection, I hope this list provided beginning and  intermediate JavaScript coders with an overview of a few fairly  advanced practical techniques that they can implement in future  projects or experiments.
Please feel free to comment on any of the techniques I’ve mentioned  and some specific ways that you have used them in your own applications.
Related Content

JavaScript Debugging Techniques in IE 6
10 Promising JavaScript Frameworks
40 Excellent Resources for JavaScript Coders
Related categories: JavaScript and Web Development

About the Author
Louis Lazaris is a freelance web developer based in Toronto,  Canada. He has 9 years of experience in the web development industry  and posts web design articles and tutorials on his blog, Impressive Webs. Follow Louis on Twitter or contact him through this form.

10 Easy jQuery Tricks for Designers

Jacob Gube — Tue, 29 Sep 2009 22:00:55 +0000

There are plenty of jQuery tricks and techniques out there, and the vast and powerful jQuery library can meet almost anyone’s JavaScript’ing needs. Since jQuery makes JavaScript accessible to designers who want to add simple interaction and visual techniques into their design without knowing extensive programming knowledge, it’s worth a few moments to explore this excellent library.

As any designer knows, adding small bits of extra visual detail and user-friendliness can add professionalism and appeal to any web design. In addition, for designers that sell templates, WordPress themes, and other types of web designs, the use of jQuery in a design can be a great selling point.

Let’s take a look at ten simple, effective, and useful tricks and techniques from several excellent jQuery developers and sites around the web that leverage the library to take your designs to another level.

1. Equal-Height Columns

Columns with equal heights have always been a problem for designers using divs, although now, there are quite a few solutions. Among the solutions available to you is using jQuery. This technique only requires a very small JavaScript function to handle everything, then some basic integration with the main layout to make the magic happen.

The function and snippets for this approach is from CSSNewbie. If anyone would like more insight to how the function works, it’s all there.

To solve this problem with jQuery, just add this function to your pages you wish to have equal heights (or include it as a JavaScript file – which is better for maintainability).

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

To get equal-height columns, link to the script that contains the function, and put the following code block below in the tags of your pages.

The code will execute as soon as the DOM is ready to be utilized, ($(document).ready(function()) and then uses the equalHeight function to accurately calculate the height of all the columns. As one can see, all a designer needs to do is use divs with classes of col1, col2, and col3 to make this example work properly.

2. Rounded corners without the HTML mess

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.


  
  


  
    
      <-- main content goes here -->

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTML divs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div’s.

Here’s a sample div HTML structure:


  <-- main content goes here -->

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

3. Scrolling Content

Animated scrolling in jQuery can be used to create image carousels and to simplify a design by being able to display more content in a smaller space.

Below is an example of a jQuery plugin called Scrollable (check out the demo on that page to see the plugin in action).

There are tons of plugins and tutorials on the web for how to create scrollable content, the Scrollable plugin being one of them.

To help you scroll up and down a web page in an animated way, check out the tutorial called Scroll window smoothly in jQuery on Freelancer ID Blog.

In order to tell jQuery to scroll, we need a section in a web page to scroll up or down to (ScrollTarget).


  After a scroll button is clicked, jQuery will animate the
  page to this point.

Next, we can use any HTML element to use as a trigger to call a function called scroll(), such as an image or input button to tell the browser to scroll to the above div when clicked.

Example of a input button:

onclick="scoll();" type="button" value="Scroll" />

Example of an image:

onclick="scoll();" src="images/scroll.jpg" alt="Scroll" />

Here is the code for the scroll() function.

function scroll(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
}

The downside to this technique is that it uses an onclick property which is bad practice if you’re interested in obeying unobtrusive JavaScript principles. So, you can modify the element’s markup in such a way that it has a class property value of, for example, scrollTrigger:

And then simply replace the above scroll() function to this script below:

$('.scrollTrigger').click(function(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
});

4. CSS Style Switcher

Switching themes is a great way to vary the theme and look of a web page. Switching stylesheets may be necessary to accommodate different screen resolutions, or perhaps to allow users to pick a light background alternative to a dark design.

It’s quite easy to do (really). Include the following jQuery script to the of your HTML file.

To give options to the user for switching styles, just assign the styleswitch class to an HTML element (a elements would be good candidates), using the rel attribute to reference the location of your stylesheets.

Dark
Light

For example, if this is how you reference your default stylesheet:

Clicking on the second link above will modify the DOM in such a way that the href attribute will take on the value of light.css.

5. Resizing text dynamically

This common trick among designers can make it easy for users to control how big or small they see the text on a web page without having to modify their web browser settings.

Using links to increase, decrease, or reset the text size of a webpage can easily be implemented using jQuery.

The following snippet from Queness will do the trick.

In the code above, you will notice an array called section. This defines which HTML elements can be resized.

From there, we can use basic HTML to create text-resizing links.

+ | -
| =

<span>Font size can be changed in this sectionspan>
This won't be affected
This one is adjustable too!

6. Animated accordions for interactive content displays

Accordions that use jQuery can take on many forms, from displaying only necessary content, to creating expandable/collapsible navigation menus.

Designers can create accordion menus with some pretty cool animation effects using jQuery.

To view a demo of an accordion in action, check out the accordion over on WebDesignerWall.

Using the jQuery script below, we can use a mixture of

and

elements to hide and show the paragraphs below the heading tags.

Note: If you’d like a faster animation movement, modify the slideToggle and slideUp methods so that it passes either the strings 'normal' or 'fast', or simply use an integer in millisecond units (such as .slideUp(500) for a half -second transition).

Below is the HTML we need to use. As you can see, it’s pretty straightforward and all we need to have is the div.accordion element, and

pairs inside it.


  <h3>Item Oneh3>
  <p>Lorem ipsum dolor sit amet.p>
  Item Number Two
  Lorem ipsum dolor sit amet.
  Here is Item Three
  Lorem ipsum dolor sit amet.

Take a closer look at this and some other jQuery tricks over at WebDesignerWall.

7. Tooltips to convey contextual messages on an element of interest

Tooltips are an easy way to give users more information when they hover on a particular page element. By hovering over an element of choice, the user can view a simple tooltip that pops up displaying links, content, a larger image, and other contextual information that they might find useful.

The image above is actually an example of a demo page in action (from CSSGlobe). To download this script set, head on over to their write-up of it called Easiest Tooltip and Image Preview Using jQuery.

Here is the HTML markup you need, which, as you can see follows unobtrusive JavaScript best practices by using a class (.preview)to indicate which elements will have tooltips.

Preview

8. Modal windows to replace pop-up windows

Modal windows can be used to display images, content, and even iFrames.

A dialog box like this takes more than just a few snippets of code, it takes an entire tutorial. Above is an image of what the NetTuts+ tutorial for creating a modal dialog box can do. It is a great tutorial to follow if you would like to make your own, and customize it along the way.

jQuery Plugins for Modal Windows

Instead of creating your own jQuery script for modal windows, there are plenty of plugins that you can use to get the job done; below are just a few of them.

FancyZoom

Wordpress jQuery Lightbox Plugin

SimpleModal

9. Tabbed interfaces for displaying content

Tabs are a great way to save space, just like an accordion. With a rise in minimalist designs, designers need new ways to decrease the space that web page content can take up. Tabs are also a great way to organize information on a web page, making the design much more user-friendly. The image below showcases a tabbed area demonstration using the jQuery UI tabs.

10. Using jQuery UI for easy widget implementation

The last "trick" for designers is easy: take a look at (and learn about) the jQuery User Interface (jQuery UI).

Basically, jQuery UI extends the jQuery core library to give you access to useful and common UI components (widgets) such as date pickers, accordion, tabs, sliders, and more.

To make things easier for designers wanting to save time and coding requirements, they have provided a nifty tool for quickly testing and creating your own jQuery UI themes, aptly called ThemeRoller, (which is also available as a Firefox bookmarklet).

Needless to say that there are plenty of features that come from jQuery UI that let designers "Code Less, Do More."

Wrapping Up

Many visual effects and impressive interaction can be achieved using jQuery. The above ten tips may be common and incredibly useful, but the power of jQuery does not stop there. I hope that this post has gotten you interested enough to keep exploring and learning more about this designer-friendly JavaScript library.

Please share any additional plugins, tutorials, and jQuery tricks that may help your fellow web designers in the comments.

About the Author

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. In her spare time she maintains Webitect.net, a resource blog for webmasters. She also writes for top blogs like Smashing Magazine and Web Designer Depot. You can get a hold of her through her blog, or follow her on twitter – @Webitect

20 Fresh jQuery Plugins to Enhance your User Interface

Jacob Gube — Wed, 09 Sep 2009 22:00:07 +0000

The great thing about jQuery is that talented jQuery developers often release new and useful plugins on a regular basis. jQuery plugins are not only easy to implement, but easy to maintain even when used throughout large sites.

In this article, we share with you a list of 20 useful jQuery plugins that were released recently that could help you for your next web project. There are various types of plugins here such as modal windows, image galleries, auto complete for form input, bookmarking functions, preloaders, and more. Enjoy!

1. SimpleModal

This jQuery plugin is a flexible and straightforward way of providing modal window functionality on your site.

SimpleModal Demo

2. Panel Gallery

Panel Gallery is an image slideshow with a unique transitional effect. It transitions to another image in a sequential panel manner.

Panel Gallery Demo

3. Easy Image Gallery

Creating image thumbnail galleries is a snap when you implement the Easy Image Gallery jQuery plugin into your site’s template.

Easy Image Gallery Demo

4. nyromModal

nyromModal is a useful jQuery plugin that has a robust set of features and options for you to truly create a customized modal window for your web pages.

nyromModal Demo

5. PikaChoose

PikaChoose is a super lightweight image gallery that’s a cinch to integrate into your website. You can see it in action on the Belvedere Inc website.

PikaChoose Demo

6. Image Overlay Plugin

The Image Overlay Plugin lets you present more information about your images. Hovering over an image reveals associated text on top of it.

Image Overlay Plugin Demo

7. imgAreaSelect

If you’re creating a web app that supports image cropping, this can be the client-side function that lets your users select rectangular areas of an image.

ImgAreaSelect Demo

8. SimpleMenu

If you need a simple, lightweight, and barebones JavaScript-based navigation menu, SimpleMenu is the jQuery plugin of your dreams.

SimpleMenu Demo

9. SlideBox

Do you need a sliding div panel at the top (or bottom) of web pages that can contain more links or your login/sign-in feature? Check out SlideBox.

SlideBox Demo

10. Single Drop Down Menu

Single Drop Down Menu (also known as Single-ddm) is a quick and hassle-free way of implementing multi-level navigation menus that leverage JavaScript.

Single Drop Down Menu Demo

11. Auto Complete

Are you trying to build a custom search feature for a site? The Auto Complete jQuery plugin can supercharge your form inputs with additional user feature.

Auto Complete Demo

12. jQuery Iconize

jQuery Iconize allows you to reduce or expand page elements into an "icon state", providing your web app a user-friendly way of minimizing page objects.

jQuery Iconize Demo

13. Inline Text Edit

Web developers looking to provide users with a basic in-page text editor should take a look at the Inline Text Edit jQuery plugin.

Inline Text Edit Demo

14. PfeLoader

This jQuery plugin allows you to display a progress bar for page components that are being downloaded – useful for image galleries that share large-scale photos.

PfeLoader Demo

15. Growl

Growl allows you to present DOM-inserted elements (divs by default) that are perfect for user warnings, messages, and status update notifications.

Growl Demo

16. jQuery Bookmark

Sharing your content in social news and networking sites requires little else than implementing the jQuery Bookmark plugin.

jQuery Bookmark Demo

17. Mouse Over Animation for Text

MOAText is a spiffy jQuery plugin for giving you the ability to animate HTML text triggered when the mouse cursor hovers over them.

MOAText Demo

18. OverScroll

OverScroll lets you move around by holding down a mouse button and moving it, similar to how the iPhone allows you to move around a screen by finger gestures.

OverScroll Demo

19. jQDialog

jQDialog is a jQuery plugin for exhibiting unobtrusive modal windows for in-page notifications that can replace the alert(), prompt(), and confirm() JavaScript functions.

jQDialog Demo

20. Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

Uploadify Demo

Can you suggest more plugins that we’ve overlooked? Have you used any of the plugins above? Share your thoughts and opinions in the comments!

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site on tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Build an Elastic Textarea with Ext JS

Jacob Gube — Fri, 28 Aug 2009 10:00:44 +0000

Since it was first featured on Facebook, elastic textareas – </code> elements that automatically expand or shrink depending on how much text the user inputs – has become one of the coolest functional UI effects on the web. In this article, I will guide you through the re-creation of this astonishing effect using <a href="http://extjs.com/">Ext JS</a>, and I bet you that you will be surprised to see how easy it is to do it.</p> <p><span id="more-1582"></span></p> <h3>Live Demo</h3> <p>Check out the example of what we will be creating by clicking on the following link.</p> <ul> <li><a href="http://sixrevisions.com/demo/elastic_textarea/index.html"><strong>Elastic Textarea demonstration</strong></a></li> </ul> <h3>What you will need </h3> <p>For this tutorial, we will use the <a href="http://extjs.com/">Ext JS JavaScript framework</a> – my favorite framework for cross-browser web application development. I will explain the mechanics step by step so that if you prefer, you can implement the same programming logic using another JavaScript framework/library or with just JavaScript.</p> <p>Only the <a href="http://extjs.com/products/extcore/">Ext Core</a> will be needed in this example.</p> <h3>What is Ext JS?</h3> <p>Ext JS describes itself as being a "<em>cross-browser JavaScript library for building rich internet applications</em>". Although it’s true, this description is too succinct to describe this excellent JavaScript framework’s power and capabilities.</p> <p>It’s the perfect tool for creating Rich Internet Applications (<a href="http://en.wikipedia.org/wiki/Rich_Internet_application" title="Wikipedia entry on Rich Internet Application">RIA</a>): it has a commanding effects library and an awesome GUI toolkit, providing you with tons of components that mimic desktop applications’ fluidity and complexity on the web.</p> <p>Ext JS is available in <strong>two flavors</strong>: <a href="http://extjs.com/products/extcore">Ext Core</a> and <a href="http://extjs.com/products/extjs">Ext JS</a>.</p> <p><strong>Ext Core</strong> is the "lite version" of Ext JS, offering the same kind of functionalities you can find in other popular JS frameworks (like jQuery or MooTools). It’s licensed under the very permissive MIT license. Some functions that are available in Ext JS are not available in Ext Core though – but in our instance, it’s quite alright.</p> <p><strong>Ext JS</strong> is packed with a lot of extra features and lots of GUI gadgets. You can get it under one of the two licenses: under a GPL or a commercial license that waives the GPL restrictions. It’s extremely well <a href="http://extjs.com/deploy/dev/docs/">documented</a> with tons of <a href="http://extjs.com/deploy/dev/examples/samples.html">demos</a> and an easy to follow <a href="http://extjs.com/products/extcore/manual/">manual</a>. It also has great <a href="http://extjs.com/forum/">community support</a>, although they can be a bit harsh to beginners who don’t first search if their question has been answered already before asking questions. If you’re interested in learning about Ext JS more fully, check out this great tutorial that is available <a href="http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0">here</a>.</p> <h3>The Issue</h3> <p>Unfortunately, there is no <code>textarea.contentHeight</code> or similar method, so forget about a direct way to get the text height.</p> <p>"So how do I make the <code>textarea</code> grow and shrink?"</p> <p>A possible approach to find a <code>textarea</code>’s height is to get the font size and textarea width and count the number of characters typed. But then when you press the Enter key your calculations are messed up.</p> <p>"Ok, that’s not a problem… I can put the Enter key into the equation" you might think, but then you have to think about CSS formatting (i.e. padding, line height, or font size).</p> <p>You see how this can become a nightmare in no time?</p> <p><strong>Don’t despair: there is an easy way using Ext JS!</strong></p> <h3>The Trick</h3> <p>To make the <code>textarea</code> grow or shrink, you need to get its content’s height and take into account the CSS styles that affect text formatting like <code>font-size</code>, <code>line-height</code>, etc.</p> <p>The trick to get text height is to mimic the <code>textarea</code> contents in a hidden <code>div</code>.</p> <p>To get a decent effect, we will also limit the textarea minimum and maximum sizes, there is no beauty in a 0-px height <code>textarea</code>.</p> <p>Alright, it’s time to get our hands dirty.</p> <h3>Step 1: Laying down the foundations</h3> <p>First step is to create a function and set up some control variables; we shall name this function <code>elasticTextArea</code>.</p> <p>We also declare two extra functions that allow us to get and set all CSS styles at once.</p> <pre>function <strong>elasticTextArea</strong> (elementId){ /* * This are two helper functions, they are declared here for convenience * so we can get and set all styles at once and because they are not * available in ext-core only in Ext JS */ <strong>//available in Ext JS (not ext-core) as element.getStyles</strong> function getStyles(el, arguments){ var ret = {}; total = arguments.length; for (var n=0; n< len;) { el.setStyle(styles[i++], styles[i++]); } } else if (Ext.isObject(styles)) { el.setStyle(styles); } } } <strong>//minimum and maximum textarea size</strong> var minHeight = 10; var maxHeight = 300; <strong>//increment value when resizing the textarea</strong> var growBy = 20 ; var el = Ext.get(elementId);</pre> <h3>Step 2: Get the textarea CSS styles</h3> <p>To get an accurate measurement, we need to get the textarea CSS styles that affect text formatting, and they are:</p> <ul> <li><code>padding</code></li> <li><code>font-size</code> (and other font styles)</li> <li><code>font-family</code></li> <li><code>line-height</code></li> <li><code>width</code></li> </ul> <pre><strong>//get textarea width</strong> var width = el.getWidth(); <strong>//current textarea styles</strong> var styles = el.getStyles('padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'line-height', 'font-size', 'font-family', 'font-weight', 'font-style'); /<strong>/store textarea width into styles object to later apply them to the div</strong> styles.width = width +'px'; <strong>//hide the textarea scrool to avoid flickering</strong> el.setStyle('overflow', 'hidden');</pre> <h3>Step 3: Create the hidden div</h3> <p>And here’s where the magic begins. We start by creating a hidden container for the textarea contents.</p> <p>We set its position to <code>absolute</code> — this way, the <code>div</code> is removed from the layout’s flow and positioned outside the visible area of the browser.</p> <p><strong>Note</strong>: setting its <code>visibility</code> CSS attribute to <code>hidden</code> or its <code>display</code> to <code>none</code> causes some browsers not to recalculate its height, that’s why we opted for this method.</p> <p>We also instruct the textarea to recalculate its height by re-running this function on every key stoke; another method is to run it at a specific interval, but I find it to be more resource-intensive and less elegant that way. </p> <pre> /<strong>/create the hidden div only if does not exists</strong> if(!this.div){ <strong>//create the hidden div outside the viewport area</strong> this.div = Ext.DomHelper.append(Ext.getBody() || document.body, { 'id':elementId + '-preview-div', 'tag' : 'div', 'style' : 'position: absolute; top: -100000px; left: -100000px;' }, true); <strong>//apply the textarea styles to the hidden div</strong> Ext.DomHelper.applyStyles(this.div, styles); <strong>//recalculate the div height on each key stroke</strong> el.on('keyup', function(){ elasticTextArea(elementId); }, this); }</pre> <h3>Step 4: Copy textarea contents to the hidden div and get its height</h3> <p>To ensure a correct measurement, we replace some special characters with their <a href="http://en.wikipedia.org/wiki/Character_encodings_in_HTML#HTML_character_entity_references">HTML character entities</a> and also append a space (<code>' '</code>) string to the new line to force its representation.</p> <pre><strong>/* clean up textarea contents, so that no special chars are processed * replace \n with so that the enter key can trigger a height increase * but first remove all previous entries, so that the height measurement * can be as accurate as possible */</strong> this.div.update( el.dom.value.replace(//, '') .replace(/<|>/g, ' ') .replace(/&/g,"&") .replace(/\n/g, '') ); <strong>//finally get the div height</strong> var textHeight = this.div.getHeight();</pre> <h3>Step 5: Resize the textarea</h3> <p>In the last step, we give the textarea its new height. </p> <pre> <strong>//enforce textarea maximum and minimum size</strong> if ( (textHeight > maxHeight ) && (maxHeight > 0) ){ textHeight = maxHeight; el.setStyle('overflow', 'auto'); } if ( (textHeight < minHeight ) && (minHeight > 0) ){ textHeight = minHeight ; } <strong>//resize the textarea</strong> el.setHeight(textHeight + growBy , true); }</pre> <h3>Try it out</h3> <p>Wasn’t that simple? Save the JavaScript code we wrote as <strong>elasticTextarea.js</strong> or <a href="http://sixrevisions.com/demo/elastic_textarea/elastic_textarea.zip">download the source</a>, include Ext Core and the JavaScript library, and have fun.</p> <p>To include the JS libraries:</p> <pre><script type="text/JavaScript" src="ext-core/ext-core.js"></script> <script type="text/JavaScript" src="elastic.js"></script> </pre> <p>The HTML for the text area:</p> <pre><textarea id="ta">

To call the function (’ta’ being the ID of the textarea):




Conclusion
The purpose of this article is to introduce you to Ext JS. If you know your JavaScript well, you might find that this code will only work for one textarea. If you’d like a more robust and flexible solution, get the Ext JS plugin that can be found over at my site.
Stay tuned for more Ext JS tutorials here on Six Revisions, written by me. Future tutorials will cover Ext JS plugins, and talk about more cool and easy-to-create UI effects using Ext JS RIA framework.
Related Content

A Guide on Advanced Logging and Benchmarking with FirePHP
40 Exceptional jQuery Interface Techniques and Tutorials
10 Promising JavaScript Frameworks
Related categories: User Interface and Web Development

About the Author
Nuno Franco da Costa is a web developer and sys admin. By day, he works at a design agency coordinating the development and sys admin teams where he developed a PHP MVC framework and a WEB 2 CMS. He loves to code and has a "getting things done" attitude. You can find over at his online presence www.francodacosta.com.



10 Impressive JavaScript Animation Frameworks
Jacob Gube — Sun, 28 Jun 2009 22:35:01 +0000
Complex and slick JavaScript-based animation has been made  easier with the emergence of frameworks and libraries that give developers the  ability to create stunning and eye-grabbing animation and transition effects that  make it easy these complex tasks.
In this article, you will read about the top 10  JavaScript-based animation frameworks and libraries that will enable you to  create engaging and captivating user experiences.
1. $fx


$fx is a compact  and lightweight JavaScript animation library which extends native JavaScript  DOM methods with its own animation methods and functions. Its small file size  (weighing in at only 3.7 KB), hassle-free implementation, and low learning curve  makes $fx a powerful option for adding eye-popping animation effects to your  web projects. Check out the Examples  section on the Manuals page to see the library in action.
2. jsAnim

Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact  and slick animation sequences for web interfaces. Crafted with standards and  best practices in mind, jsAnim allows you to create stunning animation effects  without sacrificing web accessibility of your web projects.
3. scripty2

scripty2 is a  flexible and lightweight JavaScript animation framework for developing  delicious visual effects. The project is still young (alpha), but you can  already see its impressive capabilities in the scripty2 demo page which shows  examples that rival Flash-based objects in smooth, seamless, and complex  animations.
4. GX

GX, developed by  Italian web developer Riccardo Degni,  is a compact (10KB uncompressed animation effects library that puts strict web  standards and best practices at the forefront of its development philosophy.  Built on top of jQuery, but heavily influenced by MooTools development patterns,  you can customize your GX download to include only the parts you need, making  your scripts optimized for file size. Check out the GX Demos to see its  capabilities.
5. Glimmer

Glimmer is a  framework for easily creating interactive elements on your web pages. Glimmer  comes with wizards GUIs, reducing your coding requirements and guaranteeing  standardization across your projects. Check out the Image-Sequencer  demo to see Glimmer’s animation capabilities. It’s written on top of the  popular jQuery library.
6. Animator.js

Animator.js is a  class-based way for implementing JavaScript-based animation effects. Its design  and development principles follow OOAD,  which promotes maintainable and high-lifetime development of applications.  Thus, it syntax is prototypal and object-oriented, reminiscent of MooTools and Prototype.js syntax.
7. Scriptio

Scriptio is an  open source framework for animation and presentational elements to enhance and  enrich the learner’s web experience. Scriptio is easy to learn and its terse  syntax makes it great for fast prototyping. View the Scriptio Examples page where you  will find eight cool demos that exemplify this framework’s abilities.
8. Processing.js

Processing.js is a fully featured  framework for scripting images, animation, and interaction developed by jQuery library  creator, John Resig. Processing.js is a  JavaScript port of the open source Processing project. You should check out the Exhibits page to see full-production implementations of Processing.js.
9. Run


 
For developers looking for a simple means of animating  content, Run, a universal JavaScript  animation framework, is the definitive way to go. Run emphasizes on ease-of-use  as shown by its intuitive syntax and copious amounts of documentation. Run has  also been tested on a wide array of web browsers, ensuring utmost cross-browser  compatibility. Head over to Run’s  Example page to see the project in action.
10. Burst Engine

Burst Engine is an open source vector animation framework  for HTML 5’s Canvas element. Burst provides smooth, slick, and complex animations that will surely  leave a memorable impression upon viewers. To see Burst in action, check out  the 3D  Engine demo (and prepare to get very impressed).
Related content

10  Promising JavaScript Frameworks
Graphing/Charting  Data on Web Pages: JavaScript Solutions
JavaScript  Debugging Techniques in IE 6
Related categories: JavaScript and Web Development




JavaScript Debugging Techniques in IE 6
Jacob Gube — Fri, 15 May 2009 16:27:35 +0000
Microsoft’s Internet Explorer 6 is almost universally hated by web developers. It’s hard to work with and support, but with a few solid techniques, you can make the process less painful. What “just works” in the majority of browsers will almost always require hours of tweaks and workarounds to get it working in IE6. With more and more users switching over to newer alternatives such as IE8, Safari and Firefox hopefully support for IE6 can be dropped sooner rather than later. In the mean time though many of us have to make sure our sites work in this awful browser.


To make things worse, IE6 is extremely bad at helping developers diagnose problems. When a JavaScript error occurs, IE6’s default behaviour is to display a small error icon in the status bar. Extremely easy to miss!

Double clicking on this icon will display a popup, and if you then click the “Show Details” button you’ll get the actual details of the JavaScript error. Unfortunately the detailed error message can be quite cryptic, and probably not too much help in diagnosing the actual problem. Your best bet is to make a note of the line and column number of the problem and then look that up in the source code. Fortunately, with the help of Visual Studio and by changing a few IE settings, we can make it much easier on ourselves.
Setting things up
To enable JavaScript debugging in IE we need to change some default settings, which can be accessed from the Tools> Internet Options menu, and then the Advanced tab. The image below shows the default IE6 settings, with the three settings we’re interested in highlighted.

Script debugging in IE needs be enabled, which requires us to disable the first option out of the three. If you also want to debug scripts in other contexts (such as Outlook) then disable the second option. Enable the third option if you’d like the JavaScript error dialog to pop up automatically instead of being displayed as a small icon in the status bar.

After changing those settings and restarting IE, we’re ready to start debugging. All of the following examples show Visual Studio 2005, but the same applied to 2008. You can also use the free Web Developer Express Edition if you don’t own a full copy of Visual Studio. Instead of IE prompting you to open the debugger, as it does in the examples below, you’ll first need to create a project and then start the debugger yourself. From that point on everything is the same.
Basic debugging
Let’s start with a simple example. The code below tries to call a function that doesn’t exist:


Now when we load that up into the browser instead of the tiny icon in the status bar IE will prompt us to open a debugger.
  

 
Selecting Visual Studio and clicking the yes button will open Visual Studio and highlight the code that is the cause of the problem.

For relatively simple errors, such as the one in the example above, just seeing the actual cause of the error highlighted is probably enough for us to work out what has gone wrong, and how to fix it. In more complex cases, however, we’ll need more information. This where the Visual Studio debugging features come in really handy.
In the code below we have a function, performAction, which takes a function as an argument and calls that function once it’s done. You’ll commonly see this sort of thing in JavaScript with asynchronous functions such as setTimeout and jQuery’s Get. There is a problem with the code below though: We’re accidentally passing in a string to performAction rather than a function.


If we load up the code in IE and then debug it in Visual Studio as we have before we’ll see that the code “callback();” is highlighted, and is therefore the cause of problem. It won’t be obvious why this line is causing the problem though, not unless we know what the value of callback is. If callback was actually a function then there wouldn’t be a problem at all. The problem has only arisen because we accidentally passed in a string. This is where the “locals” window comes in handy. It lists all local variables along with their value and type. To display this window go to the Debug menu, then Windows, and then select Locals.

With the locals window displayed it’s clear that the problem is that callback is a string, rather than a function. The locals window doesn’t just support basic types such as integers and strings. If you’ve got a local object you can look at all of its properties and see the value and type of each of them, as we’ll see in the next example.

The ‘debugger’ keyword
The ‘debugger’ keyword, also supported by the Firefox JavaScript debugger Firebug, can really help us to track down problems. Below is a slightly modified version of the previous example, where this time the callback function is passed an object that should include a status and message property. The message property has been misspelled though:


Because ‘message’ has been misspelt as ‘mesage’ in the performAction function when we run this code in IE we’ll see a popup alert with the message “undefined”, rather than the actual message we were hoping to see.

In a large project it can be difficult to track down why a property we expect to exist is undefined. Instead of trawling through lots of code we can simply add the line “debugger;” above the alert statement. IE will then automatically prompt us to debug the code in Visual Studio when it hits that line. From the locals window we can see that the ‘message’ property has been misspelt.

Using the call stack window, which can be accessed in the same way we accessed the locals window, shown at the bottom right of the above screenshot we can work out exactly where this problem occurred. If we double click on the ‘performAction’ line, the previous statement in the call stack, we’ll see the source of the error.

While debugger statements can be a useful tool in helping you track down problems you should be careful not to leave them in your production code!
More advanced debugging
So far we’ve covered some basic examples, such as calling non-existent functions and undefined properties. Using the locals and call stack windows it was relatively straight forward to track these issues down. There are times when the techniques we’ve discussed so far can’t help though. We can’t see what global variables exist or what value they have with the locals window, for example, and the call stack doesn’t always handle remotely loaded or dynamically executed code very well.
For these situations we must turn to the immediate window. It is by far the most powerful debugging tool that Visual Studio has to offer, allowing us to evaluate JavaScript expressions on the fly.
The immediate window can be accessed in the same way that we accessed the other windows. Clicking inside the window will give it focus. We can then type JavaScript statements directly into the window and see the result. For example, type “window” followed by enter and you’ll get a print out of everything in the global scope.

When combined with the JavaScript arguments variable we can look in detail at all the current function arguments and the calling function. While the code in the next example isn’t something you’re likely to see in a real project, it does help to demonstrate techniques that can be extremely useful.


We’ll load this up into IE and then go straight to the immediate window once we’ve opened up the debugger. If we type “arguments” followed by enter we’ll see the following information displayed:
arguments
{...}
    [0]: "argument 1"
    [1]: 2
    [2]: {...}
    caller: null
    length: 4

The “{…}” tells us that arguments is an object. We also see this next to [2], so we know that the third argument (in array position 2) is an object. We can see what properties this object has by simply typing its name into the window:
arguments[2]
{...}
    argument: 3

The fourth argument wasn’t listed in the original output because it’s a function. We know it exists though because the length property tells us that there are 4 arguments. We can also confirm it is there using typeof:
typeof arguments[3]
"function"

Unfortunately the immediate window isn’t quite so helpful with functions as it is objects, and if we type in the name of the function we just see “{…}” rather than any details of the function itself. Fortunately there is a handy workaround. If we type “alert(arguments[3]);” then the function code will be displayed in an alert dialog:

Hopefully these examples have conveyed just how powerful the immediate window is.
Summary
With the help of Visual Studio it is possible to transform IE6 from obscure error messages into an effective debugger. By using the local and call stack windows we can quickly and easily track down the majority of problems. The debugger statement allows us to automatically jump into the debugger at any point in our code. Should we come up again a more complex where the other tools can’t help us then we can always turn to the immediate window, which allows us to execute arbitrary JavaScript to inspect the current environment.
About the Author
Ben Dowling is a passionate software developer who specializes in web and mobile application development. He currently works for Mendeley in London, UK, and regularly blogs about development at Coderholic

Six Revisions » JavaScript

The Power of jQuery with Ajax

What is Ajax?

Ajax in Practice

What is jQuery?

The Problem with Ajax

Hello Ajax. Meet jQuery.

Get Started with Ajax + jQuery

References

Related Content

About the Author

20 Fresh JavaScript Data Visualization Libraries

1. Highcharts

2. gRaphaël

3. JavaScript InfoVis Toolkit

4. jQuery Visualize Plugin

5. moochart

6. JS Charts

7. dygraphs

8. JSXGraph

9. Protochart

10. Bluff

11. Style Chart

12. jqPlot

13. jQuery Sparklines

14. jQuery Google Charts

15. Canvas Pie Chart with Tooltips

16. TufteGraph

17. Timeline

18. Protovis

19. milkchart

20. Timeplot

Related Content

About the Author

Getting Started with jQuery

Why a JavaScript library?

Overcoming browser differences

Unobtrusive JavaScript

Accomplishing complex tasks with ease

Further reading

Understand CSS concepts

Understand JavaScript concepts

The jQuery source code

jQuery syntax

The jQuery wrapper

jQuery commands

Chaining commands

Running code when the DOM is ready

Further reading

Conclusion

Further reading

Related Content

About the Author

10 Awesome Techniques and Examples of Animation with jQuery

1. Puffing Smoke Effect in jQuery

2. Crafting an Animated Postcard

3. Create a Realistic Hover Effect

4. Scrolling Background Effect

5. Multiple Animations with Glimmer

6. jQuery Blend

7. Parallax Scrolling Background

8. Stunning Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

10. Animated Header Using jQuery

Related Content

About the Author

6 Advanced JavaScript Techniques You Should Know

1. Closures to Extend Variable Scope

Further Reading

2. Object Literals to Pass Optional Arguments

Further Reading

3. Contextual Targeting of DOM Elements

Site Title

Page Title

Further Reading:

4. Using Namespaces to Prevent Conflicts

Further Reading:

5. Hybrid Application Development

Further Reading:

6. Rendering Readable HTML

/
pairs inside it.

<h3>Item Oneh3> <p>Lorem ipsum dolor sit amet.p>
Item Number Two

Lorem ipsum dolor sit amet.

Here is Item Three

Lorem ipsum dolor sit amet.

Take a closer look at this and some other jQuery tricks over at WebDesignerWall.