Using Cookies for WinHelp-style Annotations in Html

Providing an annotation tool for Html pages.

First, what is it? Annotations. Winhelp files had these great text windows for keeping personal notes - very handy for supplementing the help file. That functionality disappeared with the advent of HtmlHelp and Web-based help. So, at the request of a fellow help author, I wrote this: C-Notes.

Annotations stored in a user's cookie.

If you haven't checked it out in the toolbar above yet, it looks like this:

$images\c-notes_snapshot.jpg$

Clicking on the Help button brings up a help panel:

$images\c-notes_help_snapshot.jpg$

How to build your own:

1) Call a clean window…. First, we call our annotations page into a clean, pared-down window, in the upper left corner of the screen. Add this script to your header, or put it in a .js file.

A function to open a clean, pared-down window:

var w_left = (screen.width * .05);

var strHelpOptions = "location=no";

strHelpOptions += ",toolbar=no";

strHelpOptions += ",menubar=no";

strHelpOptions += ",status=no";

strHelpOptions += ",scrollbars=no";

strHelpOptions += ",resizable=no";

strHelpOptions += ",top=10";

strHelpOptions += ",left=";

strHelpOptions += w_left;

strHelpOptions += ",width=410";

strHelpOptions += ",height=280";

strHelpOptions += ",target='_new'";

function ShowHelp(strUrl)

{

cnotewin=window.open(strUrl, "cnotewin", strHelpOptions );

}

We also use this function to close a child window:

function cnotewinKill(){

if (cnotewin && !cnotewin.closed){

cnotewin.close();

}

2) Add some cleanup to the body tag. This cleans up the help window in case we forget to do it ourselves…

3) To call the Annotations dialog box, you can link from some simple text:

Or link your notes from an image:

Or, to show that you have an annotation waiting, use two images, notes0.gif, and notes1.gif . Show one or the other, depending if you have a cookie in the jar.

var ann="0";

if (document.cookie) ann="1";

document.write("<A href=\"JavaScript:void(0);\" onClick=\"ShowHelp('cookienotes.htm'); return false\" TITLE=\"Take some notes. . .\"><img src='notes" + ann + ".gif' border=0></A>");

4) And, the CookieNotes.htm page looks like this . . . This is the notepad itself: I've listed it all at once, and commented it throughout.

<HTML>

<HEAD>

the following is a bit of insurance to suppress any

unforeseen bugs. Remove it when modifying the code: */

<!--

onerror = null;

-->

</SCRIPT>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

/* This shows in the Title bar . . . */

<TITLE>C-Notes: Web-based notes, stored in a cookie...                     </TITLE>

/* Color the scroll bars . . . */

<STYLE>

body {

scrollbar-face-color : #E7DEBA;

scrollbar-shadow-color : #AD946C;

scrollbar-highlight-color : #FFEFAA;

scrollbar-3dlight-color : #FFF7DE;

scrollbar-darkshadow-color: #CCCCCC;

scrollbar-track-color : #F8F0D8;

scrollbar-arrow-color : #993300;

}

</STYLE>

/* clean window settings */

<!-- Hide

var cnotewin;

var w_left = (screen.width * .25);

var strHelpOptions = "location=no";

strHelpOptions += ",toolbar=no";

strHelpOptions += ",menubar=no";

strHelpOptions += ",status=no";

strHelpOptions += ",scrollbars=no";

strHelpOptions += ",resizable=no";

strHelpOptions += ",top=100";

strHelpOptions += ",left=";

strHelpOptions += w_left;

strHelpOptions += ",width=410";

strHelpOptions += ",height=280";

strHelpOptions += ",target='_new'";

/* show the help window function */

function ShowHelp(strUrl)

{

cnotewin=window.open(strUrl, "cookiewindow", strHelpOptions);

}

/* close the help window function */

function CloseHelp() {

if (cnotewin && cnotewin.open && !cnotewin.closed) cnotewin.close();

}

/* set the cookie expiry to one year */

var expDays = 365;

var exp = new Date();

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

/* this gets the text from the cookie */

function getCookieVal (offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1)

endstr = document.cookie.length;

return unescape(document.cookie.substring(offset, endstr));

}

/* this gets the cookie */

function GetCookie (name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg)

return getCookieVal (j);

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0) break;

}

return "";

}

/* this writes the cookie */

function SetCookie (name, value) {

var argv = SetCookie.arguments;

var argc = SetCookie.arguments.length;

var expires = (argc > 2) ? argv[2] : null;

var path = (argc > 3) ? argv[3] : null;

var domain = (argc > 4) ? argv[4] : null;

var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape (value) +

((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) +

((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");

}

/* this deletes the cookie */

function DeleteCookie (name) {

var exp = new Date();

exp.setTime (exp.getTime() - 1);

// This cookie is history

var cval = GetCookie (name);

document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();

window.location.href = window.location.href;

}

/* this adds the new content to the cookie */

function AddText()

{

something = cookiedough.value;

if (something.length > 2400)

/* accepts up to 2770 characters, but counts LF/CR as six

so, after a lot of trial and error, I settled on 2400 */

{

alert("CookieNotes are limited to 2,400 characters. \r\rYour notes total " + something.length +".\r\rTrimming the text to 2,400 characters...");

something = something.substring(0, 2400);

}

/* we trim off any remaining characters after 2400

we delete the existing cookie, and write the new one */

DeleteCookie (location.href + "CookieNotes");

SetCookie (location.href + "CookieNotes", something, exp);

window.status = "CookieNote added!";

cookiedough.value = "";

}

// End Hide -->

</SCRIPT>

</HEAD>

/* Set the colors, margins, and close help when it closes */

/* we write to the screen: */

<font size=2 face=Arial color="#824100"><b>Current C-Note:</b></font>

document.write("<TEXTAREA NAME='cookiedough' ROWS=13 COLS=46>");

document.write(GetCookie(location.href + 'CookieNotes'));

document.write("</TEXTAREA>");

</SCRIPT>

<NOBR>

</NOBR>

</BODY>

</HTML>

and we're done . . .

These cookies have a shelf life of three years…

It's an interesting tool, but it has its limitations; unless they're updated, Html cookies have a shelf life of three years - less, if they have an earlier expiration date.

Even worse, if you get too many of them (300 or over), your notes might disappear without a warning. A recent update will make no difference, because they're not deleted chronologically. It's all there on the packaging label . . .

If you want stable, persistent annotations, consider bringing up a text file at the user's root. It's easier, it's safer, and your browser won't arbitrarily delete its contents.

If you use this script on your website or other publication, please provide credit to Copperfield Publishing, and a link to us, if you would.