Six Revisions » JavaScript

Writing Better JavaScript with CoffeeScript: The Basics

Jacob Gube — Thu, 03 Nov 2011 10:00:17 +0000

I’m a huge fan of JavaScript. Its popularity has really surged in recent years with the advent of rich internet applications (RIAs), Ajax and web development libraries like jQuery that makes JavaScript more appealing and accessible to a broader audience.

However, that doesn’t mean the language is without its quirks, and often these can come from nowhere to bite you. There’s a long running joke about JavaScript’s good parts compared to its bad parts and how the language has many problems. In this multi-part guide, I’ll present you with a solution to most of these problems: CoffeeScript.

This is the first part a series of articles that introduces you to this wonderful programming language.

What is CoffeeScript?

CoffeeScript is a small programming language that compiles into JavaScript. It seeks to make writing JavaScript code better by providing you with a more consistent and succinct syntax, as well as by avoiding the "bad parts" and quirky/irregular nature of the JavaScript language.

The official CoffeeScript website.

CoffeeScript was created by developer Jeremy Ashkenas, a lead developer for DocumentCloud (an open source tool for journalists).

Jeremy Ashkenas, creator of CoffeeScript. Source

CoffeeScript is an open source project. You can find the CoffeeScript source code on GitHub.

How CoffeeScript Works

The code writing and use process of CoffeeScript is simple:

Write your code in a .coffee file
Compile it into a .js file
Include the .js file in your web page/s like you would any other JavaScript file

If you’re someone who fears the word "compile" (in step 2 above) don’t worry – later on, we’ll look at some tools to make all the compiling automated.

CoffeeScript Code Example

Let’s jump right in by showing you a small snippet of JavaScript (using jQuery), and then the same code written in CoffeeScript.

The function will write Hey Six Revisions readers! inside the tag of the web page.

JavaScript:

$(function() {
  $("body").html("Hey Six Revision readers!");
})

CoffeeScript:

$ ->
  $("body").html "Hey Six Revision readers!"

CoffeeScript allows you to write JavaScript quicker due to its slimmed-down, simplified syntax.

Here are two basic rules to remember:

Whitespace matters. There are no curly braces (e.g. {[statements]}) in CoffeeScript. Instead, indentations are used.
No parentheses. Functions that take arguments do not need parentheses (e.g. (argument)) around them as you can see in the code above. You can use them if you like, and in some places of your script, it might make your code more readable, but most of the time you can leave them out. Multiple arguments being passed in are separated with a comma (e.g. argument1, argument2, argumentN).

JavaScript Syntax vs. CoffeeScript Syntax

So, going back to our above code example, let’s look at some differences between JavaScript and CoffeeScript.

Firstly, you can see we’ve replaced function() {} simply with $ ->. The first line becomes $ ->, which calls jQuery and passes in an anonymous function.

If you wanted to declare a function that takes arguments, in JavaScript it would be like so:

function say(something) {
  alert(something);
}

But in CoffeeScript, it’s terser:

say = (something) ->
	alert something

You’ll also notice we can leave out semicolons (;). CoffeeScript adds them in when it compiles.

Another good thing is that you don’t need to use the var statement, which you should use when you’re writing in JavaScript to avoid accidentally creating global variables.

So instead of:

var a = 2;

We can just write:

a = 2

All of this may seem hard to get used to at first — especially if you are more familiar with programming languages like PHP that use curly braces ({}) to enclose a statement block and semicolons (;) to indicate the end of a statement — but it is much quicker to type, and over time, it becomes natural.

Installing CoffeeScript

By far, the most popular installation of CoffeeScript is to install the command-line version through Node.js.

First, make sure you’ve got Node.js and that the Node Package Manager installed.

Then, to install CofeeScript, issue the following command:

npm install -g coffee-script

Compiling CoffeeScript Files

To compile a CoffeeScript file, navigate to the directory it’s stored in and type this command in the terminal:

coffee --watch --compile example.coffee

That command will automatically recompile example.coffee into example.js every time you save the file because of the --watch option, which monitors modifications of the CoffeeScript file.

All the CoffeeScript command options can be found on the CoffeeScript documentation on GitHub.

For those on Windows without Node.js installed, I was able to locate an open source project called CoffeeScript compiler for Windows by Alexey Levedev. I cannot vouch for it because I haven’t tried it, but it might be worth a try. I do highly recommend installing with Node, however.

