Within the past couple of years, modern web browsers have added their own native getElementsByTagName that is incredibly fast, when compared with using a script. Other web browsers such as Internet Explorer do not have a native implementation, so still require a scripted solution for these other browsers. Here’s how to achieve that in a cross-browser manner.

Even though there are a wide variety of getElementsByTagName scripts that people have created, many of them only partially resolve the issle. Ultimately there are two major issues at hand:

1. Detecting whether a browser already has a getElementsByTagName implementation
2. Limit the search by tag name, to assist slower web browsers

The first issue is nicely resolved thanks to advice from Sid Robert’s blog

Due to a number of compatibility issues with different web browsers, we need to assign the script to both Object.prototype and document. As we don't want to overwrite the native implementation of getElementsByTagName, we'll use the || operator to attempt to assign the native implementation first so that if that fails, the anonymous function that follows it can be used instead.

Object.prototype.getElementsByClassName = document.getElementsByClassName =
    document.getElementsByClassName || function (searchClass, tag) {

John Resig has a getElementsByTagName Speed Comparison that lists many of the popular getElementsByTagName functions. For this post I have chosen to use the one by Dustin Diaz, which has the fastest DOM implementation. This function is compatible back to IE6. In order to be compatible with IE5 we would need to use a different technique to obtain all of the tags, as using '*' with getElementsByTagName fails to work in IE5.

A few updates have been made to this function so that things like unspecified arguments are correctly detected, and that issues that might be picked up by JSLint are tidied up.

This is the cross-browser compatibility script for getElementsByClassName

Object.prototype.getElementsByClassName = document.getElementsByClassName =
    document.getElementsByClassName || function (searchClass, tag) {
    if (tag === undefined) {
        tag = '*';
    }
    var classElements = [],
        els = this.getElementsByTagName(tag),
        elsLen = els.length,
        pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"),
        i, j;
    for (i = 0, j = 0; i < elsLen; i += 1) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j += 1;
        }
    }
    return classElements;
};

With the above script running before other code that uses el.getElementsByClassName, you can now safely ensure that your code will run successfully on a wide range of web browsers.

Take the following list as an example:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Internet Explorer considers that there are only three nodes within the UL tag (the LI elements), whereas virtually all other modern web browsers consider that there are seven nodes within the UL element.

Three of the nodes are the LI elements, and the other four are text nodes, the whitespace between the tags, which consists of spaces, tabs, and newlines.

Text elements can also easily be normal text though. Consider the following:

<p>Some text with <a href="link.html">a link</a>.</p>

This paragraph contains two text nodes and an A element, which itself contains a text node.

#text "Some text with "
A
  #attr href="link.html"
  #text "a link"
#text "."

It is this difference between modern web browsers and Internet Explorer, that causes trouble when using direct node relationships such as the nextSibling property.

In many cases you can avoid this problem by using other techniques. With the unordered list for example, you can assign the UL element to a variable called el and use document.getElementsByTagName('li') to get all of the LI elements.

There can be times though when you need to step forward to the next element and avoid text nodes. As the nodeType of text elements is 1, and the nodeType of HTML tags is 3, we can use that as the basis for a useful tool.

function nextElement(el) {
    el = el.nextSibling;
    while (el && el.nodeType === 1) {
        el = el.nextSibling;
    }
    return el;
}

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders
2. Accessible slider alternative
3. Basic requirements for sliders
4. Connecting the slider to the form
5. Scripting the slider regions
6. Conclusion to sliders (this post)

We have taken the scripting of some form questions from a basic yet functional beginning …

How the form looks without scripting

… and have made use of the jQuery UI library plus some scripting to create practical and easy to use sliders, that allow people to easily represent how they feel about things.

Slider form in use

Further progress from here might be to use a drop-down select to provide individualised region descriptions.

The slider bar is also capable of greater things than has been shown here. Instead of a smoothly sliding scale you can have fixed stopping points along the scale. You can also have two ends to the slider, so you can select a high point and a low point along the scale.

For a nice example of what can be done, Filament Group provide a plugin that turns the slider into a wonderfully accessible slider.

Accessible slider from Filament Group

So have fun playing around with the slider from jQuery UI, I’ll be interested to hear about what results you get from it.

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders
2. Accessible slider alternative
3. Basic requirements for sliders
4. Connecting the slider to the form
5. Scripting the slider regions (this post)
6. Conclusion to sliders

To set the active slider region, we will walk through each region and set one of them to have a class name called selected. While we’re walking through each of them, we can handle situations where the region changes to a different description, by removing the selected class name from the regions beforehand.

To tell if a region is the right one or not, we can convert the slider value to a number for each of the regions, where we use Math.floor to round down the slider value after division.

var $ul = $(ui.handle).parent().next('ul'),
    $regions = $('li', $ul),
    region = Math.floor(ui.value * $regions.length / 100);

