Javascript Articles

This is part 2 of my series on JavaScript Industry Notes based on attending The Ajax Experience 2008, in Boston.

Smush It Image Optimizer

The Yahoo performance team unveiled a tool called "Smush.It" that grabs all of the images used on a website and compresses them. I tried it on my website and it cut 26.53% off the size of my images. Pretty Impressive.

Dreamweaver CS4

Kevin Hoyt of Adobe showed off the new features of Dreamweaver CS4. I was actually quite impressed with how far they've come from being simply a WYSWYG drag'n'drop HTML editor. The new version features four things worth noting:

1. Dreamweaver's JavaScript code completion auto-detects what functions you can perform on an object. It also reads external scripts that you include and then update the code completion accordingly.
2. Includes the Webkit rendering engine so you can view how your pages are looking in split view while you are coding.  It also has something called, "live view" where you can see the HTML being modified as the script runs, much like Firebug does.
3. You can pause JavaScript on the rendered page, right click an element and inspect its CSS properties, allowing you to even jump to the actual line item of the CSS file's class definition.
4. No more opening up dependent files as Dreamweaver CS4 already knows what files you have included and opens them for you.

Comet Basics

Greg Wilkins came up with an interactive way of describing to the audience what Comet is. It involved the audience acting as the web browser and Greg as the server.

Normal Scenario

Audience: "Hello, I'm Firefox/IE/Opera/etc. and I want to view my stock."
Greg: "Hello, I'm the server and here are your stock prices."
Audience: "Are there any updates to my stock price?"
Greg: "There are no updates to your stock price."
Audience: "Are there any updates to my stock price?"
Greg: "Your stock price went up 1 point."

Same Scenario with Comet

Audience: "Hello, I'm Firefox/IE/Opera/etc. and I want to view my stock."
Greg: "Hello, I'm the server and here are your stock prices."
*delay*
Greg: "Your stock price went up 1 point."

I pulled the above chart from his presentation later that day. Basically Comet is a way for the server to talk to the client when it has new information, rather than the client polling the server a bunch of times asking for new information, where latency can occur between each poll.

Firebug's Future

John Resig explained his involvement with Firebug. The two main points I pulled out:

• Resig is working on documenting and clean up the 35,000 lines of JavaScript that Firebug currently has. Firebug was previously maintained largely by one person and his job is to come in and make things readable and easier to maintain going forward.
• FireUnit - Resig demoed a test suite built into firebug that allows for a full test runner built directly into the browser.

Netflix explained that people were creating mashups via scraping Netflix's website, which led to broken links and bad applications. Now with their new API he was excited on what was being created.

Internet Explorer 8 and Visual Studio

The Microsoft product manager explained a new focus of IE8 was on us, the developers. He showcased the, "development toolbar" that will be packaged with IE8 in order to provide better debugging. Even though it is widely known as a clone of Firebug for IE, he managed to never mention Firebug in his presentation. Regardless, it will provide us developers a far better experience when developing for Internet Explorer in the future.

The next version of Visual Studio will be packaged with jQuery and will feature full IntelliSense for the library. Microsoft setup a standard for documenting JavaScript libraries and is hoping for community members to contribute in order for other libraries to be able to use Visual Studio IntelliSense.

I'll be covering more of the JavaScript industry in Part 3, until then please subscribe if you haven't already. Also check out Part 1 if you missed it.

Over the last 4 days I attended The Ajax Experience 2008 (Boston) and jQuery Camp 2008. Each day I had many intense discussions about JavaScript with industry experts. I've been forming a picture of the industry with each discussion and presenentation and would like to share what I've found out.  If you would like a play-by-play, Nathan Hammond wrote a great job on covering jQueryCamp and TAE day 1 and TAE day 2. Otherwise stay and read-up on my overview.

Google Chrome

Ojan Vafai spoke on "Google Chrome" Google's new web browser, which is built from the Chromium open source project.

"The browser crashing will be as drastic as the computer blue screen."

He stated that as we do more in the browser, it becomes much more important that the browser doesn't completely crash when things go wrong. He says that it will become increasingly more drastic to people when their web browser crashes. I agree, because it isn't as easy to bounce back from a crash when I am using web applications - I might have lost data in the last session that going back to that same URL won't get the data back.

Google Chrome tries to solve this issue with multi-processing. Running each tab as a task, to which there is a task manager that you can kill each process.  Also separate processes can take advantage of people running multiple processors.

"Browsers are what is holding up performance and that needs to change."

