AjaxPatterns
This is the original book draft version for the Display Morphing Ajax pattern, offered for historical purposes and as an anti-spam measure.
You're probably better off visiting the Live Wiki Version for Display Morphing instead, where you can make changes and see what others have written.

Display Morphing

Display, DOM, Graphics, GUI, Morph, Page, Paint, Reference, Rich

Goal Story

Stuart is answering a question in an online quiz, with a countdown box showing how much time remains. The countdown label changes each second, and the colour gradually shifts from green to red as the countdown proceeds.

Problem

How can you dynamically update display elements?

Forces

  • As the user's task and context changes, applications need to present different types of information.

  • As information the user is working on changes, information being displayed becomes stale.

  • Stale information is a great problem in conventional web apps. Because the information cannot change until it's out of date, you sometimes see disclaimers such as "May Be Out Of Date" or instructions like "Click to Refresh".

  • Submitting and redrawing the entire page interrupts the user's flow.

Solution

Morph page elements by altering styles and values in the Document Object Model (DOM), such as text and colour properties. The DOM represents the state of the web page at any time. When Javascript manipulates the DOM with Javascript, the browser notices the changes and immediately reflects them in the user-interface. To morph a page element's display, you get a reference to it and change its properties. This allows you to change the display of any element on the page - headings, div elements, images, and even the document object itself. Note: An online demo illustrates the code concepts throughout this Solution and the code snippets loosely follow from the demo.

To further illustrate the DOM, consider the following piece of HTML:

    <div id="display">
      <img id="photo" src="photo.jpg"/>
      <div id="dimensions">
        <input id="width" name="width" type="text" size="20"/>
        <input id="height" name="height" type="text" size="20"/>
      </div>
    </div>

Figure 1.1, “DOM Structure” shows the structure that arises when the browser transforms the HTML string into a DOM model. Since each node has attributes, we can represent the model in more detail as in Figure 1.2, “DOM Structure with Attributes”. To learn more about the DOM, experiment with the tools mentioned in “DOM Inspection”. You can point them at a web page to view the corresponding DOM model.

Figure 1.1. DOM Structure

DOM Structure

Figure 1.2. DOM Structure with Attributes

DOM Structure with Attributes

Each node has a number of standard attributes and operations. Those below let you inspect surrounding DOM context:

parentNode

The element's parent node.

childNodes[]

An array of all immediate child nodes.

getElementsByTagName("tagName")

An array of all child nodes of type tagName (e.g. "h1" for all level-1 headings).

The structure can be manipulated as well as inspected. Following are the key manipulation methods available on all nodes (discussed further in “Page Rearrangement”):

appendChild(newChild)

Appends newChild.

insertBefore(newChild, oldChild)

Inserts newChild just before oldChild.

removeChild(oldChild)

Removes oldChild.

You can also inspect the node itself; useful properties include:

id

The node's id.

nodeType

Usually 1 to denote a standard element. 2 represents a tag attribute and 3 represents a text node (explained below).

tagName

The name of the tag (e.g. "h1").

For a more complete set of properties and operations, a good source is available at HowToCreate.co.uk.

Before using any of these properties, the first thing you need to do is get hold of a node somewhere in the DOM. Here's how to grab a reference to an image node with id "logo" buried anywhere inside the DOM:

    var logo = document.getElementById("logo");

getElementById() will recurse through the whole document to find the element with a given id property. Since call's like this are extremely commonplace, a convenience function is used throughout the demos. The function name is just one character, "$", which leads to a neater syntax like this:

    var logo = $("logo");

Now that we have a reference to the image node, we can play around with its properties. To start with, we can change its src property, which will cause it to load a new image:

    logo.src = "Images/web.png";

We can also set the image's alt text, which will show up on text browsers, and as a tooltip on some browsers:

    logo.alt = "The World Wide Web"

So far, we've altered a couple of image-specific properties. Each HTML element has its own set of properties which can be manipulated via DOM manipulation. There are references such as the w3schools website which list the properties for each element.

