Getting to the next element

January 15, 2010

Traversing the HTML DOM to get to the next element can be a tricky business.

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;
}

Conclusion to sliders

January 13, 2010

Now that scripting the slider regions is done, we have a finished and functional slider for our forms.

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

Read the rest of this entry »


Scripting the slider regions

January 12, 2010

Now that we have connected the slider to the form, we can provide some added enhancement by showing in bold the appropriate region description underneath the slider.

This post is part of a series that guides you through creating robust sliders for your forms. Read the rest of this entry »


Creating the sliders

January 11, 2010

When creating our sliders, the changes that we want to make are:

  • 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. Read the rest of this entry »


Basic requirements for sliders

January 11, 2010

When scripting is available,  we can update the form to provide sliders for our questions. Before that happens though, we need to add the jQuery UI library to the head of the page, which does much of the slider work for us.

This post is part of a series that guides you through creating robust sliders for your forms. Read the rest of this entry »


Accessible slider alternative

January 11, 2010

The Introduction to sliders post explained that before we proceed on to using scriptable sliders, we need to ensure that an accessible version is available for when scripting is not used.

This post is part of a series that guides you through creating robust sliders for your forms. Read the rest of this entry »


Introduction to sliders

January 11, 2010

When creating a survey form, we may want to ask visitors how they feel about something, by using a sliding scale to indicate how they feel about things.

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. Read the rest of this entry »