Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation
Notes

News List

Introduction

Links

Thompp's Javascripts Index
Thompp nation Home Page

This Javascript lets you display a list of latest updates to your site. Useful if you have a large site with several different pages that list updates.

Within the script, you maintain a list of the latest update on each part of your site. For each page, you enter the address of the page, its title, the latest update and its date. This script then lists these, highlighting the most recent.

Example of this script:

Click here for Demo

Pre-requisites

none

Installation

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

1/1. Add the following code to the <body> part of your html page: ================================================================= <table width=100%> <Script Language="JavaScript" !Src="totdmsg.js"> months=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); newslist=new Array(); // each entry is: page's url/title/last news/date as YYYY-MM-DD newslist[0] = new Array("home.html#news","Home Page", "England qualify for 2002 World Cup", "2001-10-06"); newslist[1] = new Array("q3zone.html#news","Quake III Zone", "Plasma Arena map released","2001-10-06"); newslist[2] = new Array("q2zone.html#news","Quake II Zone", "Tutorial Models added to Downloads page","2000-12-14"); newslist[3] = new Array("q2mods.html#news","Quake II Mods", "Quekken Home Page Opened","2001-08-02"); newslist[4] = new Array("q2mtuts.html#news","Quake II Tutorials", "Team weapon tutorials added","2001-04-07"); newslist[5] = new Array("q2mtr.html#news","Team Rocket", "Capture the Flag added in Version 3","2001-11-04"); newslist[6] = new Array("q2quekken.html#news","Quekken", "Quekken Screenshots Available","2001-08-02"); newslist[7] = new Array("jszone.html#news","JavaScript Zone", "Password, Archive Viewer and Feedback Form Scripts added","2001-08-08"); newslist[8] = new Array("theme04.html#news","Liverpool FC", "UEFA Supercup 2001 Champions","2001-08-24"); newslist[9] = new Array("muffins.html#news","Martha & the Muffins", "Martha and the Muffins fan page launched","2000-12-02"); newslist[10] = new Array("jokezone.html#news","Joke Zone", "Jokes Page Completed","2001-04-22"); newslist[11] = new Array("gamezone.html#news","Game Zone", "Game Zone Re-launched","2001-09-23"); var latest = 0; // most recent news item var latestdate = "0000-00-00"; // find latest news and highlight for (i = 0; i < newslist.length; i++) { //alert( newslist[i][3] + "/" + latestdate + "/" + comparedates(newslist[i][3], latestdate) ); if ( comparedates(newslist[i][3], latestdate) == 1) { latestdate = newslist[i][3]; latest = i; } } // then display list for (i = 0; i < newslist.length; i++) { if (i == latest) { document.write("<tr bgcolor='#f0c0c0'>"); } else { document.write("<tr>"); } document.write ("<td width=20%>"); document.write ("<b><small><a href='"+newslist[i][0]+"'>"+newslist[i][1]+"</a>"); document.write ("<td width=45%>"); document.write ("<b><small>"+newslist[i][2]+"</a>"); document.write ("<td width=15%>"); document.write ("<b><small><font color='#6060FF'>"+formatdate(newslist[i][3])+"</a>"); } // format date from yyyy-mm-dd to dd mon yyyy function formatdate(pdate) { var xdate = ""; temp = pdate.split("-"); xdate = temp[2]; monthno = eval(temp[1]) - 1; xdate = xdate +" " + months[monthno]; xdate = xdate + " " + temp[0]; return xdate; } // compare 2 dates - returns 1 if date1 > date2 function comparedates(date1, date2) { temp1 = date1.split("-"); temp2 = date2.split("-"); if (temp1[0] > temp2[0]) { return 1; } else if ( (temp1[0] == temp2[0]) && (temp1[1] > temp2[1]) ) { return 1; } else if ( (temp1[0] == temp2[0]) && (temp1[1] == temp2[1]) && (temp1[2] > temp2[2]) ) { return 1; } return 0; // date1 not > date2 } </script> </table>

Notes

this tutorial demonstrates:
- how to use 2-dimensional arrays
- how to display lists of data in tabular format

Page last updated 15th November 2001