Check out the demo.

This class has a couple options you may want to use, position and alignment.

Position can be set to either ‘before’ or ‘after’ which will change whether the caption is above or below the image. Alignment can be set to ‘left’ or ‘right’ or ‘center’ and allows you to align the text within the caption.

If anyone is interested in what the code looks like, here is what you will find in the demo:

/* Let's create a new Class */
var AutoCaptioner = new Class({
	Implements: [Options, Events],

	/* Set up the default options of position: 'after' and alignment: 'center' */
	options: {
					images : [],
					position : 'after',
					alignment : 'center'
	},
	initialize: function(options){
		this.setOptions(options);
		this.addCaptions(this.options.images,this.options.alignment, this.options.position);
	},
	addCaptions : function(images, alignment, position){

		$$(images).each(function(el){			

			var captionText = el.getProperty('title') || el.getProperty('alt');
			if ( captionText ) {
				var figure = new Element('div', {
					'class' : 'figure',
						'styles' : {
							'width' : el.get('width').toInt() + 10
						}
				});
				var caption = new Element('p', {
					'class' : 'caption',
					'html' : captionText
				})
				.addClass(alignment);
				figure.wraps(el);
				caption.inject(el,position);
			} else {
				alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
			}
		});
	}
});

window.addEvent('domready', function() {

  /* Let's instantiate a new object */
  new AutoCaptioner({
	  /* set up the options below */
    images : $$('img.captioned'),
		position : 'after',
		alignment : 'center'
	});

});

Sometimes while working on various client projects, I need to familiarize myself with the JavaScript library my client is using. Below are some great quick reference “cheat sheets” that can get you started using libraries you are particularly unfamiliar with.

jQuery Cheat Sheet (PNG, 364kb)

Released by ColorCharge.com. They’ve also released a version for the iPhone/iPod Touch called jTouch.

MooTools Cheat Sheet (PNG, 111kb)

Released by Jonathan Snook.

Prototype Cheat Sheet (PDF, 155kb)

Released by kangax.

Script.aculo.us Cheat Sheet (PDF, 80kb)

Released by Amy Hoy.

Yahoo User Interface Library (ZIP file 26 mb)

Released by… well… Yahoo.

Please let me know if you have any other good cheat sheets to add to the list!

function px(val) {
    return parseInt(val)+"px";
  }
}

To use it, just wrap your string with the function and it should convert it to pixels for you:

var oldValue = '65';
var newValue = px(oldValue);

Let me know how this works for you and if you make any modifications to improve it. Thanks!

Non-IE Browsers

• window.innerWidth
• window.innerHeight

IE 6+ in “standards compliant mode”

• document.documentElement.clientWidth
• document.docuementElement.clientHeight

IE 4

• document.body.clientWidth
• document.body.clientHeight

Sample code for finding the inner window dimensions

The script below will alert the proper window height and width in various browsers.

  function alertSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      myWidth = document.body.clientWidth;
      myHeight = document.body.clientHeight;
    }
    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
  }
  

• Required Field: user must enter a value
• Email Address: user must enter an email address
• Digits-only: user must enter only digits (includes optional phone number formatting (US only, for now): if user enters a phone number, the script automatically converts it to “(555) 555-5555″)
• Minimum/Maximum Length: user input must meet a minimum length and cannot exceed a maximum length

The script relies on class names assigned to each input field such as “required” “isemail”  “minlength:4″ or “phone” to apply validation rules.

To get started

Check out the demo first. Then, download the source code.

In validation.js, at the very end of the file, you will see this code:

addEvent(window, 'load', function(){
  var registration = document.getElementById('registration');
  validate.listen(registration);
  registration.onsubmit = function(){
    return validate.init(this);
  }
});

You will want to change the name of the form here. Basically replace the word ‘registration’ with the name of your form. Or if you want to add this to every form throughout your site, try this instead:

addEvent(window, 'load', function(){
  if(document.forms){
    for(i=0;i<document.forms.length;i++){
      validate.listen(document.forms[i]);
      document.forms[i].onsubmit = function(){
        return validate.init(this);
      }
    }
  }
});

Preparing your form for validation

There are a couple things you will want to do for all fields you intend to check before actually adding validation classes to them:

1. Make sure the field has a title attribute. This is used for the error messaging. For example, if the field is “First Name”, your title attribute should be title="First Name"
in order to give the user a clearer message as to what they need to do next.
2. Assign a maxlength, if the field requires one. The maxlength attribute will be used in any cases where you are validating a field that requires a value with a minimum length. The error message will automatically tell the user the appropriate range of characters the input field accepts and if the minimum and maximum character lengths are the same, it will tell the user the exact number of characters required to fix the error.

Setting up fields for validation

Like I mentioned at the beginning of this post, these are the current validation methods:

• Required Field
• Email Address
• Digits-only (with optional phone number formatting)
• Minimum/Maximum Length

Required fields
To add required field validation, simply add to any one of your inputs or textareas (doesn’t work for checkboxes, radio buttons, or selects).

Digit-only fields
To add validation to fields that only accept digits, simply add class="digits" to your input field. This will prevent the user from entering any other type of character.

Optional US phone number formatting is available by changing your class to
<input type="text" name="phone" title="Phone Number" maxlength="10" class="digits phone minlength:10">
This will essentially take a 10 digit US phone number with no formatting and convert it to this: (555) 555-5555.

Minimum/Maximum length fields
To add validation for minimum/maximum length fields, simple add a class name of minlength followed by a colon followed by a number, which represents the minimum length allowed for this specific field. If you need to add a maximum length, as I mentioned earlier, you will want to add the standard attribute maxlength for that, for example:
<input type="text" name="firstname" title="First Name" maxlength="25" class="minlength:2">

Mix and match

You can use multiple classes to add separate validation rules to an input field. For example, if you have a field that requires the user to enter a number between 8 and 10 characters, you would add class="digits minlength:8" and maxlength="10" as a standard attribute, resulting in the following:
<input type="text" name="idnumber" title="ID Number" maxlength="10" class="digits minlength:8">

Use and enjoy

Please use this script and let me know how it works out for you and if you encounter any bugs. I will be adding more validation and formatting to this in the future, for things like addresses, ZIP codes, passwords, phone numbers for different countries, etc.

Here is the demo . Download the source code.

This method uses CSS to add a pseudo class of :focus to all form elements and for users on browsers that don’t understand this pseudo element, the javascript adds a class of focus to each element. This method ensures the highest level of compatibility and visual consistency for all users.

View the demo:
highlightOnFocus Demo

Download the example:
highlightOnFocus.zip

To the right, you’ll see an example of what this object does. It adds a classname of “focus” to a form element when the cursor has entered the field and removes the class when the cursor leaves the field.

You will need to include the following code in the <head> section of your page:

<link rel="stylesheet" type="text/css" href="./css/highlightOnFocus.css">
<!--[if lte IE 7]>
<script type="text/javascript" src="./js/highlightOnFocus.js"></script>
<![endif]-->

When IE is the browser, the script will automatically walk through your page elements, identify any forms, loop through the form elements and add focus and blur events that basically add and remove a class of “focus” to the fields. Firefox 3, Safari 3, and Chrome do not need the javascript thanks to the :focus pseudo selector.