This works well with numbers from 0 to 99, but the slider ends at 100 so we also need to ensure that the region value doesn’t fall outside the number of regions.

if (region > $regions.length) {
    region = $regions.length;
}

Even though can easily specify the min and max numbers for the slider, ending the slider at 100 provides the user with a more complete experience.

Now that we have the regions, and we know which one we want to be selected, we can walk through each region and the set the class name as is appropriate for each one.

$regions.each(function (index) {
    $(this).removeClass('selected');
    if (region === index) {
        $(this).addClass('selected');
    }
});

The regions now change depending on where the slider is positioned.

Slider form in use

Next: Conclusion to sliders

• add an empty div to contain the slider
• add some region descriptions beneath the slider
• hide the input field

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders
2. Accessible slider alternative
3. Basic requirements for sliders
4. Creating the sliders (this post)
5. Scripting the slider regions
6. Conclusion to sliders

After the paragraph, we need to add the div for the slider, as well as the list of regions.

$('p.slider').after(
    '<div class="slider"></div>' +
    '<ul class="slider">' +
        '<li>I strongly disagree</li>' +
        '<li>I disagree</li>' +
        '<li>I am indifferent</li>' +
        '<li>I agree somewhat</li>' +
        '<li>I strongly agree</li>' +
    '<ul>'
);

This HTML code is being added from the script, instead of being hidden in the original HTML code, because this list is not useful on an unscripted page. Also, when there are multiple sliders on a page, repeated information such as this is best managed from just the one location.

The basic CSS for this list floats each region description to the left on the same line, and we can neatly clear the floats with overflow: hidden; and width: 100% on the whole list, to ensure that the list box fully expands to include the floated items. Otherwise some spacing issues can occur.

ul.slider {
    margin-left: 0;
    padding-left: 0;
    overflow: hidden;
    width: 100%;
}
ul.slider li {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    float: left;
}

We can also help to make the regions look better, by making each of them 20% of the width, and coloring the unchosen list items in a light grey color.

ul.slider li {
    width: 20%;
}
ul.slider li {
    color: #ccc;
}
ul.slider li.active {
    color: black;
}

We can now hide the existing input field and activate the sliders:

$('p.slider input').hide();
$('div.slider').slider();

Form sliders ready to use

Even though the sliders are now visible, we still need to:

• connect the slider to the form
• update the number on the slider bar
• update the form field value

As we will be updating the slider whenever it moves, we want to use the slide event so that we can make some updates while the slider is in motion.

Change the last line of the above code to the following:

$('div.slider').slider({
    slide: function (event, ui) {

    }
});

When the slider is moved, we want to update the input field with the slider value. We can find the input field by starting from the slider handle and going up the DOM tree to the div element. From there we can move to the paragraph that comes before it. From the context of that paragraph we can get the input field, and set its value to that of the slider.

var $para = $(ui.handle).parent().prev();
$('input', $para).val(ui.value);

The dollar sign in front of the para variable helps to remind us that it is not a standard element, but is a jQuery object instead.

This is also a good time to provide some visual feedback on the slider itself, where we update the slider handle with the same value.

$(ui.handle).text(ui.value);

As there is going to be some other scripting in this same area later on, I’ll place these scripts inside their own function called updateValue, which helps to make the code easier to understand.

Add this code to the function in the slider for the slide event:

function updateValue (ui) {
    var $para = $(ui.handle).parent().prev();
    $('input', $para).val(ui.value);
    $(ui.handle).text(ui.value);
}
updateValue(ui);

We can now see on the slider that the number has an underline on it (which is a hang-over from being link element) and that the value is left aligned, which makes single-digit values look askew. With the addition of a few style declarations, we can tidy these things up.

div.slider a {
    text-align: center;
    text-decoration: none;
}

The slider can now be used with the form.

This is what the scripting code in js/scripts.js now looks like:

$(function () {
    $('p.slider input').hide();
    $('p.slider').after(
        '<div class="slider"></div>' +
        '<ul class="slider">' +
            '<li>I strongly disagree</li>' +
            '<li>I disagree</li>' +
            '<li>I am indifferent</li>' +
            '<li>I agree somewhat</li>' +
            '<li>I strongly agree</li>' +
        '</ul>'
    );
    $('div.slider').slider({
        slide: function (event, ui) {
            function updateValue (ui) {
                var $para = $(ui.handle).parent().prev();
                $('input', $para).val(ui.value);
                $(ui.handle).text(ui.value);
            }
            updateValue(ui);
        }
    });
});

Now that the slider is working, we can finish up by scripting the regions that are underneath the slider.

Next: Scripting the slider regions

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders
2. Accessible slider alternative
3. Basic requirements for sliders (this post)
4. Creating the sliders
5. Scripting the slider regions
6. Conclusion to sliders

