Setting up the Database

function initDatabase() {
	try {
	    if (!window.openDatabase) {
	        alert('Databases are not supported in this browser.');
	    } else {
	        var shortName = 'DEMODB';
	        var version = '1.0';
	        var displayName = 'DEMO Database';
	        var maxSize = 100000; //  bytes
	        DEMODB = openDatabase(shortName, version, displayName, maxSize);
			createTables();
			selectAll();
	    }
	} catch(e) {

	    if (e == 2) {
	        // Version number mismatch.
	        console.log("Invalid database version.");
	    } else {
	        console.log("Unknown error "+e+".");
	    }
	    return;
	}
}

First we check if the browser supports the openDatabase method, is so we continue and define the database parameters:

• shortName is the DB name as it will be referred to by the browser and SQL
• version openDatabase version. 1.0 for this (more on that here)
• displayName The full display name / description of the database
• maxSize This is max size in bytes is the size you expect the database to reach. This is essential for memory management purposes.

Next, we call the createTables(); function where the table is defined and pre-populated with initial data (optional).

Building the Table

function createTables(){
	DEMODB.transaction(
        function (transaction) {
        	transaction.executeSql('CREATE TABLE IF NOT EXISTS page_settings(id INTEGER NOT NULL PRIMARY KEY, fname TEXT NOT NULL,bgcolor TEXT NOT NULL, font TEXT, favcar TEXT);', [], nullDataHandler, errorHandler);
        }
    );
	prePopulate();
}

This basic function executes the executeSql method which runs as the CREATE TABLE query. The SQL syntax is based on SQLite so it should feel familiar to many Web & Mobile developers. For this demo, we are going to pre-populate the newly created page_settings table with some initial data:

