Chris Miller

I spend a lot of time writing bespoke content management systems, a lot! I'm always trying to add some small, lightweight additions to make the user experience a little bit better. One means of doing this is by providing some better custom controls which give good user feedback and emulate similar offline controls.

One such control is a linear range control, catchy I know, which allows the user to select a value within a particular range with a given default value. An example of this may be selecting an ordering value for a blog post, Figure 1, ranging from say -100 to 100 with a default value of 0. Posts in our imaginary blog would be ordered by this ordering field ascending with 0 being the default value, resulting in posts being ordered automatically by date. Rather than using a plain text box to allow the user to enter the ordering value directly, subsequently giving us little or no control over the contents of the field until the form is submitted and no means to convey the nature of the field itself, we can create controls to manipulate the value ourselves.

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

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

As any person who uses JavaScript for client side interaction knows, getting elements by their class is one essential thing we need to do over and over again. For the most part using a function equivalent to the one shown below will do.

Code Snippit 1: Simplistic getElementsByClass() JavaScript method

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e &lt; 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:

Code Snippit 2: More advanced getElementsByClass() function

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e &lt; all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c &lt; 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

Chris Miller

JavaScript custom controls

Get multi-class elements in JavaScript

Adding non-Apple format movies to iTunes

R.I.P. PB

Death by Cunnilingus