Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation
Notes

Archive Viewer

Introduction

This Javascript demonstrates how to create a document archive viewer.

The html page shows archive pages of 20 documents at a time, although this number can be customised. There are functions to move to the next and previous pages, choose a random page, or move to the latest (asumed to be the last) page.

A document (in pure text format) can be selected, and it is displayed in a text area. There are then more functions to move to the previous and next documents, choose a random document, or go to the latest (last) document.

Note - the documents must live in a single folder, and follow a similar naming standard, namely prefix-nn-suffix, e.g., joke1.txt, joke2.txt, etc. 'joke' is the prefix and '.txt' is the suffix.

Future enhancements will include a proper index showing more descriptive file names.

In the demo below, register yourself a password, return to the joke zone page, enter your password, then click on the jokes link to proceed to the jokes archive page.

Archive Viewer Demo (Jokes)

Pre-requisites

none

Installation

Cut and paste the following code to your html page as indicated:

1/2. Add the following code to the <head> part of your html page: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // cookie variables var expDays = 1; // was 30, forces 'go to page 1' on new day var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); // script constants var gMaxDocs = 386; // number of docs in archive var gPrefix = "Jokes/joke"; // prefix of archive files var gSuffix = ".txt"; // suffix for archive files var gScrollDocs = 20; // items per page var gNumCols = 5; // columns per page var gCookie = 'PT_JokePage'; // cookie that stores current page //script variables var gCurrDoc; // current document displayed function DisplayPage(FirstDoc, ScrollDocs, NumCols) { var i, j; var LastDoc, LastDoc2; var xwidth=100/NumCols; var msg="<small><small><b><center>", zmsg=""; var WriteMsg; // determine last doc to show LastDoc = FirstDoc; LastDoc -= -gScrollDocs; // don't even ask LastDoc -= 1; // last page LastDoc2 = LastDoc; if (LastDoc >= gMaxDocs) { LastDoc2 = gMaxDocs; zmsg = " --- (This group contains the latest items) "; } // write page number msg = msg + "Documents "+FirstDoc+" to "+LastDoc2+" of "+gMaxDocs; msg = msg + zmsg + "</small></small></b></center><hr>"; document.write(msg); // go display those docs j=NumCols; for (i=FirstDoc; i <= LastDoc; i++) { j++; // determine next row if (j > NumCols) { document.write("<tr>"); j=1; } // write out link to each joke, sorry, document // document.write("<td width="+xwidth+"% align=center><small><a href='"+gPrefix+i+gSuffix+"'>Joke "+i+"</a>"); WriteMsg="<td width="+xwidth+"% align=center>"; document.write(WriteMsg); if (i <= gMaxDocs) { WriteMsg="javascript:ShowItem('"+i+"')" WriteMsg='"'+WriteMsg+'"' WriteMsg="<small><a href="+WriteMsg+">"+i+".</a>"; document.write(WriteMsg); } } } function ChoosePage() { var CurrentFirstDoc=GetCookie(gCookie); if (CurrentFirstDoc == null) { CurrentFirstDoc = 1; } DisplayPage(CurrentFirstDoc, gScrollDocs, gNumCols); } function PrevGroup() { var CurrentFirstDoc=GetCookie(gCookie); if (CurrentFirstDoc == null) { CurrentFirstDoc = 1; } // dont redisplay if at start if (CurrentFirstDoc <= 1) { SetCookie(gCookie, 1); return; } // point to new page and redisplay CurrentFirstDoc -= gScrollDocs; if (CurrentFirstDoc < 1) { CurrentFirstDoc = 1; } SetCookie(gCookie, CurrentFirstDoc); window.location = window.location; } function NextGroup() { var CurrentFirstDoc=GetCookie(gCookie); if (CurrentFirstDoc == null) { CurrentFirstDoc = 1; } // check not already exceeded end - go to first page if (CurrentFirstDoc > gMaxDocs) { SetCookie(gCookie, 1); window.location = window.location; return; } // point to new page and redisplay, unless at last page CurrentFirstDoc -= -gScrollDocs; if (CurrentFirstDoc > gMaxDocs) { return; } SetCookie(gCookie, CurrentFirstDoc); window.location = window.location; } function RandomGroup() { var NumPages, CurrPage, FirstDoc; // pick random page NumPages = gMaxDocs / gScrollDocs; CurrPage = Math.floor(Math.random()*NumPages); FirstDoc = (CurrPage * gScrollDocs) - -1; // check not already exceeded end - go to first page if (FirstDoc > gMaxDocs) { SetCookie(gCookie, 1); window.location = window.location; return; } // point to new page and redisplay SetCookie(gCookie, FirstDoc); window.location = window.location; } function LatestGroup() { var NumPages, CurrPage, FirstDoc; // pick last page NumPages = Math.floor(gMaxDocs / gScrollDocs); CurrPage = NumPages; FirstDoc = (CurrPage * gScrollDocs) - -1; // check not already exceeded end - go to first page if (FirstDoc > gMaxDocs) { SetCookie(gCookie, 1); window.location = window.location; return; } // point to new page and redisplay SetCookie(gCookie, FirstDoc); window.location = window.location; } function ShowItem(iNumber) { var sLocation = gPrefix+iNumber+gSuffix; document.frames['myFrame'].location.href = sLocation; gCurrDoc = iNumber; } function PrevItem() { if (gCurrDoc > 1) { gCurrDoc--; ShowItem(gCurrDoc); } } function NextItem() { if (gCurrDoc < gMaxDocs) { gCurrDoc++; ShowItem(gCurrDoc); } } function LatestItem() { if (gCurrDoc < gMaxDocs) { gCurrDoc = gMaxDocs; ShowItem(gCurrDoc); } } function RandomItem() { { gCurrDoc = Math.floor(Math.random()*gMaxDocs); ShowItem(gCurrDoc); } } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } 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 null; } 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" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } </script> 2/2. Add the following to the <BODY> part of your html page, uncommenting lines as indicated: <table width=100%> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // DisplayPage(1,20,5); ChoosePage(); </script> </table> <!-- page navigation --!> <hr> <center><small><small> <a href="javascript:PrevGroup();">Prev 20</a> | <a href="javascript:NextGroup();">Next 20</a> | <a href="javascript:LatestGroup();">Latest </a> | <a href="javascript:RandomGroup();">Random </a> </center></small></small> <!-- document navigation --!> <br> <center><small><small> <a href="javascript:PrevItem();">Prev Doc</a> | <a href="javascript:NextItem();">Next Doc</a> | <a href="javascript:LatestItem();">Latest Doc</a> | <a href="javascript:RandomItem();">Random Doc</a> </center></small></small> <br> <iframe id=myFrame width=100% height=350 src="about:blank"> </iframe>

Notes

this tutorial demonstrates:
- how to use cookies
- how to display lists of items, scroll through them or select random items
- how to display text documents, scroll through them or select random items
the code for maintaining cookies is taken from the original date last visited / number of visits javascript from the JavaScript Source - thanks
if you use this script, amend the variable names' prefix from pt_ to something meaningful to your site
a method of maintaining a descriptive index will be added in the future.

Page last updated 8th August 2001