I also managed to find LiveReload 2, a Mac app that watches your folders for file changes and automatically refreshes the page. The key thing is that LiveReload can automatically compile CoffeeScript for you, thus avoiding any need to go via the terminal. Unfortunately, this is a Mac-only app. If you know of any similar programs for Windows, please share it in the comments.

Summary

This is the end of our first guide on CoffeeScript.

This is what we covered:

What CoffeeScript is
Advantages of CoffeeScript over JavaScript
How CoffeeScript works
The most important bits of CoffeeScript syntax
A comparison of CoffeeScript versus JavaScript syntax
How to install CoffeeScript
How to compile CoffeeScript into JavaScript

In part 2 (coming soon), we’ll dive further into the CoffeeScript syntax and cover everything in more detail.

About the Author

Jack Franklin is a 19-year-old web developer and university student from Bath, UK. He has a passion for clean code and a huge interest in JavaScript, alongside HTML, CSS, PHP, Ruby and Objective-C. See his work and read his blog on his portfolio site and find him on Twitter: @Jack_Franklin.

11 jQuery Plugins That Can Enhance Your Typography

Jacob Gube — Wed, 21 Sep 2011 10:00:11 +0000

Advertise here with BSA

There is an array of wonderful jQuery typography plugins that give web designers greater control over their sites’ web typography. At the hands of a capable designer, you can leverage the power of jQuery in web pages to reach a high level of typographic elegance and sophistication.

Below is a list of top jQuery plugins that serve a wide range of purposes related to web typography, from helping you implement @font-face to providing your users with better usability and functionality when it comes to your website’s fonts.

1. Lettering.js

View Demo

A jQuery plugin designed to facilitate "radical web typography," Lettering.js allows designers the ability to set dynamic and eye-catching typography that would be either prohibitively difficult or impossible to do using other methods. The goal of Lettering.js is to give you complete control over a web page’s type, right down to the manipulation of individual letters.

2. jMetronome

View Demo

A popular concept in typography that aids in the spacing and arrangement of beautiful, easy-to-read type is called typographic rhythm. This is the idea — well established in the typography world — that the relationship between text and space in a document creates a visual rhythm, which affects the overall aesthetic tone and readability of the document.

In web pages, when body text is interspersed with images, tables, blockquotes and other elements, it can become difficult to maintain vertical rhythm without sacrificing content editing and flexibility.

The jMetronome plugin for jQuery helps make it easier to maintain the typographic rhythm of a web page even with the addition of non-textual elements.

3. FitText

FitText helps you with typesetting, especially when crafting responsive web designs. The plugin automatically scales your text elements depending on the browser’s viewport size. An example scenario would be if you would like your headings to scale down when viewed in mobile devices to reduce the screen real estate they take up.

4. FontEffect

View Demo

FontEffect is a jQuery plugin that gives designers the ability to apply text effects such as outlines, shadows, gradients and mirroring onto normal HTML text elements. This means FontEffect applies the desired effects without the need for images. Though these text effects can be achieved using CSS3, FontEffect could be useful if you prefer or need to use JavaScript.

5. jQuery Approach

View Demo

This jQuery plugin provides web designers with the ability to make text objects change depending on the proximity of a user’s mouse cursor. For example, a designer can use Approach to configure a text element to grow smaller and lighter as the cursor approaches it, and to expand and become darker as it gets further away.

This is a great plugin for designers who want to provide users with an interactive experience upon visiting the site.

6. jqIsoText

View Demo

The jqIsoText jQuery plugin is a simple plugin that does one thing: It renders an arching effect whereby the characters of the target text element get bigger as you approach the center and then tapers off as you get to the last character. It mimics, to the best of its abilities, an isometric/reflective appearance. It’s an interesting, fun and single-purpose plugin that might be useful for calling attention to important text content using distinctive design principles.

7. Airport

The Airport jQuery plugin is a text-animation plugin that mimics the old, flickering schedule/information boards you used to see in airports, train stations, bus stations, etc.

This plugin provides you with the ability to creatively style and animate text that you’d like to garner attention.

8. jQuery Glow

View Demo

