Script Descriptions
Script name: Dynamic graph generator
The function:
This code is split into two sections. Details are outlined below.
Part one: Graph generator
This code has been inserted into nav.html
Firstly the function parses the cookies for this domain, creating a list of key/value pair contained in the 'sales' cookie. Then it iterates over this list, and fills an array arrayArray with these values. This array will be used by the graph drawer.
colorVal = "images/lilRed.png"
var arrayArray=new Array;
function chgChart() {
pans = (document.cookie.split(";")[0].split("=")[1]).split("%2C");
for(i = 0; i < pans.length; i = i + 1 ){
arrayArray[i]=pans[i].split("%3D");
}
headName = new Array ("Most popular pan","Sales");
arrayLength=2;
parent.right.location.reload()
}
Part two: Graph drawer
This code has been inserted into chart.html.
It iterates over the arrayArray, which was previously created by chgChart, and creates an html table representing that data.
document.write("<h2>"+parent.left.headName[0]+"<\/h2><table>")
for (j=1;j<parent.left.arrayLength;j++) {
document.write("<tr><td colspan='2'><h3>"+parent.left.headName[j]+
"<\/h3><\/td><\/tr>")
for (i=0;i<parent.left.arrayArray.length;i++) {
document.write("<tr><td>"+parent.left.arrayArray[i][0]+"<\/td><td>")
document.write("<img src='"+parent.left.colorVal+"' height='15' width='"+
(parent.left.arrayArray[i][j]*1)+"'>")
document.write(" "+parent.left.arrayArray[i][j]+"<\/td><\/tr>")
}
}
document.write("<\/table>")
Script name: Auto-tab
The function: Used to help fill in forms, this code auto-tabs to the next field after a set number of keystrokes
function toUnicode(elmnt,content){
if (content.length==elmnt.maxLength){
next=elmnt.tabIndex;
if (next<document.forms[0].elements.length){
document.forms[0].elements[next].focus();
}
}
}
Script name: Form validator
Function: This code displays an alert if the user does not fill in the required fields
First regular expressions define what types of input will be legal.
var Message, Error;
var regExp_text = /^[a-zA-Z\s]{1,20}$/i;
var regExp_numeric = /^[0-9]{6,11}$/;
var regExp_creditCard = /^[0-9]{16,16}$/;
var regExp_email = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/i;
var Submitted = 0;
For each field of the form, the corresponding regular expression is applied to check their validity. Upon valid submission, the script sets a Submitted flag. If that flag is set upon submission of the form, it is rejected straight away. This ensures an impatient user cannot submit the form several times while it is processed.
function validate(){
var f = document.forms["mainform"];
Error = 0;
Message = '';
if ( Submitted )
{
alert( 'Please wait for the form to be processed' );
return false;
}
if (!regExp_text.test(f.firstName.value)) {
Message += 'Your first name must be 1 to 20 letters long.\n\r';
Error++;
}
if (!regExp_text.test(f.familyName.value)) {
Message += 'Your family name must be 1 to 20 letters long.\r\n';
Error++;
}
if (!regExp_numeric.test(f.phoneNumber.value)) {
Message += 'Your phone number should be 6 to 11 digits.\r\n';
Error++;
}
if (!regExp_email.test(f.emailAddress.value)) {
Message += 'Your E-mail address is invalid\r\n';
Error++;
}
if (!regExp_creditCard.test(f.cardNumber.value)) {
Message += 'The card number must be 16 digits long,\r\n';
Error++;
}
if ( ! Error )
{
Submitted = 1;
return true;
}
Message += 'Please correct and submit again.\r\n';
alert( Message );
return false;
}
Script name: Browser detector
The function: Detects which browser the user has.
This will work for IE 4, 5, 5.5, 6 etc and Netscape style browsers which are currently Firefox, Mozilla, Netscape. Unfortunately it is much harder to detect the difference between Firefox, Netscape and Mozilla as they all return the same information.
// A string to hold the browsers name once we know it
var browserVersion = "";
// Check for Netscape
if(navigator.appName.indexOf("Netscape") != -1){
browserVersion = navigator.appVersion.substring(0 , 4);
}
// Check for Internet Explorer
// Unfortunately the appVersion command replies with a horrid string that needs splitting at the correct place
// this occurs in a different place to Netscape style browsers
if(navigator.appName.toLowerCase().indexOf("microsoft") != -1){
browserVersion = navigator.appVersion.substring((navigator.appVersion.lastIndexOf("MSIE") + 4) ,
(navigator.appVersion.lastIndexOf("MSIE") + 8));
}
// Write the info to the page
document.write("<div class='note'>Dear Customer, you're viewing our site with " + navigator.appName + " v" +
browserVersion + " and have JavaScript enabled. We wish you a pleasant visit.</div>")
Script name: Cookie function
The function: Sets a cookie in the user's browser which is then used to dynamically generate a graph displaying the most popular products.
function SetCookie(name, value)
{
document.cookie = name + "=" + escape(value);
}
SetCookie('sales', 'pan1=23,pan3=202,pan4=21,pan5=12')
Script name: Open new window
The function: Launches a new window containing a large image.
function newWindow(saucepanjpg) {
saucepanWindow = window.open(saucepanjpg, "saucepanWin", "width=456,height=303")
saucepanWindow.focus()
}
Script name: Image rollover
The function: Swap images when the user hovers their mouse over.
function rollOver(imageId){
// Get the element from the page that is beiong rolled over, we can do this
// as we pass in the id attribute value on mouseover and then change the source
document.getElementById(imageId).src = "images/" + imageId + "_over.jpg"
}
function rollOut(imageId){
// See above comment but for mouseout attribute
document.getElementById(imageId).src = "images/" + imageId + ".jpg"
}
Script name: Dynamic Image Selector Script
© Dynamic Drive (www.dynamicdrive.com)The function: Dynamic select and go script that displays the selected image on the page.
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="With standard lid"
description[1]="Side elevation"
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='Loading image...'
contentobj.innerHTML='<img src="'+which+'"><br />'+description[tempobj.options.selectedIndex]
}
else if (document.layers) {
document.dynamic1.document.dynamic2.document.write(
'<img src="'+which+'"><br />'+description[tempobj.options.selectedIndex])
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
window.defaultStatus = "Welcome to A B Pots and Pans"
Script name: Force frames
The function: Catches users who have entered the site outside of the frames and forces them back into frames
This checks whether the local frame's location is the same as the top's location. If it is, this means that the document is not open in the frameset, so it redirects the window's document to the frameset.
if (top.location == self.location) {
self.location.replace("index.html");
setActiveStyleSheet("default");
}
Script name: Styleswitcher
The function: Enables users to switch between stylesheets by clicking on a link.
setActiveStyleSheet disables all stylesheets, and activates the stylesheet given as parameter.
//styleswitcher
function setActiveStyleSheet(title) {
var i, a, main;
// Loop through all the elements in the DOM that have the node name of link in the frame named 'left'
for(i=0; (a = top.left.document.getElementsByTagName("link")[i]); i++) {
// If the node has an attribute 'rel' with a value containing a String 'style' and the link also has a 'title' attribute
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
// Disable this link node
a.disabled = true;
// Unless it has a 'title' attribute
if(a.getAttribute("title") == title) a.disabled = false;
}
}
// Loop through all the elements in the DOM that have the node name of link in the frame named 'content'
for(i=0; (a = top.content.document.getElementsByTagName("link")[i]); i++) {
// If the node has an attribute 'rel' with a value containing a String 'style' and the link also has a 'title' attribute
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
// Disable this link node
a.disabled = true;
// Unless it has a 'title' attribute
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
getActiveStyleSheet returns the stylesheet currently active.
// Loops throught the 'link' nodes of the DOM and returns the active stylesheet
function getActiveStyleSheet() {
var i, a;
// Loop through all the 'link' nodes in the DOM that have the node name of link in the frame named 'content'
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
// If this node has an attribute 'rel' with a value 'style' and an attribute 'title' and the link is not disabled
// then return this node
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
getPreferredStyleSheet returns the 'title' attribute value of the active stylesheet.
function getPreferredStyleSheet() {
var i, a;
// Loop through all the 'link' nodes in the DOM
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
// If this 'link' node has an attribute 'rel' containing a string 'style' in the content
// and has an attribute 'rel' with a string 'alt' in its value
// and it has an attribute 'title'
// then return the value of the 'title' attribute
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
// Else return null
return null;
}
createCookie sets a cookie on the users machine with a name of 'name' and set to expire after 'days'.
function createCookie(name,value,days) {
// If a 'days' value was passed into this function
if (days) {
// Create a new date object
var date = new Date();
// Set the date of this object
date.setTime(date.getTime()+(days*24*60*60*1000));
// set a string to hold the value in the date object
var expires = "; expires="+date.toGMTString();
}
// Else set the expiry string to be blank
else expires = "";
// Set the cookie to have a name of 'name' and an expiry date of 'expires'
document.cookie = name+"="+value+expires+"; path=/";
}
readCookie returns the value of the cookie specified by the parameter.
function readCookie(name) {
// Set 'nameEQ' to be the name passed into this function
var nameEQ = name + "=";
// Set a variable 'ca' to be an array of the cookies values split at the ';'s
var ca = document.cookie.split(';');
// Loop through the array
for(var i=0;i < ca.length;i++) {
// Getting each element out in turn
var c = ca[i];
// Trim the leading spaces (the ' ' characters) from this element in the array
while (c.charAt(0)==' ') c = c.substring(1,c.length);
// If this element in the array has string in it of value 'nameEQ'
// then return the value of this element from the positions 'nameEQ.length' to the end of the element.
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
// Else return null
return null;
}
This function is called onLoad and tries to read the cookie called 'style' and then sets the stylesheet ti be either the one in the cookie (if available) or the value specified by the return value of getPreferredStyleSheet() - i.e. the default stylesheet.
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
// When the page is unloaded remember the stylesheet that the user had set in a cookie
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);