Explore the Premium Content

Local Storage with HTML5 and jQuery

HTML5 brings a whole host of new goodies to web design including the new local storage facility where data can be stored on the client where it is easily accessible. Cookies have been the only data storage mechanism on the client that the browser has access to for many years and although they have served us well in that time, they do have their limitations such as the constraints on their size and per-domain limitations. Now we no longer have to worry about these issues and can work with local storage instead.

Local storage has many benefits; in an application that requires frequent access to stored data, reading or writing the data from or to their own computer is always going to be much faster than by sending AJAX requests to the server. We also have access to a much greater size (the draft specification recommends an arbitrary size of 5 megabytes) so we aren’t constrained to the limit of just 4 kilobytes that a cookie allows.

In this tutorial we’ll create a simple document editor, it could be part of your blogging system for example, which will automatically save what is entered into the editor using local storage. We’ll cover how local storage objects are created, and how data can be stored to and read from the storage object. Read More

A Site Monitoring Widget with jQuery and cURL

In this tutorial we’ll look at how to build a cool site-monitoring widget that allows you to monitor the status of multiple sites. If you maintain a large number of web sites checking that each one individually is up and running could be a time-consuming chore, but with this widget we can instantly see if any sites are down.

We’ll use jQuery to build the interface and communicate with the server and we’ll use PHP and the cURL extension to actually check each site is up and running by making a request to the specified sites and checking which response headers are returned. We’ll also be using MySQL to store the URLs of the site’s we’ll be monitoring; it’s not strictly required, there are a number of alternative storage methods we could use including a plain text file, a PHP array, a JavaScript array, etc, but MySQL is probably the most robust method and it means we can easily add new sites to monitor.

Read More

Creating a Flexible and Robust Event Management System with JavaScript

With the power of modern JavaScript libraries like jQuery and the YUI, handling events on the client-side has become a trivial matter that we mostly don’t need to concern ourselves with anymore. However, there may be times when we can’t use a framework to handle things for us. Additionally, for a better understanding of how JavaScript libraries work, it's useful to understand the principles of the underlying raw JavaScript.

In this tutorial we’ll look at how we can create cross-browser solution that will easily let us manage all of our event-handling needs using standard JavaScript; we'll look at how we can easily add and remove event-handlers, and how we can stop events. This tutorial may not be of interest to anyone that isn’t concerned with learning how JavaScript works.

Read More

Beautifying forms with jQuery part 7

In the seventh and final part in the jQuery form enhancement tutorial Dan shows you how to add a flexible and robust theming mechanism that allows new themes for the form and its enhancements to be developed quickly and applied easily. In these examples Dan looks at how to add some cool new CSS3 styles to the form and the new features that have been added to it.

Read More

Drag-and-Drop Shopping Cart with jQuery UI

NOTE: This article was written in Jan. 2008 based on jQuery UI v1.0. This version (and two later than it) are no longer supported. It is recommended the reader find content that is based on the latest version of jQuery UI 1.7.

In this article, I`ll introduce jQuery UI Drag-and-Drop and show you how with just a few lines of code, you can make a richly interactive shopping cart that is functional and fun to use. To get right into it, I'm going to assume that you're at least familiar with jQuery (the base of jQuery UI). You should have a working (latest) copy of jQuery installed and be comfortable with the jQuery syntax and basic selectors.

Read More

Beautifying forms with jQuery Part 6

In the penultimate part of this tutorial on changing the appearance and functionality of forms and traditional form elements Dan shows you how to create a simple but effective replacement for the humble select box, which in its original form is very difficult to style effectively. You'll see how easy it is to build an attractive  and functional replacement that integrates with our other form features seamlessly.

Read More

Beautifying forms with jQuery Part 5

In this part of the tutorial Dan shows how easy it is to provide attractive and usable replacements to the common form elements checkboxes and radio buttons while still ensuring that the underlying functionality provided by these form elements is maintained. Replacing checkboxes and radio buttons allows us to style these elements in way that is consistent with the rest of our site.

Read More

Beautifying forms with jQuery part 4

In part 4 Dan continues showing how easily new methods can be added to the form class which enhance the user experience of the form; in this you’ll see how easy it is to add contextual hints to each field of the form based on the semantic and accessible title attribute.

Read More

Beautifying forms with jQuery part 3

In part 3 of this series you'll add more methods to the form class that add new features to the form elements, focusing on text entry fields including standard text fields, password fields and textarea elements. Dan will show you how to add cool new usability features including password unmasking and field-clearing buttons that enhance the user experience and empower your visitors to choose which form features are implemented using the control panel that was added in part 2.

Read More

Beautifying forms with jQuery part 2

Beautifying forms with jQuery part 2 introduction
In part 2 of this series Dan shows you how to add new methods to the beautify namespace that was created in part 1 in order to add new features to the form class. You’ll see how by adding two opposing methods to the form class you can enable or disable a single feature. Dan also shows how a simple user control panel can be created which automatically adds switches so that the visitor can enable or disable the features that they require.

Read More

Beautifying forms with jQuery part 1

This series of articles looks at how jQuery can be used to progressively enhance simple HTML forms to make them more usable and attractive. In this part Dan shows you how to start with simple and semantic underlying form HTML and progressively improve it, first with some simple CSS and then with the basic definition of the JavaScript pseudo-class.

Read More

Capturing Pages with a Twitter Bar Part 2

In part 1 we looked at the base HTML page which holds our twitter toolbar and displays the linked content in an iframe. In this part of the tutorial we’re going to style the toolbar and add the PHP file that will enable easy retweets and follows.

Read More
Older articles