function prePopulate(){
	DEMODB.transaction(
	    function (transaction) {
		//Optional Starter Data when page is initialized
		var data = ['1','none','#B3B4EF','Helvetica','Porsche 911 GT3'];
		transaction.executeSql("INSERT INTO page_settings(id, fname, bgcolor, font, favcar) VALUES (?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4]]);
	    }
	);
}

Note: although we don’t really need a PK for such a basic demo it will be there for future extensions and advancements.

Now the database is initialized, a table has been created and we have a row of default data inserted. Since the data is stored, you can now reload or page or close and reopen it and the data will remain. To visualize this in Safari, go to Develop > Show Web Inspector > Databases tab where you can view the database and its contents as they are added or changed.

Select the data

After the initial page load the data is stored and we run the selectAll() function to get the data:

function selectAll(){
	DEMODB.transaction(
	    function (transaction) {
	        transaction.executeSql("SELECT * FROM page_settings;", [],
                dataSelectHandler, errorHandler);
	    }
	);
}

The demo consists of only one row so we use * to grab everything from the database but please optimize your queries if you decide to use this example for your own projects.

function dataSelectHandler(transaction, results){

	// Handle the results
    for (var i=0; iYour Favorite Car is a '+ newFeature.favcar +'

');

        if(newFeature.fname != 'none') {
       		$('#greeting').html('Howdy-ho, '+ newFeature.fname+'!');
       		$('#fname').val(newFeature.fname);
        } 

       $('select#font_selection').find('option[value='+newFeature.font+']').attr('selected','selected');
       $('select#bg_color').find('option[value='+newFeature.bgcolor+']').attr('selected','selected');
       $('select#fav_car').find('option[value='+newFeature.favcar+']').attr('selected','selected');
    }

}

This function loops through our data and uses a bit of jQuery to apply the specific values to CSS properties on the DOM. Going further, we set the HTML form defaults based on data with the help of jQuery.

Making updates

This function reads the form values, validates the text input and updates the database

function updateSetting(){
	DEMODB.transaction(
	    function (transaction) {
	    	if($('#fname').val() != '') {
	    		var fname = $('#fname').val();
	    	} else {
	    		var fname = 'none';
	    	}
			var bg    = $('#bg_color').val();
			var font  = $('#font_selection').val();
			var car   = $('#fav_car').val();
	    	transaction.executeSql("UPDATE page_settings SET fname=?, bgcolor=?, font=?, favcar=? WHERE id = 1", [fname, bg, font, car]);
	    }
	);
		selectAll();
}

Dropping the table

We could simply remove the row with a DELETE query but since we already check for the presence of data, it makes more sense to DROP the table:

function dropTables(){
	DEMODB.transaction(
	    function (transaction) {
	    	transaction.executeSql("DROP TABLE page_settings;", [], nullDataHandler, errorHandler);
	    }
	);
	location.reload();
}

After the table is dropped, the page is refreshed which triggers the initial database setup procedures defined earlier.

The demo:

View DemoDownload Source

Why should you use Local Databases?

→

They are fast, flexible and never expire. Developers can define the maximum size of the database and since all of the queries are run via JavaScript, no external server calls are required and unlike cookies and sessions, they persist until manually removed.

→

Unlike cookies and sessions, which are created on the server side and then stored in the browser, the information stored in a local database is truly local.

→

Safari and Opera’s local databases are based on SQLite and are threadsafe which prevents multiple instances of the data from being opened concurrently.

→

iPhone and iPad OS support local databases through their Mobile Safari browsers, making this storage platform ideal for mobile web apps.

→

From the UX perspective, the possibility of storing user and page settings and options locally, instantly and securely without the out the need to make external server or server side database calls is incredible. Since the HTML5 is widely supported in Webkit and Opera, there are nearly limitless possibilities for HTML5-based games and web apps.

Why should you NOT use Local Databases?

Local databases are a great way for you to simplify and improve your projects but they have a few obvious drawbacks:

→

Limited cross-browser support in the current form. At the time of this article, Safari 4, iPhone / iPad OS3, Chrome 5 and Opera 10.5 (Desktop) are the only mainstream browsers with support.

→

Not ideal for sensitive information. Sure, JavaScript can do MD5 and SHA1 hashing but if these guys can crack the code while listening to KoЯn, how safe do you feel?

→

Even though SQLite has been around for 10 years now, Webkit / Opera support is much newer and has consequently seen less vetting from those who would want to steal your data.

What about FireFox, Chrome and IE?

→

Firefox introduced support for localStorage in version 3.5 in the key-value pair format (similar to cookies and sessions) but has so far (and for the foreseeable future) stayed away from the SQL Database Storage model. More about that here, here and here

→

Internet Explorer has offered persistent storage support since IE5.5 which they’ve termed userData Behavior. This technique is very limited in features and has a maximum storage size of 128k per page. IE local storage improved in IE8 with the introduction of localStorage. Both IE local storage formats are key-value and there is currently no native local database support in IE—maybe in IE9?

→

Prior to version 4, local database storage support in Chrome was limited to implimentaiton via the Google Gears API. Gears offers a very similar SQLite-based local storage component that works across most browsers including IE6+, FireFox, Opera and Safari. The Gears platform was created to let developers create web applications that can be used offline and also offers support for other features such as Canvas, Desktop support and Geolocation. The downside is that users must install the Google Gears browser extension on their machine before they can access these features. Additionally, Gears requires developers to include a JavaScript file in their application in order to use Gears which makes it a less than ideal choice for the low-bandwidth mobile web application world. More on the Google Gears Database API here.

*UPDATE* As January 2010 Chrome now offers full local database storage support natively in effort to move to a more standards-based approach. Gears is still being supported in its current form (no new development or further platform compatibility, though) for the time being. More information on this change can be found here. (Thanks for the correction, Colin)

Resources

• Safari Reference Library: Using the JavaScript Database
• WebKit Does HTML5 Client-side Database Storage
• MozillaZine Weblog: Not Implementing Features Is Hard

• Opera: Persistent client side storage for your persistent needs
• Opera Web Storage: easier, more powerful client-side data storage

• Unlock data – mobile example
• Webkit CSS 3D + Local DB Demo
• Storage Notes Demo

The demo:

View DemoDownload Source

    $('a.fb_dynamic').each(function(){
           var dWidth 	= parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
           var dHeight 	=  parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
			$(this).fancybox({
				'width':dWidth,
				'height':dHeight,
				'autoScale'     	: false,
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'type'			: 'iframe'
			});
      });

With this code in place Fancybox can be called by simply adding the class fb_dynamic and then specifying the width and height in the URL’s parameters:

Free iPods!!!!

Going one step further, if you need to make the Fancybox call from Flash (another feature not in the API) you can create a simple JavaScript function and make the call from your SWF or AS file:

	/**************************************************************
	Call Fancybox from Flash with a Dynamic width and Height
		@w = integer [width]
     @h = integer [height]
     @u = string [url]
      example funtion call: flashFancybox(500,600,'http://darkcrimson.com')
	***************************************************************/
			function flashFancybox(w,h,u) {
			    var fbflash = $('a#fbflash');
                                fbflash.attr('href', u+ '?width=' + w + '&height=' + h );
				fbflash.trigger('click');
			}
          $(function () {
              // Create dynamic link, change append location to change FB animation start point
	      $('#body').append('  ');
          });

View DemoDownload Source

The XML

First, lets take a look at the XML structure:

In it’s most basic form, the XML file contains the main <data> node with subsequent <entry> nodes. Within each entry we are defining the meta data such as <date>, <cost> and <category>. Also within the entry are a <name> and <description> field which are wrapped in CDATA blocks that will allow us to use special characters and punctuation without compromising the validity of the XML file.

AJAX

Using jQuery’s wonderfully simple AJAX method to make an XMLHttpRequest. The basic code for making the AJAX request for the example XML file shown below:

$.ajax({
type: 'GET',
url: 'xml/data.xml',
dataType: 'xml',
success: function(xml_list) {

var xmlArr = [];

$(xml_list).find('entry').each(function() {

	var xml_date      	= $(this).attr('date');
	var xml_cost 	  	= $(this).attr('cost');
	var xml_category  	= $(this).attr('category');

	var xml_name  	  	= $(this).find('name').text();
	var xml_description = $(this).find('description').text();
					  // Add matched items to an array
	xmlArr += '<tr filterCriteria="';
	xmlArr += xml_cost;
	xmlArr += '"><td>';
	xmlArr += xml_date;
	xmlArr += '</td><td class="xml_name">';
	xmlArr += xml_name;
	xmlArr += '</td><td>';
	xmlArr += xml_description;
	xmlArr += '</td><td>';
	xmlArr += xml_category;
	xmlArr += '</td><td class="xml_cost">$';
	xmlArr += xml_cost;
	xmlArr += '</td></tr>';

}); // end each loop

 //Append array to table (this way is much faster than doing this individually for each item)

	$(xmlArr).appendTo(wrapper +' table tbody');

The first two things to note in the code are the dataType and success parameters. We use dataType to specify that we are requesting an XML fie and using a function in success to manipulate and display the XML data. Next, we use jQuery’s super handy find() method to search the XML document for entry nodes. We then chain the each() function to iterate through the data that is returned from the find(). Next, variables are created for each of the items we will be displaying. Using variables as opposed to the selector name caches the data so that it is not called in each iteration. Note that there are two methods of assigning the variables in this example; the first simply assigns available attributes to the variables while the second has to traverse one step deeper to return the values of the name and description nodes.

Making it work

At this point we’ve covered the basic concepts but it is time to actually do something practical with the data. Displaying the results in HTML is easy but while we’re writing the markup, lets add some placeholders for filtering the data.

< $10
$10 – $20
$20 +
Any price




Date
Name
Description
Category
$

Ignore the <UL> for now and notice that we are adding elements to the the <thead> but not the <tbody>. Jump back to the JavaScript file and add this line below the var declaration for description and add:

$('<tr filterCriteria= "'+ xml_cost +'"></tr>')
.html('
'+ xml_date  +'
'+ xml_name  +'
'+ xml_description  +'
'+ xml_category +'
$'+ xml_cost  +'

')
.appendTo(wrapper +' table tbody');

This line is in our loop so it will iterate a populated <tr> for each entry in our XML and append it to the <tbody></tbody> of the table.

Making it useful

The parser is now built and displays the data from our XML file but it lacks practicality. What if you want to sort by Computer Accessories? What if you want to show all items less than $20? These start to become serious issues as the length of the XML document increases.

We will cheat a little bit and tie in Christian Bach’s incredibly useful tablesorter jQuery plugin to do the sorting in this example. I won’t go into detail on the options and uses of this plugin because they are already covered thoroughly on the tablesorter plugin site.

Filtering is done by simply using jQuery’s hide() and show() on specifically tagged table rows. We’ve already created the HTML in previous steps so all that is left is to assign a onClick event and add a switch to create the filter. To add sorting to the table we’ve created add the following after the each() function inside the AJAX call:

 window.setTimeout('$("'+ wrapper +' table").tablesorter({sortList:[[0,0],[0,0]], widgets: [\'zebra\']});', 120);

The selector is wrapped in an interval because both the tablesorter script call and our AJAX call happen concurrently on page load which causes the tablesorter to fire before the table is fully populated with or XML. The 120ms on the interval is somewhat arbitrary and it can be changed as needed. Additionally, if you prefer not to use the interval, you might be able to do so depending on your particular use and XML file size. Also, note the use of the “zebra widget” option; this will assign a “stripe” class to odd numbered rows which allows for alternate row background colors.

var nav_link = $('#xml_nav li a');
nav_link.click( function() {
var tr = wrapper +' table tbody tr';
$(tr).show(); //Show all rows
switch ($(this).attr("class")) {
case  "filter_10 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) > 10;
}).hide();
break;

case  "filter_10_20 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) < 10 || parseFloat($(this).attr("filterCriteria")) > 20  ;
}).hide();
break;

case  "filter_20 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) < 20;
}).hide();

break;

case  "filter_0 hit" :
$(tr).show();
break;

}
/* Remove all instances of the stripe (alternating row) class
   Then re-apply stripe class as to visible alternating rows
*/
$(tr).removeClass('stripe');
$(tr + ':visible:odd').addClass('stripe');
});

