Basically you’d have the following javascript functions defined:

function isNumber( evt ) {
	valid		= true;
	if( evt.which || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		if( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) {
			valid	= false;
		}
	}
	return valid;
}

function isValidEmailCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9A-Za-z-_@.])/ );
		valid			= re.test( char );
	}
	return valid;
}

function isValidPhoneCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9+\s\[\]])/ );
		valid			= re.test( char );
	}
	return valid;
}

Then we add an onkeypress event to the relevant form fields to filter out any of the keystrokes you don’t want. This would look something like:

The only problem with this method of filtering input to the form elements is that key combos using filtered characters will not work, i.e. ⌘+A to select the entire entry in a text field will not work when we’re applying the isNumber filter to that field. The solution would be to create a list of key combonations that are allowed.

Not a necessity, but it can’t hurt.
- Chris

* That’s not to say you shouldn’t validate the form when it’s submitted, the non-JavaScript action will be to allow anything.

It’s very simple to do. In order to retrieve the page anchor (i.e. get test from http://chris-miller.org/88#test:

var anchor = self.document.location.hash.substring( 1 );

Setting the anchor to update, for example to http://chris-miller.org/88#newAnchor it can be achived using:

self.document.location.hash = "newAnchor";

Very useful for creating permalinks to AJAX loaded content or JS popups.
- Chris

One thing I was struggling a bit to do was fade between two divs, having the first one fade out then the second fade in. Rather than grabbing a plugin to do it I wanted a small bit of JavaScript I could embed in a page, I couldn’t find one anywhere.

It’s pretty simple to do, the code below should give you a starting point to set up some JS to fade between 2 or more divs.

function fadeBetweenDivs( div1, div2 ) {
	$$( div1 ).fade( "out" );
	(function(){
		$$( div1 ).setStyles({
			display:	'none',
			opacity:	0
		});
	}).delay( 150 );
	(function(){
		$( div2 ).setStyles({
			display:	'block',
			opacity:	0
		});
	}).delay( 150 );
	$$( div2 ).fade( "in" );
}

That is all,
- Chris

Figure 1: Ordering Control

Creating a custom control allows us to do a number of things that we just cannot do with a normal HTML form element:

Figures 2, 3 & 4: Showing lower bounds, non-default value and upper bounds

• Display relevant information instead of certain values, such as showing Automatic at 0 in Figure 1
• Show when the upper and lower bounds are reached, for example at -100 and 100 as per our example
• Allow the user to reset the value to the default or previous setting
• Give some inkling into how the control should be used

Controls

Figure 5: Annotated Ordering Field

• Previous/Next: update the value of the field to the previous or next value in the range
• Reset: reset the value to the pre-defined default value
• Display: allow us to display feedback or custom messages based on the value of the field we’re manipulating

This interaction is fairly rudimentary and not very exciting to say the least. We really want to provide more desktop-like interaction via our own custom controls such as the ability to click-and-hold a button in order to scroll through available values. With such a control, in the majority of desktop applications, when the button is held the action that button denotes will be repeated after a short delay usually with increasing speed the longer it’s held. We can emulate this in JavaScript using a timeout to create the pause and a modifier to decrease the length of this pause and in turn increase the speed with which the actions are executed.

Code Snippit 1 contains a brief outline of how to create a mechanism for firing events when a button is held.

<script type="text/javascript">
    var timeout          = 1000;
    var timeout_limit    = 200;
    var timeout_speedup  = 1.5;
    var default          = 0;
    var lower_bounds     = -100;
    var upper_bounds     = 100;

    function setView( str, element ) {
        // Update the ordering element setting the values and
        // icons as necessary
      ...
    }

    function updateVariable() {
        // Update variable
        order        = document.getElementById( "ordering" );
        order_disp   = document.getElementById( "order_disp" );

        // Update variable
        order.value  = order.value + 1;

        // Check Bounds
        if( order.value >= upper_bounds )
            setView( "upper_bounds", order_disp );
        elseif( order.value == default )
            setView( "Default", order_disp );
        else
            setView( "" + order.value, order_disp );

        // Start firing click-and-hold events
        if( timeout > timeout_limit )
            timeout = max( timeout / timeout_speedup, timeout_limit );
        t = setTimeout( updateVariable, timeout );
    }

    function buttonStop( t ) {
        timeout = 1000;
        clearTimeout( t );
    }
</script>

timeout is the time between calling button events, the timeout_speedup modifier is used to recalculate the timeout on each event in order to increase the speed with which the event is fired. We set a lower limit, timeout_limit, to ensure that the events aren’t called too quickly to update the display and to give the user time to react once they near their desired value. A plot of time between ticks against ticks is shown in Graph 1, as you can see it quickly ramps up so timeout is set to the lower limit, much like you would expect from a desktop application’s click-and-hold button interaction.

Graph 1: Timeout vs. Ticks

Code Snippit 2 shows sample HTML used to create the next button with the appropriate onmousedown, onmouseup and onmouseout JavaScript calls to add the desired functionality to the button.

<img
    title="Next" src="images/icons/arrow_right.png" alt="&rarr;"
    
    onmousedown="updateVariable();"
    
    onmouseup="buttonStop( t );"
    
    onmouseout="buttonStop( t );"
/>

We use both onmouseup and onmouseout to ensure that the click-and-hold behavior ceases when the user either releases the mouse button or moves the cursor off the control.

Figure 6: Textentry into ordering field

Feedback

Here’s where our custom controls can really begin to shine, we can give the user direct feedback in the control that they’re manipulating in real-time. Sure we can do this with JavaScript as it stands, but extending beyond the “red border = wrong” methodology we can give visual cues to the user to show that they’re trying to do something thata’s wrong and what specifically is wrong with what they’re doing.

Showing the bounds of the field is easy using the visual cues we’ve detailed in Figures 2 & 4. Other visual cues we can use are that of text/background colouring to show that an error occurred. We can also, using the same timeout methods used for the click-and-hold interaction, display useful messages to the user for a brief time before correcting their mistakes telling them what they did wrong and why their entries have been changed, Figure 7.

Figure 7: Error detection and correction

It’s only an example!

Figure 8: Other possible controls?

What’s the point? There’s so much we can do nowadays in terms of interaction, even on the web. Try to add a little bit of interactive zest to your HTML controls, it makes everyone’s experience that little bit easier and better.

Thanks for reading,
- Chris

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
        }
    }
    return elements;
}

This function basically checks the string that is entered into the class attribute for each HTML element and returns all elements where there is an exact match.

This method will fail however if we're trying to select elements that have multiple class associations. We need to use something more complex when, for example, creating a list of items that are filterable by class when arranged in overlapping groups. Splitting the class attribute on space characters will allow us to check for matches in these cases:

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c < classes.length; c++ ) {
            if( classes == className ) {
                elements[elements.length] = all[e];
            }
        }
    }
    return elements;
}

The function above does pretty much the same as the first one, however splits the class attribute string on the spaces and loops through them, trying to match the parts individually. This should match on elements with singular and multiple class names associated with them and solve any problems with multiple classed elements.
- Chris ]]> http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/feed/ 0