Hypermedia Production, Fall 2000: Style Sheets Lab

[1.1] All the files you will need for this lab are stored in the directory called replacement within productionShare on Crow. Download this directory to your local machine. Launch a browser and a text editor.

[1.2] Open the file replaceLab.htm in your browser and in your text editor. You'll see other pages in the directory, each of which has "finished" in its title. These are the solution pages. Consult them if you get stuck, but don't open them yet. (Though if you do want to see the completed version of this lab, start with the page frameset.finished.htm.)

Step 2: Simple Text Replacement

[2.1] Scroll down in the markup for replaceLab.htm until you come to the BODY part of the document. Find the phrase "almost never." Notice that this phrase is surrounded by a SPAN container. Doing this lets us turn the phrase into an object that is exposed to JavaScript. You'll see what that means.

[2.2] In the initial SPAN tag immediately preceding "almost never," enter the following handler:

onClick="javascript: simpleSwap()"

As you might guess, this connects the span object to a script. We could do the same thing with an anchor container, but this way we don't get the color change and underlining that comes with link cues.

[2.3] For reasons that will become clear directly, we also need to indentify this particular span. Add the following attribute to the initial SPAN tag:

id="simpleSwapTarget"

The name "simpleSwapTarget" is entirely arbitrary and was designed to make the operation of the code easier to understand.

[2.4] Now for the JavaScript. Scroll up to the HEAD portion of the document and find the SCRIPT container. The function body for simpleSwap() has already been defined. Within that function body enter the following statement:


simpleSwapTarget.innerText = "NEARLY almost never";

[2.5] Switch to your browser and reload the page replacementLab.htm. Click on either of the words in the phrase "almost never." The phrase should be replaced with the text you typed in the JavaScript function.

Step 3: Replacement Using An Invisible DIV

[3.1] You can specify an innerText replacement directly in a function, but this approach can be cumbersome if you want to use a large amount of text. In that case you may want to put the replacement source text into a more convenient storage place, such as an invisible (or in this case, non-displaying) DIV. First we'll set up and load that object. Scroll down in the markup for replacementLab.htm until you see an empty DIV container. Within the initial DIV tag, enter the attributes:


id="secondSwapSource" style="display: none"

Now within the DIV container type: "Ralph Nader--you miserable whinging consumer!". (Sarcasm detected.)

[3.2] Scroll up in the markup until you see the SPAN container that surrounds the phrase "your family physician." In the initial SPAN tag, enter these attributes:


id="secondSwapTarget" onClick="secondSwap()"

[3.3] Scroll up to the SCRIPT container in the HEAD of the document and find the empty function body called secondSwap(). Within this function body type:


secondSwapTarget.innerText = secondSwapSource.innerText;

Test your work by saving, reloading the page in your browser, and clicking on the phrase "your family physician." You should see the replacement.

Step 4: Replacing innerHTML

[4.1] Back in the markup, find the anchor container surrounding the cue "more information". In the initial anchor tag, set the HREF value to:


javascript: thirdSwap()

[4.2] Find the SPAN container that surrounds the anchor container. In the initial SPAN tag, enter the attribute:


id="thirdSwapTarget"

Be careful to enter this attribute in the SPAN tag, not the anchor tag inside the span.

[4.3] Scroll up to the SCRIPT container in the HEAD of the document and find the empty function body for thirdSwap(). Enter the following:


thirdSwapTarget.innerHTML = thirdSwapSource.innerHTML;

[4.4] Now scroll back down to the bottom of the document and locate the DIV container we used last time. Copy this container (from start tag to end tag) and paste the copy into your document either before or after the original. In the duplicate version, change the ID attribute to read:


thirdSwapSource

Now take out all the contents of this DIV container and replace them with the following:


<a href="javascript: afterThirdSwap()">

more information than you can stand!</a>

This looks like an ordinary anchor construction, which indeed it is; but since it is sitting in a non-displaying DIV, you can't see it or activate it.

[4.5] Reload your page and click on the link cue "more information." It should stretch out into "more information than you can stand."

[4.6] Now one more refinement. When that link cue changes, so does the HREF attribute of its associated anchor tag--that's the difference between an innerHTML replacement and an innerText replacement. The new HREF refers to a script we haven't written yet. Go back up to the HEAD of the document and find the empty function body for afterThirdSwap(). Within this function enter:


window.alert("That's enough information for YOU.");

Save and reload again. Test by clicking on the link cue. On the second click you should see the alert message.

Step 5: Cascading Replacements Using an Invisible Frame

[5.1] For our final trick of the evening we require the assistance of a frameset. In your browser, open the page frameset.htm. (You don't need to do anything in the text editor just yet.) The frameset defines two frames, the left at 100% and the right at whatever is left, or zero: our now familiar invisible frame. We're going to use this frame in more or less the same way we've been using non-displaying DIVs, as a storage point for replacement text. As is usually the case with frames, this technique lets you break up possible page content into a number of component files; only now you can display them all within a single page, instead of in awkward little frames.

[5.2] We'll begin by setting up a paragraph container (<P></P>) around the sentence, "And now for something differently complete." In the initial P tag, enter the following attribute:


onClick="javascript: frameSwap(1)"

[5.3] As you can guess, we'll need to write some JavaScript real soon now, but not before we add a second element to that paragraph container. Place a DIV container around it (i.e., start the initial DIV tag before the initial P tag and the closing DIV tag after the closing P). In the initial DIV, enter this attribute:


id="swapPoint"

The whole structure looks like this:


<div id="swapPoint">

<p onClick="javascript: frameSwap(1)">

And now for something differently complete.

</p>

</div>


[5.4]  Okay, roll up to the SCRIPT container in the HEAD of the document one last time.  Find the empty function called frameSwap(which).  Inside this function body, enter these two statements:


parent.frames[1].location = "swapStuffer"+which+".htm";

setTimeout("completeSwap()", 500);


As you may recall, the first statement reassigns the SRC in the lefthand (invisible) frame.  It looks for a page called "swapStufferX.htm," where "X" is an integer value passed in the parameter which.  You'll see exactly how this works in a moment.  The second statement is a strange but necessary trick--it invokes a half-second delay before handing off to another function.  This little stutter is necessary because it takes browsers some time to load a frame, and we can't do the rest of this function until the frame is loaded. 

[5.5]  Right below the end of frameSwap(which), define a new function called completeSwap().  Here's its lone statement:


swapPoint.outerHTML =
 parent.frames[1].swapPoint.outerHTML;


This statement tells the browser to set the outerHTML property of the DIV called swapPoint to the outerHTML property of a DIV with the same name that happens to reside in the invisible lefthand frame.  In other words, this statement extracts information from the invisible frame and plugs it into the present page.

[5.6]  To see what can be accomplished with all this invisible maneuvering, save, go to your browser, and reload.  If you click in the "differently complete" sentence, its content should change... and change again... and again... until you come to the end of the line.

So how is this done?  As you well know, there's nothing in the markup that controls the second, third, fourth, or fifth changes; that information is stored within the pages that are loaded into the invisible frame.  Thus we create a cascade of successive pages.  Look at the code for the swapStuffer pages for the details.

This example shows only a very limited demonstration of this technique, which could be used in much more ambitious ways.  Note that it allows you to pull page content in from multiple sources, meaning that your page (like a frameset) can potentially display vast amounts of information.

Many thanks to John Coliton for catching several mistakes in the first draft of this lab.