Another common task is manipulating text, which in the DOM is actually represented by special text nodes, a little confusing as there's no corresponding HTML tag. Look at the following text, which seems to have some text freely roaming inside a <p> tag:

    <p>Oh no! It's <strong>Mr. T</strong>!</p>

Text always resides inside text nodes, a little confusing as there's no corresponding HTML tag; the text nodes are implicit. In the example above, what the DOM holds is actually a paragraph node (p) with three children: a text node, a strong node with a text node inside it, and another text node. It's represented in the DOM as follows:

    <p>
       <textnode>Oh no! It's </textnode>
       <strong><textnode>Mr. T</textnode></strong>
       <textnode>!</textnode>
    </p>

Although the initial HTML is trivial, building up a message like this with DOM manipulation is somewhat complex:

    message.appendChild(document.createTextNode("Oh no! It's "));

    var strong = document.createElement("strong");
    strong.appendChild(document.createTextNode("Mr. T"));
    message.appendChild(strong);

    message.appendChild(document.createTextNode("!"));

Even when text nodes aren't involved, directly manipulating the DOM can get quite ugly. A popular alternative is to use innerHTML, which lets you specify an HTML snippet. Thus, we can rewrite the code above by simply setting the innerHTML property:

    message.innerHTML = "Oh no! It's <strong>Mr. T</strong>!";

By setting the element's innerHTML property, we've effectively delegated the DOM manipulation to the web browser. It's much simpler and easier to understand than direct DOM manipulation, and supported by all modern browsers. However, use it with caution, because if you give it an invalid HTML string, you might end up with a subtle bug related to an unexpected DOM state. Also, there are some subtle portability issues which mean a particular HTML segment won't always produce quite the same DOM model. For instance, certain kinds of whitespace will be captured as a text node by Firefox, but ignored by Firefox. So if you use innerHTML, be careful about subsequent DOM manipulations on and around that content.

On the whole, direct DOM manipulation is often more appropriate for complex operations. IE also offers an outerHTML, less commonly used, which will not only set the element's contents, but overwrite the element itself. With outerHTML, it's as if the element is replaced by the contents of its outerHTML property.

If we're looking at changing the display, a particularly important aspect to consider is CSS style. CSS styles and classes are just regular properties, and can be manipulated just like the others. Assume the stylesheet defines a CSS class called inYourFace. When we change the message's className property to inYourFace, its display will automatically update to reflect the inYourFace definition.

    [CSS]
    .inYourFace {
      padding: 10px;
      background-color: #ff4444;
      font-size: 250%;
    }

    [Javascript]
    message.className = "inYourFace";

As explained in the Decision below, changing appearance by switching class is a good practice, but there are also times when the Javascript needs to manipulate style directly via the style property present on all elements. style itself has a number of properties, the same as you would see in a stylesheet, but with Javascript-ish camelCase ("backgroundColor") like that shown below, as opposed to the CSS hyphenated style ("background-color"):

    message.style.padding= "10px";
    message.style.backgroundColor = "#ff4444";
    message.style.fontSize = "250%";

Decisions

Will you alter the display via classname or style?

For those morphings related to CSS properties, you have a choice between manipulation via style and className. As a general rule of thumb, use className when you can, and style for special situations. Using className follows the principle of unobtrusive Javascript, because it clears away any mention of fonts and colours and layout from the code. Thus, the code logic is clearer and the presentation details are encapsulated better inside the stylesheet.

So what are those special cases where style should be altered? Here are a few situations:

Style depends on some variable

For example, an HTML histogram, where the height of each element is calculated according to the value it represents.

Animation

Animations are a special case of the previous point, where styles usually vary according to elapsed time.

Multiple Variables

