An Image Viewer with the DMXzone Universal CSS Transforms Library
With this article Dan will introduce you the power of the Universal CSS Transforms Library for jQuery that was recently released to open source by the DMXzone team.
Read MoreFREE
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 MoreA 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 MoreCreating 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 MoreBeautifying 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.
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 MoreBeautifying 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 MoreBeautifying 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 MoreFREE
Chained Dropdowns with Spry Search
In this brief tutorial you will learn how to build "chained dropdowns" functionality using one of the tools from the Spry Data Utilities Toolkit - Spry Search Object.
"Chained dropdowns" is one of the terms that can be used to describe a hierarchy of two or more dropdown menus where making a selection from an upper level menu results in the change of options in the menus on the lower levels (causes a "chain reaction").
Read MoreBeautifying 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.
FREE
Check user name/email with Spry AJAX
When user is registering a new account it is often important to check user name or email for uniqueness to make sure it hasn't been already registered.
In this short tutorial you will learn how to build this functionality in Dreamweaver using standard Recordset, Show Recordset is not Empty Server Behavior and Spry Server Action object from Spry Data Utilities Toolkit
FREE
Spry Search Within Multiple Search Fields
In this article Alex will explain how you can, quick and easy, use the Spry Search from the Spry Data Utilities Toolkit to perform a search within multiple search fields.