Explore the Premium Content

Real-World JavaScript: The Date Object

We've all seen a JavaScript calendar or date-picker function. When logging on to buy an airline ticket, picking dates of a graphical calendar removes confusion about various nations' date formats (mm-dd-yy? mm-dd-yyyy? dd-mm-yyyy?) and can be used to ensure that a return date that is earlier than a departure date cannot be chosen. It's a visual way of combining error-checking validation with a usable interface to avoid user confusion.

In this series of tutorials, Tom shows how to build a customisable, skinnable JavaScript date-picker. In the first tutorial, Tom introduces us to the Date Object - the heart of all JavaScript date processing functions -and shows how to use it, as well as showing how to avoid the legendary gotchas, and therefore save you time and frustration.

This tutorial is for the intermediate developers in JavaScript.

Read More

Formatting User Form Data

Often when you have a form, the user inputs data that either doesn’t match the format you desire, or it isn’t as nice looking as it could be. A good example is the phone number. The typical 7 digit phone number looks like 555-1212. Quite often, people entering phone numbers on web forms omit the dashes and enter 5551212 instead. While there isn’t anything wrong with this, there is a chance that an error is harder to spot by the user.
 
What you could do is check the value of that phone number after it has been entered. If the dashes have been left out, you could simply add them. You could do the same thing for a 10 digit phone number or even an international phone number. Of course the more data you handle the more difficult it’s going to be.
 
In this article we’ll take a look at 7 and 10 digit phone numbers and how we can format (or mask) them to look nicer should the user decide not to enter dashes. While we’re doing this we can introduce some handy string methods and talk about a very basic regular expression. Read More

DHTML: Spicing up Data Tables with Highlighting Rows

In the scripting and programming world we find many intimidating terms like "function literals." What in the world is a function literal? In this article, we'll show you how a function literal will allow you to attach some functionality to an event for every row of a data table. In the end, you'll have a nice looking table where the row that is moused over is highlighted for the user - all with alternating row colors and less code than you might think!
Read More

A Simple DHTML Flyout Menu

If there is one thing that computer users are familiar with it is the "drop down" or "fly out" menu system. This is also sometimes referred to as a "cascading menu" system. We see this particularly in operating system interfaces, and Microsoft applications such as the menu bar in Word. in this self-contained article, Tom shows you how to build a DHTML 2 level cascade (deep enough for most web menus) that you can use for your own sites.

Read More

JavaScript with Style: Highlighting Rows

JavaScript's obvious uses are user interaction behaviors. But did you know you can use JavaScript, CSS and the DOM to design engaging and user friendly interfaces as well? Using a simple but effective script and some CSS, take a look at how you can enhance a simple poll (or any selection based application) with some dynamic highlighting and text effects.

Read More

Dynamic "Hide and Show" Content using the DOM

One of the great benefits the DOM and CSS has brought developers is flexibility. In today's tutorial, we use this behavior to our advantage is to tie more functionality to a page than is initially visible. That hidden content can then react to the user based on their actions, for example, make a 'help' box dynamically appear if the user presses a button, without leaving the page or popping up a new window. In this tutorial, we develop a system whereby a user can click on an author's name at the top of an article, and their bio appears - but can be adapted to any situation you need.

The tutorial is suitable for beginners to intermediate JavaScripters.

Read More

Javascript: email address and password validation

Our goal is to prepare a validation library that is reusable and extensible. We don't want to have to change the validation function every time we start a new project, nor do we want to have to write everything over again. We want a framework for our validation that is easy to use.

Previously we developed a function (Validate()) that iterates through the form from which it is called. This function looks for a validation identifier which we attach to any form element.

in this tutorial (which can be used as a stand alone tutorial as well as part of the series) we examine validating an email address format and a password format

Read More

Validating Forms: A JavaScript Validation Class

We build a main validation function that automatically runs the right "sub" function for each field. We'll tell the main function which sub function to run by including the sub function name in the element ID and extracting it. This makes an abstract function that can be placed in any file. Then what you actually put in the tags determines the validation.

You won't have to necessarily edit the main function all the time, which is the part that can become really tedious and error-prone, and can be reused again and again.

Read More

Building a JavaScript Object

At the start of a new series on JavaScript client-side validation, we look at Javacript objects. Why Objects? Power. Why confuse the issue with lots of babble? The reason you want to take an object based approach is the power it offers. We've had some requests for some form validation techniques. Some of the best techniques are based on object-oriented principles. So before we tackle that, let's take a look why JavaScript objects are powerful, and how to implement them.

Read More

Popup Windows: Doing Them Right

Ah, the dreaded popup window, enemy of the free world! Thanks to loads of unscrupulous uses of the popup, many people feel exactly that way about such intrusive windows. There are some who say a popup window should never be used, and some that would use a popup for seemingly everything. The truth is that somewhere in the middle is where the truth lies.

There are legitimate reasons for using popups, only you know your business imperatives. Thos tutorial teaches the right way to handle opening new windows. JavaScript can be somewhat picky about how you bring a new window into being, and not doing things exactly right can leave you pulling out your hair.

Read More

Speed Up Your Site – Using HTTP Compression!

George Petrov, founder of DMXzone, Flashfreaks and the Dynamic Zones network assesses httpZip, a production utility that compresses the files sent to a browser, saving bandwidth and money!

Read More

Real-World JavaScript: "Alertless" Client Side Error Messages

You've put some good old blood, sweat, and tears into your latest project, and you are very happy with the way things have turned out. In particular, the design you have come up with (or implemented) is quite snappy and you are feeling especially proud of yourself.

Then you take a look at your form validation, and those old gray alert boxes that say "please fill in your name, click OK" are just not doing it for you. Isn't there a more elegant way to have client side error messages than the JavaScript popup?

Read More