As the name implies, this simple jQuery plugin gives you the ability to make your text glow when you hover over them. Though a similar effect can be done with CSS3 (for ideas, see some interesting CSS3 experiments and demos), aside from the fact that many users still do not use CSS3-capable web browsers, using JavaScript allows you to bind the glow effect based on events outside of hover, trigger, focus, etc. that CSS can’t listen to.

9. jQuery sIFR Plugin

The jQuery sIFR Plugin allows for the easy implementation of sIFR (Scalable Inman Flash Replacement).

sIFR is an old method of rendering text that use non-web-safe fonts. It uses Flash. Though @font-face is now the popular way of composing web type using custom fonts, it might have limitations that might make you choose sIFR instead. (However, sIFR has its own downfalls that can steer you away from it as well.)

10. jQuery Text Resizer Plugin

View Demo

The jQuery Text Resizer Plugin gives your users a degree of control over font sizes. The plugin, by default, adds three user commands to a web page (increase font size, decrease font size and reset to the normal font size).

Though most mainstream web browsers do offer text-resizing functionality, many Internet users aren’t aware that these features exist and might appreciate an in-page way to resize text.

The plugin works in tandem with the jQuery Cookie plugin so that it’s able to remember the user’s settings when they next visit (if they have cookies enabled, of course).

Another similar plugin to check out is Font Resizer.

11. BigText

View Demo

The BigText jQuery plugin is simple: It automatically sizes your text to fit inside its parent element. This results in, among other things, perfect justified alignment (though typically justified alignment is achieved by altering the spacing of characters and words, not through font size). What’s great about this plugin is that it works in dynamic, editable text areas so that as the user types, the font resizes.

Conclusion

One thing to note is that the widely regarded best practice in web design is to use CSS to deal with the presentation/visual layer (such as web typography) if possible. However, CSS has limitations that JavaScript can solve.

The sheer number of plugins for jQuery is staggering, and the items on this list are only a handful of the most interesting and powerful plugins available.

The development of new jQuery plugins continues to proceed at a breakneck pace. From manipulating the style of individual letters to facilitating responsive web design, if there is a typographical tool that can be imagined, there’s probably a jQuery plugin that can realize it. So if you know of a good jQuery plugin that can improve web typography, please share it in the comments below.

About the Author

Ken Hattori is a technology writer at onlinegraphicdesigndegree.com based in Seattle. He has a passion for design, photography, letterpress, and just about anything that is appealing to the eye. Having spent some time living in Japan, he has developed a fascination with minimalistic and clean designs.

Top 10 Mobile Web Development JavaScript Frameworks

Jacob Gube — Sun, 14 Aug 2011 10:00:08 +0000

Advertise here with BSA

Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.

To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript frameworks you can take advantage of.

Some common characteristics of JavaScript mobile web development frameworks:

Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.
Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.
Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.
Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.

In this article, you’ll find my top picks of JavaScript mobile web development frameworks you should consider using to build your next mobile web app or website.

1. jQuery Mobile

jQuery Mobile, a framework that will help you rapidly and confidently develop mobile app user interfaces across popular mobile device platforms like iOS and Android, is perhaps the most popular project out there.

The framework boasts a lightweight code base (weighing in at 20KB when minified and gzipped) and a huge bevy of standard user interface elements that mobile device users are accustomed to, such as switches and sliders.

See jQuery Mobile in action by going to its demo page (it doubles as the framework’s official documentation).

If jQuery isn’t your thing, check out MooTools Mobile, a MooTools plugin by MooTools core developer Christoph Pojer and Dojo Mobile, which leverages the Dojo API to help developers rapidly build apps for mobile platforms.

2. Titanium Mobile

This powerful and robust mobile web development framework allows you to use your existing HTML, CSS and JavaScript knowledge to make native-like mobile apps for iOS and Android.

As one of the bigger mobile web development frameworks out there — with over 300 APIs and an active developer community — you know you’ll often find help and support from peer developers.

Titanium Mobile supports native UI elements for iOS and Android like table views, tabs, switches and popovers. It also has features that enable you to interact with the mobile devices’ camera and native file storage system.

3. The-M-Project

The-M-Project is another solid JavaScript framework that takes advantage of new HTML5 features for easier and better mobile app development.

The framework follows the popular model-view-controller (MVC) software architecture pattern, which is a huge selling point for many developers.

