Originally published at Netscape Enterprise Developer, now archived at the Wayback Machine
Dynamic HTML (DHTML), implemented in Netscape Navigator 4.x and Microsoft Internet Explorer 4.x, gives the Web page visitor the ability to alter the position, format, or visibility of an HTML element. However, the effects that are created with DHTML are transitory in that the next time the page is refreshed, the current DHTML state is not maintained and the page opens showing the same content layout as when the page is first loaded. Any changes to the content based on DHTML are not maintained. Sometimes this isn’t a problem, but other times this is irritating to the reader. This article covers how to add persistence to a DHTML page. Examples should work with all forms of Netscape Navigator 4.x and Internet Explorer 4.x, but have only been tested with IE 4.x and Netscape Navigator 4.04 in Windows 95.With DHTML, developers can provide functionality that hides or shows whichever layer the Web page reader wants to view. Developers can also add functionality that lets readers move content. The problem is that DHTML effects are not session persistent, which means that they aren’t maintained between page reloads. Following a link to another site and returning to the page can trigger a reload, which wipes out the effect and annoys the user,. especially if he or she has spent considerable effort achieving the current DHTML state.
For example, you can use DHTML to let your reader position your page contents for maximum visibility in her browser and get the page look just right. If she decides to leave your site to check Yahoo’s news for a few minutes and then comes back, her settings will have been erased.
So, what’s the solution to these problems? It’s relatively simple — add document persistence using Netscape-style cookies.
Using cookies
Despite the name, you won’t find Netscape-style cookies at your local bakery. Cookies are bits of information in the form of name-value pairs that are stored on the client’s machine for a set period of time or until the browser is closed. For security, cookies are created and accessed using specific syntax, are limited to 300 cookies total within the cookie database at 4K per cookie, and are limited to 20 cookies per domain (the URL where cookie was set).
Cookie syntax consists of a string with URL characters encoded, and may include an expiration date in the format:
Wdy, DD-Mon-YY HH:MM:SS GMT
Netscape has a complete writeup on cookies (see our Resource section at the end), including functions that can be copied and used to set and get cookies. I created modified versions of these functions to support my DHTML effects. As I don’t want to add to overly burdened cookie files, I don’t set the expiration date, which means the cookie does not get stored in the persistent cookie database or file. This also means that the DHTML effect only lasts for the browser session. However, this fits my needs of maintaining a persistent DHTML state in those cases where the reader moves to another site or hits the reload button.
DHTML state cookie functions
I created a JavaScript source code file called cookies.js that has two functions. One function sets the cookie by assigning the value to the document.cookie object. More than one cookie can be set in this manner, as cookie storage is not destructive — setting another cookie does not overwrite existing cookies, it only adds to the existing cookie storage for the URL. The cookie setting function is shown in the following code block:
// Set cookie name/value
//
function set_cookie(name, value) {
document.cookie = name + "=" + escape(value);
}
Next, the function to get the cookie accesses the document.cookie object and checks for a cookie with a given name. If found, the value associated with the cookie name is returned, otherwise an empty string is returned. The code for this function is:
// Get cookie given name
//
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
That’s it to set and get cookie values. The next section shows how to create two Web pages with simple, cross-browser DHTML effects. Then each page is modified to include the use of cookies to maintain DHTML state.
_BREAK1 Creating the DHTML Web pages
To demonstrate how to add persistence to DHTML pages, I created two Web pages implementing simple DHTML effects. The first page layers content and then hides and shows the layers based on Web-page reader mouse clicks. The second page has a form with two fields, one for setting an element’s top position and one for setting an element’s left position. Changing the value in either field and clicking an associated button changes the position of a specific HTML element.
Adding DHTML persistence for layered content
For the first demonstration page, a style sheet was added to the top of the page that defines positioning for all DIV blocks, formatting for an H1 header nested within a DIV block, and three named style sheet classes. The complete style sheet is shown here:
<STYLE type="text/css">
DIV { position:absolute; left: 50; top: 100; width: 600 }
DIV H1 { font-size: 48pt; font-family: Arial }
.layer1 { color: blue }
.layer2 { color: red }
.layer3 { color: green }
</STYLE>
Next, three DIV blocks are used to enclose three layers, each given the same position within the Web page. Each block also contains a header (H1), with each header given a different style-sheet style class. The HTML for these objects is:
<DIV id="layer1"> <H1 class="layer1">LAYER--BLUE</H1> </DIV> <DIV id="layer2" style="visibility:hidden"> <H1 class="layer2">LAYER--RED</H1> </DIV> <DIV id="layer3" style="visibility:hidden"> <H1 class="layer3">LAYER--GREEN</H1> </DIV>
That’s it for the page contents. To animate the page, I created a JavaScript block that contains a global variable and two functions. The global variable maintains the number of the layer currently visible. The first function is called cycle_layer; this function determines which layer is to be hidden and which is shown next, and then calls a function that performs the DHTML effect:
<SCRIPT language="javascript1.2">
<!--
// current layer counter
current_layer = 1;
// assign document clicks to function pointer
document.onclick = cycle_layer;
// cycle through layers
function cycle_layer() {
var next_layer;
if (current_layer == 3)
next_layer = 1;
else
next_layer = current_layer + 1;
switch_layers(current_layer, next_layer);
current_layer = next_layer;
}
The scripting block also assigns the function cycle_layer as the event handler function for all mouse clicks that occur within the document page. By doing this, clicking any where in the page document area that doesn’t include any other content results in a call to the function to change the layer.
The switch_layers function is the DHTML effects function, and it uses the most uncomplicated technique to handle cross-browser differences: it checks for browser type and then runs code specific to the browser. Other techniques can be used to handle cross-browser differences, but these are outside of the scope of this article. All that the function does is hide the current layer and show the next layer in the cycle, as shown here:
// hide old layer, show new
function switch_layers(oldlayer, newlayer) {
if (navigator.appName == "Microsoft Internet Explorer") {
document.all.item("layer" + oldlayer).style.visibility="hidden";
document.all.item("layer" +
newlayer).style.visibility="inherit";
}
else {
document.layers["layer" + oldlayer].visibility="hidden";
document.layers["layer" + newlayer].visibility="inherit";
}
}
Try out the first sample page. Clicking on the document background, not the text, changes the layer. Try setting the layer to the green or red layer, accessing another site using the same browser window, and returning to the sample page. When you return, the page is reset to the beginning DHTML effect, showing the blue layer.
To correct the loss of the DHTML effect, we can add persistence to the page by storing which layer is showing when the page unloads. This information is captured in a function called when the onUnLoad event fires.
To add persistence, I added the cookies Javascript source code file to the page, using an external source code reference:
<!-- add in cookie functions --> <SCRIPT language="javascript" src="cookie.js"> </SCRIPT>
Next, I added the function to capture the DHTML state:
// onunload event handler, capture "state" of page (article)
function capture_state() {
set_cookie("current_layer",current_layer);
}
When the page reloads, the onLoad event is fired, and a function is called from this event to “redraw” the DHTML effect. The function is called start_page, and it pulls in the cookie containing which layer should be shown:
function start_page() {
// get cookie, if any, and restore DHTML state
current_layer = get_cookie("current_layer");
if (current_layer == "")
current_layer = 1;
else
switch_layers(1, current_layer);
}
Finally, the two event handlers, onUnLoad and onLoad, are added to the BODY HTML tag:
<BODY onload="start_page()" onunload="capture_state()">
You can try out the second sample page, which has DHTML persistence — again, change the layer, open some other site and then return to the sample page. This time, the DHTML effect persists during a page reload.
Sometimes an effect requires more than one cookie, as the next example demonstrates.
_BREAK2 Adding DHTML Persistence for Positioned Content
In the next example, I used a style sheet again to define CSS1 and CSS-P formatting for the DIV block that is going to be moved in the page:
<STYLE type="text/css">
DIV { position:absolute; left: 50; top: 100; width: 600 }
DIV H1 { font-size: 48pt; font-family: Arial }
.layer1 { color: blue }
</STYLE>
Next, I created a form that has two text elements and associated buttons. One text and button element pair is used to change the DIV block’s top position, one pair is used to change the DIV block’s left position. The entire form is shown here:
<DIV id="first" style="position:absolute; left: 10; top: 10; z-index:2"> <form name="form1"> Set new Left Value: <input type="text" name="newx" value="50"> <input type="button" onclick="newleft(newx.value)" value="Set New Left"><p> Set new Top Value: <input type="text" name="newy" value="100"> <input type="button" onclick="newtop(newy.value)" value="Set New Top"> </form> </DIV>
Next, the positioned DIV block is created:
<DIV id="layer1" style="z-index: 1"> <H1 class="layer1">LAYER--BLUE</H1> </DIV>
Once the page contents have been created, you can add code to animate the DIV block based on whether the top or left position is changed. The function to change the top position is:
// change top value
function newtop(newvalue) {
if (navigator.appName == "Microsoft Internet Explorer")
layer1.style.pixelTop = parseInt(newvalue);
else
document.layer1.top = newvalue;
}
Again, the least complex technique to handle cross-browser differences is used, which is to check for the browser being used and run the appropriate code. The function to change the left position is identical to the top position function, except the CSS-P attribute “left” is changed rather than the CSS-P attribute “top”:
// change left value
function newleft(newvalue) {
if (navigator.appName == "Microsoft Internet Explorer")
layer1.style.pixelLeft = parseInt(newvalue);
else
document.layer1.left = newvalue;
}
That’s it for this page. You can try it out on the third sample page, where you can change the position of the DIV block by changing the left position, the top position, or both. Again, open another site in the browser and then return to the example page. Notice how the position of the DIV block does not persist between page reloadings.
Adding persistence to this page is very similar to adding persistence to the layered example page, except two values are maintained: the top and left values. The start_page and capture_state functions for this DHMTL effect are:
function start_page() {
// get cookie, if any, and restore DHTML state
var tmpleft;
tmpleft = get_cookie("currentleft");
if (tmpleft != "") {
currentleft = parseInt(tmpleft);
currenttop = parseInt(get_cookie("currenttop"));
newtop(currenttop);
newleft(currentleft);
if (navigator.appName == "Microsoft Internet Explorer") {
document.forms[0].newx.value=currentleft;
document.forms[0].newy.value=currenttop;
}
else {
document.first.document.forms[0].newx.value = currentleft;
document.first.document.forms[0].newy.value = currenttop;
}
}
}
function capture_state() {
set_cookie("currentleft", currentleft);
set_cookie("currenttop", currenttop);
}
To see how it works, try out the fourth sample page, move the DIV block, open another Web site in the browser and return to the example page. This time the DHTML effect does persist between page reloadings.
Summing up
In a nutshell, the steps to add persistence to a page are:
- Create the DHTML page
- Determine the values that must be maintained to re-create an existing effect
- Add the Netscape-style functions to the page
- Capture the onUnLoad event and call a function to capture the DHTML effect persistence values
- Capture the onLoad event and call a function to restore the DHTML effect from the persisted values
Using Netscape-style cookies to maintain DHTML effects won’t help with some DHTML persistence problems. For example, DHTML effects can be lost when a page is resized. In addition, if a page is resized between the time the DHTML persistence values are stored and the page is reloaded, the values may no longer work well with current page dimensions. However, for most effects and for most uses, the use of Netscape-style cookies is a terrific approach to DHTML persistence.