In a previous step we generated the HTML that is inserted into our table and you might have noticed an attribute was added to the cost <td> called filterCriteria. The code above uses the value of this attribute to determine which items to show / hide. Obviously, this will only work if the value of cost is an integer. Feel free to develop a more elegant solution.

Finishing up

The last step that I will cover is adding a simple preloader to display as AJAX grabs the XML data. At the top of the function place the following line:

     $('


').html('
Loading Data...

').prependTo($('body'));

Inside of the xml_parser() function in the AJAX call’s success parameter place these two lines:

$('#preload_xml').remove();
$(wrapper).show();

Thes four lines of code will first hide our wrapper div and then dynamically construct a div with a loading message and then remove the code from the page once everything is loaded and finally show the wrapper again.

We now have a parser that sorts and filters XML data. There are many other features that could be added such as a more complex content filter and code cleanup to make things even more re-usable. If you find this code useful and decide to use it in your projects, I encourage you to modify the code as you find necessary and please feel free to share your examples.

Other Considerations

There is a great jQuery XML parser plugin called jParse which can be used to grab display the contents of an XML file with little effort. Other than the reliance on AJAX to call the XML file, the approach used by jParse differs considerably from the approach that I took in this article. If you are looking strictly for XML display, I recommend looking into jParse.

View DemoDownload Source

This overhaul has been an extremely long process and has convinced me that I am without a doubt the most difficult to please client. Although I’ve been involved in well over a dozen freelance projects so far this year, I am glad that the nearly 9 month process of brainstorming, trial an error, redesigns and coding for this project is now over.

Apart from the design  face lift, my Portfolio has been completely re-designed and programmed with some custom jQuery and Flickr API magic.

The Blog has also been reconfigured and is now considerably easier to navigate through than the previous version. I have a number of tech tutorials and random topics that I plan to write about over the next few days weeks months so make sure to subscribe to my RSS feed.

For this comparison, I have evaluated the Light Boxes based on coding techniques, ease of use / customization, community support and frequency of updates. Additionally, I have listed specifications for file size and framework dependency / version for each along with my rating on a 1-10 scale.

The Scripts chosen for this comparison are as follows:

• Lightbox 2   
• Lightview  
• Litebox  
• Thickbox  
• Modalbox  
• Slimbox  
• Multibox  
• jQuery Lightbox Plugin (balupton edition)  

Lightbox 2

The original Lightbox is considered by many to be the first modal window widely available to developers. The latest release, version 2 , like its predecessors, is based on the Prototype framework and uses Scriptaculous effects. This script is very stable, has seen frequent bug fixes and off-shoots throughout its existence and has a very active user-driven support forum. The JavaScript file itself is very nicely documented and offers many configurable options.

Although Lightbox 2 offers the advantage of a large following and easy to configure (and understand) code it does have limitations. The script is called by using the rel attribute which limits its functionality for non-basic methods such as Flash and image maps. Additionally, this script, unlike most others in this comparison, is only capable of displaying images. Update: after some poking around, I found a lightbox clone which appears to be nearily identical to Lightbox 2, but with the ability to display Flash movies natively. For more information, visit this link.

Lightview

Lightview is a somewhat unique take on the standard Lightbox. Smartly written, with an image-free, fully adjustable, rounded corner solution (which works on browsers across the board), Lightbox is a very aesthetically pleasing and also very powerful solution. Unlike the standard Lightbox, and many of it’s clones, Lightview’s content box scrolls with the page so that you are never left wondering where the content is. In addition to images, Lightview also offers the ability to display Flash, Quicktime, AJAX calls, inline content and even full web sites in an i-frame. Lightview features a very neat image gallery option which can be used as a timed (configurable) slide show, which resizes the content box to the dimensions of each image. Another great thing, which I consider a big advantage over most of the competition, is that the Lightview window is called through the class attribute.

One major issue that I have found with Lightview is that, beyond the configuration settings, the script comes pre-compressed with no original source code attached. This causes major headaches when trying to change anything not in the settings or CSS. I encountered this limitation when developing the new version of my site in the portfolio section when I wanted to add two simple hyperlinks to the Lightview window. Although I was able to add the links, I had to place the links in the title attribute, which does not validate as XHTML.

Litebox

Litebox is basically a compact version of Lightbox. Although listed below as ~23k, which is a mere 3k less than the original Lightbox, the true saving is with the compact, 4k Prototype.lite and moo fx libraries used instead of the conventional 120k+ standard Prototype library and somewhat bulky Scriptaculous files. Litebox is a great, lightweight solution but unlike its older, and slightly pudgy sibling, Lightbox 2, this script does not seem to be frequently updated. The last updated date from the Litebox JS file is July, 2006 compared to March 2008 (at the time of this comparison) with Lightbox 2.

Thickbox

Thickbox was written in the lightweight jQuery framework and weighs in at an amazing 10k compressed and only 15k uncompressed. Additionally, the developer wrote the script to run with the compressed version of jQuery which only adds 20k instead of the 120k+ with Prototype. The script does not have the community-driven support forums that the previous three scripts have but the author states that you may email him with detailed questions or bugs. Thickbox does not offer a lot of the customization options seen in Lightbox, Lightview etc… But does provide both an uncompressed and compressed version for developers to extend at will. The "out of the box" appearance for Thickbox is not as aesthetically pleasing as some of it’s alternatives but keeping with its easily extendable theme, images and CSS can be added as desired to alter the look. One annoyance that I found was, when activated, the mouse scroll wheel becomes inoperative which requires you to use the browser’s side scroll bar.

Thickbox offers quite a few features for such a small package including inline content, i-frame as well as both single and multiple image support. The author claims that both Flash and PDF files can work with this script but notes that these media types are untested.

Modalbox

Modalbox is a very powerful tool which allows the developer to not only show single page content or images like many other modal windows but perform complex tasks with AJAX call backs which allows the end user to perform multiple tasks with few clicks and no browser refreshes. Unlike similar scripts, Modalbox uses AJAX instead of deprecated i-frames and even supports scrolling. The project is supported in Google Code and has a Wiki as well as detailed information about uses, bugs, etc…

I have used this for multiple client projects and have have received positive feedback with not hitches during the development process. One potential issue with Modbalbox is that it relies on Prototype and Scriptaculous which can be a little heavy for large scale projects but for those cases, there is a mootools clone called MOOdalBox which has the same Google Code backing and support.

Slimbox

Slimbox is a mootools clone of Lightbox 2. The entire script plus images and CSS is amazingly only 13k uncompressed. This project has support forums and the homepage for the project allows visitors to post comments in which the author often responds to questions. After playing around with this script, I was impressed with the small file size but found the overall package to be somewhat buggy, particularly with the dark page cover when scrolling.

Multibox

Multibox is a versatile Lightbox that is able to display a large variety of different media types including images, audio (Real Player, MP3), video (Windows Media Player and QuickTime, FLV), as well as the standard image and content (AJAX and inline). The default design is pleasant enough that most developers won’t need to do aesthetic modifications but doing so would be fairly easy due to the way the script was written.

The code is fairly straightforward but is not as well structured as some of the other options; one thing that caught my eye was the use of JavaScript to print the actual HTML code for the box. In other scripts, this is done dynamically at the savings of dozens of lines of code. It also appears that there is no form of support (or update log) for this script so it looks like bug fixes could be an issue.

jQuery Lightbox Plugin (balupton edition) 1.0

This jQuery plugin, based on Lightbox2 delivers unusually smooth scrolling (far better than Lightbox2) as well as many efficiency benefits and a small file size. Unlike many of the other scripts in this comparison, this plugin requires no configuration and a smart automatic URL detection which means that only one file has to be included in the display file. The jQuery Lightbox Plugin can be used manually or automatically to generate Lightboxes which means that it can be set, like many others with the rel attribute or with on event such as onclick. This is a huge advantage and makes The jQuery Lightbox Plugin potentially the most versatile in this comparison. Additionally, most media types can be used without modification including Qucktime, Flash and other embedded content types.

The only real downside that I found with this script was the lack of clear documentation. Although the instructions are fairly clear, it takes some digging around to find the information you are looking for. Luckily, this script is listed on the jQuery plugin site which includes support request and bug report sections as well as a log of changes.

Other considerations and Conclusions

One additional script that was too task specific to include in this comparison but I wanted to include a link. GMapsOverlay is a moo-tools based Lightbox that is used specificially to display configurable Google Maps.

Although I have listed the file sizes for the scripts evaluated in this comparison, some of which are more attractive than others, further compression can be applied to most of these scripts using applications such as: DoJo Toolkit’s ShrinkSafe or Packer.

So, after reading all of this, which one of these Lightboxes is right for you? That depends—I typically use Prototype because I have worked with it in the past quite often—but, there are many alternatives and clones using other JavaScript Frameworks or none at all so it depends on your specific need. Keeping that in mind, it is possible to use multiple frameworks together.