It has offline support so that your users can continue working without an Internet connection (they can then sync up to the server next time they’re online) and excellent documentation (the project has a Getting Started guide for new users of the project).

To witness The-M-Project in action, check out their showcase, which includes items like the ToDo App and KitchenSink (a showcase of all the UI elements included in the framework).

4. Jo

Jo is a framework aimed at developers working on HTML5-capable mobile devices such as those the use the iOS, webOS, Android and Chrome OS platforms.

It has standard, native-like UI elements such as the web form widget for your login screens and the popup widget that you can use for providing extra information when a user clicks on an interface element.

See the demo page on their site, which includes a screencast displaying Jo in action on multiple devices and mobile platforms.

5. xui.js

If you need something super lightweight and you only need features for standard client-side development tasks such as DOM manipulation, event-handling, Ajax and a few animation effects, check out xui.js. xui.js packs a punch in such a tiny package (4.2 KB when gzipped).

xui.js provides targeted builds for specific mobile browsers such as WebKit and IE mobile for when you’re developing apps strictly towards a particular mobile device operating system.

6. EmbedJS

EmbedJS is a JavaScript framework for embedded devices (which includes mobile phones, TVs, tablets and so forth).

What’s great about EmbedJS is that it has multiple builds for specific platforms and browsers such as iOS, Firefox, Android, etc., which translates to an optimal user experience and less code to serve to your users. And if you’d like to customize your build, the creators provide you with the EmbedJS Build tool.

EmbedJS is based on Dojo, so if you’re familiar with the Dojo API syntax, you’ll be able to use EmbedJS right away.

7. zepto.js

zepto.js is a mobile JavaScript framework built specifically for mobile WebKit browsers (e.g. Safari and Chrome). It prides itself in its minimalist development philosophy, which translates to simplicity for helping developers get stuff done quickly. What’s more is that this JS framework is ultra-lightweight at only 5KB.

The zepto.js syntax borrows from, and is compatible with, jQuery — a welcome plus for many developers.

To learn more about this framework, see developer Thomas Fuchs’ presentation of zepto.js.

8. DHTMLX Touch

DHTMLX Touch, a free HTML5/JavaScript framework optimized for touchscreen devices, brings you the ability to craft beautiful mobile web apps quickly.

The DHTMLX Touch UI Designer is a visual editor for building mobile user interfaces, and it’ll help you construct top-notch UIs with minimal coding.

Check out samples of DHTMLX Touch in action, which includes a menu app for the iPad (perfect for restaurants) and Book Shop (a proof-of-concept demo for an e-store offering books).

9. Mobilize.js

Mobilize.js is a JavaScript framework for porting your existing website to a mobile-friendly version. It’s easy to integrate into your site because it does everything on the client-side, and has facilities for detecting mobile browsers so that you can serve them the mobile version of the site.

WordPress users might want to check out the Mobilize.js WordPress plugin.

10. ChocolateChip Mobile

ChocolateChip Mobile is a JavaScript framework developed towards future-forward web browsers. It shares syntax similar to jQuery or Prototype.

The resemblance to jQuery doesn’t stop at the syntax — for example, like jQuery, it can handle events through binding and delegation, and has methods such as .css and .toggleClass.

You can grab ChocolateChip Mobile’s source code off GitHub.

Other JavaScript Libraries for Mobile Web Development

jQTouch: a jQuery plugin specifically for Android and iOS devices.
jqpad: a web development framework built and optimized for iPad development.
iUI: a user interface framework for making iPhone-like web apps.
Sencha: an HTML5 mobile web development framework (suggested by Steven Roussey)

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 also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

The Power of jQuery with Ajax

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

Advertise here with BSA

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

Advertise here with BSA

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

Advertise here with BSA

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 freelance web developer based in Toronto, Canada. He blogs about front-end code on Impressive Webs and is a co-author of HTML5 and CSS3 for the Real World, published by SitePoint. You can follow Louis on Twitter or contact him through his website.

10 Awesome Techniques and Examples of Animation with jQuery

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

Advertise here with BSA

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

Advertise here with BSA

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 blogs about front-end code on Impressive Webs and is a co-author of HTML5 and CSS3 for the Real World, published by SitePoint. You can follow Louis on Twitter or contact him through his website.

10 Easy jQuery Tricks for Designers

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

Advertise here with BSA

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

Advertise here with BSA

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.