Sometimes each style property is to be tied to a particular variable, e.g. font reflects age, colour reflects keyboard focus, and so on. There would be too many combinations to hold each as a separate style. You could, however, hold each as a separate class, since an element can have more than one class (its class property can be a whitespace-separated list of class names.

Prototyping

When in creative coding mode, setting the style directly is sometimes easier than messing around with a separate stylesheet. But don't forget to refactor later on!

What sort of properties will be used?

In modern browsers, the DOM is very powerful, so you can change just about anything you can see. The following are some of the properties that can be typically altered. Note that, as mentioned above, many of the CSS styles will usually be altered indirectly, via className.

Colour - style.backgroundColor, style.fontColor
  • Change to a distinguishing colour to highlight an entire image or control, for example to draw the user's attention or indicate that an item has been selected.

  • Change to a distinguishing colour to highlight a range of text. This could be combined with a font colour change to indicate that text has been selected.

  • Change to a symbolic colour to denote some status change, e.g. "red" for stopped, "green" for running.

  • Provide an animation effect by fading or brightening a control. This can draw attention more effectively than a sudden change in the control itself.

  • Change colour according to a variable, e.g. the brightness of a blog posting's header varies according to the number of times it's been viewed.

Background Image - style.backgroundImage
  • Change the image to indicate the status of an element, e.g. a control might be stopped or started, or source code might be OK, have warnings, or have errors.

Border Style - style.borderWidth, style.borderColor, style.borderColor
  • Highlight/Select an element to draw attention to it.

  • Indicate whether some text is editable or read-only.

Font Style - stylefontSize, style.fontWeight, style.fontStyle
  • Change the size, weight, and/or slant of a font to highlight some text.

Inner/Outer HTML- style.innerHTML, style.outerHTML
  • Change some text content.

  • Change arbitrary HTML, possibly changing the nested HTML of an element as well.

Image Source - src
  • Change an image object by modifying src to point to another image URL.

Real-World Examples

Ajax-S

Robert Nyman's Ajax-S is a slideshow manager - think "Powerpoint Lite" - that morphs the slide content as you flick through the presentation (Figure 1.3, “Ajax-S”).

Figure 1.3. Ajax-S

Ajax-S

Digg Spy

Digg Spy shows new stories and events such as user moderation as they happen (Figure 1.4, “Digg Spy”). From a Display Morphing perspective, what's interesting is the fade effect used to highlight each item as it appears.

Figure 1.4. Digg Spy

Digg Spy

Ajax Spell Checker

The Ajax spell checker highlights any misspellings. It morphs the words into a red, underlined, form familiar to any MS-Word user. A similar service is also offered by another Ajax app, GMail.

Code Example [AjaxPatterns Countdown Demo]

The example is a simple countdown demo. A number counts down with the background colour indicating "heat level" - green at the start, transitioning to red at the end.

The div that changes colour is called timeout. Its initial declaration simply specifies its id and class:

    <div id="timeout" class="status"></div>

Using techniques covered in the “Scheduling” pattern, the startup sequence arranges for onTick() to be called every 100 milliseconds. At each interval, timeout is modified. innerHTML changes to alter the text and style.backgroundColor to change the colour:

    $("timeout").innerHTML = Math.round(secsRemaining);
    $("timeout").style.backgroundColor = calculatePresentColor();

The background colour is determined by a function that manages the transition from green to red according to secsRemaining. Colours are usually represented with hex RGB values - e.g. you can set style.backgroundColor to the string, #00ff00, to make it green. However, there's a more convenient notation for this, based on percentages, so an equivalent representation is rgb(0%,100%,0%). The algorithm here gradually increases the red component from 0% to 100% and decreases the green component from 100% to 0%. Blue is fixed at 0%. At each moment, the red component is assigned to the percentage of time remaining and the green component to the percentage covered so far.

    function calculatePresentColor() {
      var secsSoFar = TOTAL_SECS - secsRemaining;
      var percentSoFar = Math.round((secsSoFar / TOTAL_SECS) * 100);
      var percentRemaining = Math.round((secsRemaining / TOTAL_SECS) * 100);
      return "rgb(" + percentSoFar + "%, " + percentRemaining + "%, 0%)";
    }

Related Patterns

“Page Rearrangement” looks at manipulating the overall structure of the page, whereas this pattern looks at the appearance of individual elements. Together, the two patterns cover all aspects of display manipulation.

Metaphor

Display morphing is like using a magic paintbrush to change the appearance of anything on the page.

Want To Know More?

Live Wiki Version for Display Morphing