Ojan also stated that the bottleneck of writing JavaScript applications for the web is on the web browsers, and not the developers. That is why Google wrote Chrome, to increase the speed of their applications and allow them to write more robust applications in the browser.

"We want to fix bugs, instead of you having to hack around them."

Ojan also pleaded with the audience about getting involved in documenting bugs, instead of hacking around them. The Chrome team would rather a bug be fixed than to have someone hack around the bug.

Google Chrome chose WebKit as the rendering engine of the browser. He explained:

"We didn't want to create a new rendering engine for web developers to have to test against."

Overall Google Chrome is a great addition to the web browser landscape.  As competition increases, so does quality.

The JavaScript Library Panel

PPK, who runs Quirksmode.org interviewed the JavaScript library authors from Prototype, YUI, Dojo and jQuery.

The panel asked how their library worked within Google Chrome, and it seemed that there were no huge problems with the libraries, just a few minor issues that were not hard to deal with.

The panel got a little fired up though, when John Resig (jQuery) made the following declaration:

"Browser sniffing is used almost as bad as eval()."

He maintained that in order to support new and different browsers, the library needs to not contain browser sniffing. The other library authors thought this goal of not having browser sniffing in the library was a pipe dream.  I didn't understand their arguements for why this was the case.  But John's arguement seemed clear to me, "you test browser capabilities rather than browser types and versions". It seems like a relatively simple concept, although tough to execute.

John reassured me in person that he would not have made that statement if he didn't have code to back it up.

The panel was asked in the end, "If you had to use a library and couldn't use your own, which one would you chose." The audience laughed.

Prototype representative:

"It depends on the case.  If I am a designer, than I'd use jQuery. But if I was a Java developer, than Dojo."

Dojo representative:

"I would use the new Goog library because it looks a lot like Dojo."

jQuery representative:

"Prototype."

YUI representative:

"jQuery."

I'll be covering more of the event and industry in Part 2 - until then please subscribe if you haven't already. Thanks!

Here are some themes for jQuery UI Datepicker, I used ThemeRoller and then added a few fixes. The stylesheets are stripped them for use with datepicker only.  If you want these datepicker themes, download the theme pack.  Thanks to Filament Group for making ThemeRoller!

NEW! - Added the, "grabanski" theme.

I desperately need and am looking for a solid way to upload and attach photos to my web applications.  I have no problem coding uploading one at a time - that is simple - but what about uploading and managing multiple photos?  SWFUpload has been my uploader of choice, but I have found it to be fairly shaky at times. Is there something better than SWFUpload, or is it the best?

Please keep in mind that I use PHP as my server-side technology, if that matters.

I'm giving away $10 via PayPal to the best answer.

Update: I'm looking for any method to upload images to web applications.  This could be picasa, flickr, air application, normal forms with ajax ... whatever is easiest for people to get their pictures on web applications.  Even though your ideas may not work for every case, I (and the community) need to hear your ideas and any methods used for uploading images.

Since query strings are limited depending on the browser, I wrote this function to grab redundant data variables and consolidate them into comma-separated values. For instance:

JavaScript:

foo=1&foo=2&foo=3&blah=a&blah=b

would turn into...

JavaScript:

foo=1,2,3&blah=a,b

This saves some room in the query string. Of course you need to write a trivial line to parse it on the server side, but this saves you some room for more variables in a query string. Here is my attempt at a JavaScript function that does this: (don't use this, use John's revised function below)

JavaScript:

function compress(query) {
    s = {type:[],value:[]}
    $.each(data.split('&'), function(n){
        parts = this.split('=');
        s.type[n] = parts[0];
        s.value[n] = parts[1];
    });
    var csv = '';
    while(s.type.length > 0) {
        value = s.value.shift();
        type = s.type.shift();
        
        while((pos = $.inArray(type, s.type)) > -1) {
            value += ',' + s.value.shift();
            s.type.shift();
        }  
        csv += type + '=' + value + '&';
    }
    return csv.substring(0, csv.length-1);
}

Sorry, forgot to mention that $.each and $.inArray are jQuery functions.

I messaged John Resig, and he wrote the function that was much smaller, and faster.

JavaScript:

function compress(data){
    var q = {}, ret = "";
    data.replace(/([^=&]+)=([^&]*)/g, function(m, key, value){
        q[key] = (q[key] ? q[key] + "," : "") + value;
    });
    for ( var key in q )
        ret = (ret ? ret + "&" : "") + key + "=" + q[key];
    return ret;
}