To get started you will need to download a copy of jQuery UI to your computer. When you build your own download, you won’t need more than the Core and Slider components, but feel free to choose more of them if you want to explore further.

This example code uses just the stylesheet from the download, so copy the contents of the css folder from your download to the css folder of your slider form.

Add this code to the head of your web page and jQuery UI will be ready to be used.

<link type="text/css" rel="stylesheet"
    href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

We have chosen to get the script files from google, which has two main benefits:

• The library files for jQuery and jQuery UI are accessed in parallel with the rest of your  web page
• The files are more likely to have already been cached on a persons computer from other web sites, so they don’t need to be downloaded a second time

We can now go ahead and modify the HTML code from the Unscripted Form for Sliders post. The only change that we make to the form is to add a class name to each form paragraph.

Add a class name of slider to each paragraph that we intend to use for the slider, so that our script will know what we want to use for the sliders. For example, the first paragraph now looks like this:

<p class="slider"><label>
    Clowns are scary creatures
    <input type="text" name="clowns">
</label></p>

Now we can target the paragraphs denoted as slider and use scripting to make further changes to the form.

We will be using jQuery for our scripting, so we will place our script code in a scripting file called js/script.js
In the head of the page, add this after the script that loads jQuery UI

<script type="text/javascript" src="js/script.js"></script>

and place this code in js/script.js

$(function () {

});

We will be placing our jQuery code inside the above function.

Things are now ready for us to go ahead and create our sliders.
Next: Creating the sliders

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders
2. Accessible slider alternative (this post)
3. Basic requirements for sliders
4. Connecting the slider to the form
5. Scripting the slider regions
6. Conclusion to sliders

Before we get on with scripting, let’s create the base form with which we will use sliders.

This is the HTML code for the standard form that we will use for when scripting is not available to create the sliders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample sliders</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/style.css">
</head>
<body>
<form id="survey" action="submitSurvey.php">
    <fieldset>
        <legend>Questions</legend>
        <p>Please rate how you feel about the following statements,
            from 0 for strongly disagree, up to 100 for strongly agree.</p>
        <p class="slider"><label>
            Clowns are scary creatures
            <input type="text" name="clowns">
        </label></p>
        <p class="slider"><label>
            9/11 was an inside job
            <input type="text" name="insidejob">
        </label></p>
        <p class="slider"><label>
            Fox news is not a news channel
            <input type="text" name="foxnews">
        </label></p>
    </fieldset>
    <p><input type="submit">
</form>
</body>
</html>

Note that here I have chosen to use an implicit label association instead of an explicit label one.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.

Using an implicit relationship means that we don’t need to add explicit identifiers to the inputs, which allows us to have cleaner code. We will find though that IE6 doesn’t understand the implicit association, however we shouldn’t be tempted into muddying the semantic meaning of our code. Especially when its sole purpose is to support a low-impact situation on a retiring web browser.

Now, with a little bit of styling in style.css, we have a form that is quite servicable in an unscripted environment.

form label {
    position: relative;
}
form label input {
    position: absolute;
    left: 15em;
    width: 3em;
}

This is how the slider form will look when there is no scripting available.

How the form looks without scripting

This takes care of any no-JavaScript situations that may occur.

Next: On to the basic requirements for sliders

By making use of jQuery UI, we can provide some nice sliders for our forms.

This post is part of a series that guides you through creating robust sliders for your forms.

1. Introduction to sliders (this post)
2. Accessible slider alternative
3. Basic requirements for sliders
4. Connecting the slider to the form
5. Scripting the slider regions
6. Conclusion to Sliders

When we’re finished, this is how our form slider will look.

Slider form in use

To correctly make use of sliders can take some preparation, not only so that the slider value gets added to the form, but also to allow visitors without JavaScript to still be capable of using the form.

Before we get to the scripting part of things, we need to ensure that even when scripting is not available that the user can still use the form. This next part is about creating an accessible alternative for when scripting can not be used.

Next: An accessible slider alternative

• when you use the forward or back browser buttons
• when the page is refreshed
• when the page is closed
• when you click on a link to a different page

Sometimes you will want to advise a user that they are about to lose some information that they have entered on the current page.

You can use the onbeforeunload to warn people that they may be able to lose some information

window.onbeforeunload = function () {
    return 'If you leave this page you will lose the information that you have entered.';
}

Note that this event differs in how it handles the return value from other JavaScript events. Most events cancel themself if you return false from them. The onbeforeunload event is different, in that whatever is returned (even false) is shown in the warning message.

While it is not possible for scripting to cancel the onbeforeunload event, the user will be able to choose to do so from the warning message that is shown.

Further details on using the onbeforeunload event can be found at: http://www.4guysfromrolla.com/webtech/100604-1.shtml