UPDATE: John Resig followed up with a post of his own, titled search and don't replace.

How John's Script Works

You may be asking, but how does this work? - let me explain. First, the replace function accepts a regular expression as the first parameter, and the second parameter can be a string or a function.

JavaScript:

replace(/([^=&]+)=([^&]*)/g, function(m, key, value){

As far as I'm concerned, that lines is the magic of the script so I will go furthur.

JavaScript:

/([^=&]+)=([^&]*)/g

This is the regular expression that matches data that starts with ampersand and goes until the end or until the next ampersand. This extracts the data. The /g part loops through each match instead of just one, and does a replace on it.

The function he is passing in has the three parameters set by the regexp. "m" is the match, "key" is the unique identifier, and "value" is the entire string that the regexp is running against.

Next he sets the object based on the key, if it exists already than add a comma between after the current value followed by the next value.

JavaScript:

q[key] = (q[key] ? q[key] + "," : "") + value;

The last part of the code is simply looping through the, "q" object and outputting our new compressed query string. Brilliant.

Google let me know that they are using jQuery UI Datepicker on Google Code (http://code.google.com/events/calendar/add/). This is great news, Google is actually adopting something I wrote! Here is a screenshot:

Google did a nice job of changing the colors to match their site (refer to the screenshot above). I think the simple skin provides an easy way to adopt the datepicker's look and feel into web applications, but I think that we need new skins for the datepicker. If anyone wants to contribute designs please let me know.

I can't leave this post without mentioning Keith Wood, thanks for all the great work. And to everyone who has sent me emails and feedback, thanks again!

Should you offer your website to those without JavaScript? - or should you simply require it to make sure your website works how you intended? Where do you draw the line in the sand between functionality and accessibility?

The Simple Answer

Do not require JavaScript in any public areas of your website.

If your website is public-facing, then you should not require JavaScript. It is bad for search engines and accessibility. The search engines will not be able to parse all of your website, leaving you with bad search rankings. And most obviously people without JavaScript turned on will not be able to view your hard work.

The non-public facing parts of your site varies. You may be able to tell ahead of time whether or not your administrators (non-public users) use JavaScript, which is usually the case. I think it is fine to require JavaScript for admin interfaces so long as they are not open to just anyone.

The Stark Reality

There are cases in which you simply cannot build websites to accommodate JavaScript on or off. This is life. Requiring JavaScript then boils down to three basic factors: requirements, timeline, and dedication.

Requirements

First, is a non-JavaScript of the website required? If not then you can't base your decision to build a non-JavaScript version based on the requirements. You then have to factor in the next two variables.

Timeline

Do you have time built into the project for building a non-JavaScript version of the website? If you aren't required to build your website without JavaScript, then what is the timeline like? Does it allow you to go the extra mile for your users? If you have the time on your hands, then it comes down to the last factor.

Dedication

Lastly, are you dedicated enough to develop that perfect website that works without requiring JavaScript? We front-end developers sometimes aren't dedicated enough to build a websites that gracefully degrade.

To be fair, there is usually not a lot of pressure on us to go this far with our work - so why do it? The client usually doesn't care and neither do your coworkers. Requiring JavaScript is a personal choice, but soon enough it won't be. You will be forced to develop websites that don't require JavaScript in the future, so why not learn now? Target was sued and soon enough businesses will realize that this is important.

One Final Note to Business Owners and Business Analysts

If you are a business owner or business analyst reading this, then please realize this: building websites that have great features and yet works without JavaScript can be a difficult task. Don't pressure web developers to do this without paying them the proper time and resources to accomplish the task. Time is valuable and money talks.

Here is my ultimate list of almost 50 datepickers (popup calendars) each rated each based on useful features, documentation, customization options and internationalization.

If you see anything inaccurate in this table please let me know.

I have gathered this list over the last year that I have been developing jQuery UI Datepicker with Keith. I never used anyone else's code, but I certainly have gotten feature ideas from other datepickers - as I'm sure others have used features ideas that Keith and I have made.

If you feel I have rated a datepicker unfairly low or missed one from the list, let me know. I have probably overlooked something - there are so many great scripts out there it is hard to be perfectly objective and fair.

Big Corporation IT

Big corporations are typically resistant to adopting change - and for good reason. They have to work at keeping stable a large amount of applications in one environment. Internal IT teams will usually only adopt something if it doesn't interfere with their jobs or make them more difficult. You must have a really good reason to bring something new in. I understanding that, so how do you get them to approve you using a relatively new library like jQuery?

The Easy Way

The simplest way I've found to get jQuery into projects is use it for doing something very specialized. Creating tabbed panes, graphing data, or maybe some simple animation effects that are normally created in Flash. Either way, from that point on you can use it in the application. But what if you want to build a project from the get-go, from scratch in jQuery?

Big Corporation Project, Built on jQuery

Currently I am building a Google Maps application for one of the biggest banks in the world, HSBC. It is almost done, and I used jQuery to build the application with my manager's approval. As expected, when we handed the code off to HSBC's internal IT team in India they asked why we used jQuery:

"Is there any advantage of using jquery as google is already providing Ajax api for the same purpose. Also please clarify whether there is any licensing issues with jquery. If it is free, then can we use in commercial projects?"

My response:

jQuery is used is for parsing XML and adding behavior to the page elements in a faster and more compatible way. jQuery eliminates the problems that JavaScript has with inconsistent rendering between browsers and jQuery also improves the rendering speed / performance of the application. The code is arguably easier to maintain because it reduces the overall code size of the application because you do not have to code in different ways depending on the browser.

jQuery is dual licensed under the MIT and GPL licenses (http://docs.jquery.com/License), which means that it is 100% free for commercial use.

Note that jQuery is used by: Google, NBC, MSNBC, Bank of America, Amazon, Intel, BBC, Newsweek, AOL and Intuit - just to name a few. Full list: http://docs.jquery.com/Sites_Using_jQuery

A very vibrant and active community surrounds jQuery and it will continue to be well documented and maintained.

My response was very well received - feel free to use that explanation in your own corporation. I have to say though it has been much easier to get accepted since Google uses jQuery. My feeling is that internally to use jQuery you really only need your manager's approval. Once you sell him and your immediate team around you on the idea, you shouldn't have a problem using jQuery for projects. After all, it makes all of our lives easier. jQuery has saved me countless hours and the client's work is going to be better because of it. Thanks, John and the jQuery team.

A JavaScript date library lands with a, "Kaboom". Built with brilliant colors, I mean strings, or strings, dates and numbers, whatever. The point is that you can pass in human readable text and it will convert it into a JavaScript date object. For example I entered in, "Next February" and it returned February 2008:

This date library can read practically everything in 150 cultures/countries! Okay well maybe not everything. "Your Mom" doesn't work, who figured:

I am really pumped to integrate this date library with jQuery UI Datepicker. In fact, the author of datejs came up to me at The Ajax Experience in Boston to tell me about his date library and talked about working together. It has been released, and I am impressed.

I am building a Google Maps project and jQuery is making my life so much easier when parsing XML.

Regular JavaScript XML Parsing

JavaScript:

var xmlDoc = request.responseXML;
try // Build Markers, if available
{
    var markers = xmlDoc.getElementsByTagName("marker") ;
    for ( var i = 0; i < markers.length ; i++ )
    {
        var point = {
            markers[i].getAttribute("lat")),
            markers[i].getAttribute("lng")
        };
    }
} catch(e) {}

jQuery XML Parsing

JavaScript:

$(request.responseXML).find("marker").each(function() {
    var marker = $(this);
    var point = {
        marker.attr("lat"),
        marker.attr("lng")
    };
});

The jQuery code is so much easier to read and understand. This is a basic example, but imagine when things get complex. After writing a few complex statements, you will realize the jQuery code will still be understandable, where as the JavaScript code will become hard to maintain. Thank you jQuery for making my job easier and more fun.

jQuery UI Datepicker v3.0

I am happy to announce UI Datepicker version 3! (previously named jQuery Calendar)
UI Datepicker Project Page

• Included in the official jQuery User Interface library.
• Date range selection
• Display multiple months at a time
• More customization options
• License changed to reflect jQuery
• Compatibility option to use existing code

UI Datepicker was presented at jQuery Camp in Boston at Harvard. Here are the slides from the presentation:
jQuery Datepicker / Calendar Success

Mods based on jQuery Calendar:

West Wind created an ASP.NET control out of jQuery Calendar

PHP Framework Symfony Plugin (ddJQueryCalendar)

Drupal jQuery Calendar Plugin

Featured on Smashing Magazine Date Pickers

Thank you all for your great feedback which has made this Datepicker so successful!

I viewed each of the jQuery plugins in the jQuery plugins repository. I couldn't believe how many there were! So I decided to make this master list to weed out any plugins that were either broken or I didn't find any practical application for. You will notice I added, "EXCELLENT" to the plugins that I thought were exceptional.

• Accessibility Stylesheet and text size switcher.
• Accordion Accordion interface with a few variations.
• AlphaNumeric Prevent users from inputing special characters.
• Ajax File Upload Loading graphic displays while file is uploaded.
• appendDom Write HTML with JavaScript, great for displaying Ajax results.
• appendText Converts text into post friendly html.
• blockUIEXCELLENT Create a message overlay while blocking user interaction on elements or the entire page.
• BogoFolders View text through a 'file menu' interface.
• BogoTabs Basic tabbed interface.
• Bubble Demo highlights selected table rows in groups of tables..
• Calendar Aids date entry.
• Checkbox manipulation Select, unselect and toggle checkboxes.
• ChiliEXCELLENT Syntax highlighting for displaying code on webpages.
• Choose Component Select data from a table row through a modal window.
• Click Menu Generates dropdown menus.
• clueTip Tooltips with many variations.
• Color Animations Add color animations to div backgrounds.
• Color Picker Pass in color choices and attach custom events to each color block.
• columnHover Highlight table rows and columns.
• columnManager Add, remove and toggle table columns.
• ContextMenu - Menus that show when you right click specified elements.
• Confirmer Adds a listener to check if user confirms their action.
• CycleEXCELLENT Add flash-like image effects to rotating image galleries.
• date picker Aids date entry.
• Delicious Read delicious bookmarks from a user to display on a webpage.
• Dimensions Get accurate window and document attributes across browsers.
• Equalize Columns Make columns the same height as the longest column.
• FCKEditor Plugin Adds a rich text editor to a textarea.
• Field Expand the ability to retrieve and set values in forms.
• FormEXCELLENT Change HTML forms to submit via Ajax.
• Gallery Viewer JavaScript image gallery.
• getUrlParam Function to get url parameters.
• Google Feed Plugin Display any RSS feed to a webpage.
• Gradient Adds a gradient to a div without needing an image.
• Grid Column Sizing Table column draggable resizing.
• Grid Row Sizing Expand and collapse table rows.
• hoverIntent Prevents unintended hover events.
• idTabs Add tabbed interface to a website.
• Impromptu Create modal windows and messages.
• jQuery Localisation Applies localisation packages based on the user's language preference.
• jBox UI dialog widget.
• jCalendar Aids selecting of dates inline on a page.
• jCarousel Lite Simple carousel for images and HTML content.
• jCodeViewer Syntax highlighting for displaying code on webpages.
• jdMenu Hierarchical Menu Generates dropdown menus.
• jEditable Live editing of elements on a webpage.
• jFeed XML feed parser.
• jPanView Replaces big images with a zoom viewer in HTML.
• jqDnR Drag'n'Resize elements on a page.
• jQMaps Interact with Google maps.
• jqModal Display notices, dialogs, and modal windows in a web browser.
• Treetable Make a tree view out of an HTML table.
• Tree ViewEXCELLENT Tree view controls.
• Suggest Add autocomplete to input fields.
• YAV Form validation library.
• jqUploader Provides a status bar for uploading images.
• jScrollPane Customize your scrollbars.
• jTagEditor EXCELLENT Turn a textarea into a tag editor.
• jVariations Create a control panel to manipulate elements on a page.
• Keyboard Navigation Dynamically determine which element to focus on based on it's position on the screen.
• labelOver Overlay labels over an input field.
• LavaLamp Navigation menu with a 'lava' effect.
• Lazy Load Only load images that are in the current window.
• Live Query Adds event listeners to elements.
• Masked Input Add mask to inputs to aid user data entry (phone numbers, etc).
• Media EXCELLENT Unobtrusive conversion of standard markup into rich media content.
• Extra selectors for JQuery Add more selectors to jQuery.
• Mousewheel Mousewheel event handler.
• Mousehold Event Add repeating event as the user holds down the mouse.
• Multiple File Upload Select multiple files one by one as it adds to a queue list.
• newsticker Create a fading news ticker.
• Password Strength Meter Indicator to show the strength of a users password.
• PopupWindow Creates an preview popup of destination link.
• Query String Object Useful for sending URL parameters.
• Select box manipulation Remove and add options from a select list or dropdown in many ways.
• selectCombo Tool for making dependant dropdowns with Ajax.
• Star Rating Generates star rating from input fields
• Grid Dynamic ajax grid control.
• slideViewer Image gallery as slides.
• Spoilers Hide content behind an image until user action is taken.
• tableHover Row and column highlighting with variations.
• tableFilter Search box is added to each column header to filter table.
• tablesorter Client side table sorting.
• Taconite EXCELLENT Easily make multiple DOM updates using the results of a single AJAX call.
• Textgrad Add gradients to whole blocks of text.
• Time Entry Sets an input field up to accept a time value.
• Tooltip Add tooltips from title page.
• Validation EXCELLENT Add live validation to forms.
• WYMeditor EXCELLENT Web-based XHTML WYSIWYM editor.
• Zoomi Zoomable thumbnails.
• XSLT Transform XML/XSL from JavaScript.
• XAP Ajax library.

We added a feature to jQuery calendar that repositions the calendar back into the viewable window. It wasn't working right so I took it into my hands to figure out why.

First, I needed to determine if the calendar is outside the browser window:

• BrowserY - The browser's window position from the top of the document.
• Browser Height - The height of the browser window.
• CalendarY - The calendar's position from the top of the document.
• Calendar Height - The height of the calendar.

Once we get these values, then we can compare the two pairs together to determine if the calendar is outside the window. For instance:

JavaScript:

if ( (BrowserY + BrowserHeight) > (CalendarY + CalendarHeight) )

This would tell us if the calendar is outside the window.

Seems easy? Well, no because of the browser differences. I will show you that in a bit.

So lets get the two easy values. Since the calendar is a div, these simple attributes work accross the tested browsers (IE6+, FF, Opera and Safari):

• CalendarY = calendarDiv.offsetTop
• CalendarHeight = calendar.offsetHeight

Getting the browser height and browserY was more challenging. Browsers were getting different heights for the same property! Go figure (sarcasm).

In trying to find out what browsers used to calculate heights, I found a great resource at quirksmode to test browser height and width variables. Thank God for that page, I was able to figure out exactly what the browser was doing with each variable. This JavaScript Window Size and Height tutorial was also helpful.

In testing I found out a few things. To get the browser height, window.innerHeight worked pretty well for most browsers. Then to get the browser height in the rest of the browsers, document.documentElement.clientHeight worked.

I wound up with this function:

JavaScript:

if( typeof( window.innerHeight ) == 'number' ) {
    browserHeight = window.innerHeight;
} else {
    browserHeight = document.documentElement.clientHeight;
}

Likewise, I did the same for the browser Y and came up with this function:

JavaScript:

if ( document.documentElement && (document.documentElement.scrollTop)) {
    browserTopY = document.documentElement.scrollTop;
} else {
    browserTopY = document.body.scrollTop;
}

Using these functions, I tested each browser in a test document and resized the browsers to each about the same size. Here is what the numbers showed up as:

There, that worked! The differences you see are mostly because I didn't have the browsers exactly the same size. I tried out my new functions and everything worked perfect! The feature will be added in v2.8 of jQuery Calendar.

Note: For the width these functions are the same. Instead, I used: window.innerWidth, document.documentElement.clientWidth, document.documentElement.scrollLeft and document.body.scrollLeft.

If you liked this article, please subscribe to my RSS feed or let me know by posting a comment.

Note on June 23rd, 2008: This project has been renamed to jQuery UI Datepicker.

Version 2 of jQuery Calendar has been released. The main new features include:

• Year and Month drop-downs for easier selection of dates.
• Full settings documentation that shows you how to customize almost any aspect of the calendar.
• Multi-lingual, easy to add support for any language.
• Attach the calendar using the jQuery selector.
• Keyboard navigation.

As you can see, a lot of work has been put into this calendar. It all started by programming a lean, simple calendar without a library (see the Clean Calendar) and since then was programmed on top of jQuery. I have heard people say that this calendar is the best one on the internet. The feedback you all have given me has been very encouraging!

Thanks to Keith Wood (kbwood@iprimus.com.au) for extending the calendar to add so many of its features.

Note on June 23, 2008: The project was renamed to jQuery UI Datepicker.

I rewrote my Clean Calendar script on jQuery. jQuery is nice, it cleaned up the script quite a bit. I was able to reduce the script by over 60+ lines. The script loads just as fast. jQuery takes care of the redundant things can be difficult to script cross-browser.

Objectifying JavaScript is a must-read for Javascript developers. Jonathan Snook does a great job explaining how to use Object Oriented scripting by using the object literal, prototype, and returning an object in the constructor. You may also want to check out Show love to the object literal by Chris Heilmann as well.

It didn't take long for me to grasp the object literal - which you can see by viewing my calendar source file - but it is going to take time before I use more complex object oriented methods in my scripts. Enjoy the reads!