//============================================================================== // Free floating navigation menu module // // Author: Kevin Johnson // Date: 25th April 2005 // // (c) Copy right Townfield Enterprises 2005 // //------------------------------------------------------------------------------ // Change control // // WARNING jscript date object uses 0-11 for months (Jan - Dec)!! // var version = 1.0 ; var vDate = new Date(2006,7,09) ; // August // // First implementation. // Based on WITTON implementation - V1.11 // //------------------------------------------------------------------------------ // Initialise control data // var pageTopOffset = 5 // CONTENTS Top margin style in px var minNavSpacerHeight = 35 // Minimum height of NavSpacer in px var navPromptStyleName = '.NavBar A SPAN' // Name of Prompt box style selector //var navPromptStyleName = '#NavSpacer' // Name of Prompt box style selector var navPromptStyleIndx = 0 // Item index in stylesheet for above var code = '' // // Scan the style sheet rules to find the item who's selector text is the same // as the prompt box style selector [navPromptStyleName] // while (document.styleSheets(0).rules.item(navPromptStyleIndx).selectorText != navPromptStyleName){ navPromptStyleIndx = navPromptStyleIndx + 1 } function WriteMenu(Menu) { // // Function WriteMenu() // Generates HTML code from the body tag through to the end of the navigation // menu DIV. The menu content is selected via the selector value "Menu". // // Display formatting is entirely controlled by the CSS selectors... // .NavBar Container for navigation menu // .NavLab // #NavSpacer // .NavBar A SPAN [SPAN within A within .NavBar] // A:hover [pseduo class on the above anchor (A)] // // Events processed on element // onload [pageLoad - // onresize [navBarSize - // onscroll [calculate new offset for navbar from the // top of the DOCUMENT such that it // remains at the top of the SCREEN] // code = " " + "
If you can see this please send the details of your web browser (name and version) to the web designer - see link lower left.
" + "
" switch(Menu) { case "NavBarMain": addMenuItem('index.htm','Home','Website front page'); addMenuItem('food.htm','Food','Regular menus & sepecial events'); addMenuItem('drink.htm','Drink','Beers and wines') addMenuItem('events.htm','Events','What\'s on during the week and special occasions') addMenuItem('history.htm','History','The history of this old watering hole...') // addMenuItem('locality.htm','Locality','Things to do around and about Kingsley') addMenuItem('findus.htm','Find us','How to get here') addMenuItem('links.htm','Links','Links to local web sites') break } code += "
" + "
" + "
" + " website design by:" + " townfield enterprises" + " \"PlusNet" + "
" + "
" + "
" return code } function addMenuItem(pageURL, linkText, explainText) { // // Function addMenuItem(targetURL, linkText, explainText) // // Appends to the existing contents of the global variable 'code', // the HTML to construct an Anchor element, having... // - a target URL of 'targetURL' // - visible description of 'linkText' // - extended descriptive text of 'explaintext' // // If the menu item referes to the current page, then an Anchor element // is not generated. In its place an "active page" indicator is created // thus implementing best web page design pratice and providing clear // indication to users the location of the current page in the navigation // system. // // Active page indicator: linkText < // Style is "NavBarActive" // if( window.location.toString().indexOf(pageURL)>0 || ( window.location.toString().slice(-1) == '/' && pageURL == 'index.htm' ) ) { code += '' + linkText + ' < ' } else { code += " " + linkText + "" + explainText + " " }; } function addMenuLabel(labelText) { code += " " + labelText + "" } function addPageRef(pageURL, linkText) { code += " " + linkText + " " } // //------------------------------------------------------------------------------ // Navigation bar size control functions // // The navigation is contained within a DIV block called NavBar // It consists of a number of BLOCK tags followed by // a DIV called NavGap. // A DIV called NavSpacer is used to... // (a) "streach" the size of the NavBar to that of the client height // (b) provide a place holder for the display of the navigation prompt // held in the content of the navigation tags // function pageLoad() { // // Function pageLoad() // Called when web page is loaded into the browser // Remembers the initial height of the navigation bar // Sets the top of the navPromptStyleName to the top of the NavSpacer // NavBar.originalHeight = document.all.NavBar.clientHeight; document.styleSheets(0).rules.item(navPromptStyleIndx).style.top = parseInt(NavSpacer.offsetTop) ; navBarSize(); } function navBarSize() { // // Function navBarSize() // Resize the height of the navigation bar when the page is loaded or // the window is resized, such that the NavBar
is the height of // the client window less twice the pageTopOffset to provide for equal top // and bottom borders. // // Adjusts the height of the NavSpacer to push the web development // credits to the bottom of the navigation bar. // NavBar.currentHeight = document.all.NavBar.clientHeight NavBar.style.height = document.body.clientHeight - 10; jheight = parseInt(NavBar.style.height) - NavBar.currentHeight ; NavSpacer.style.height = NavSpacer.clientHeight + jheight ; } function navBarScroll() { if (document.body.scrollHeight - document.body.scrollTop + pageTopOffset > document.body.clientHeight) { NavBar.style.top=document.body.scrollTop + pageTopOffset Diagnostic.style.top = document.body.scrollTop + pageTopOffset + 25 } } function diagnostics() { diagnosticHTML = "

Web page diagnostic report

" diagnosticHTML += "

Code version: " + version diagnosticHTML += "
Code date: " + vDate diagnosticHTML += "
Browser name: " + navigator.appName diagnosticHTML += "
Browser version: " + navigator.appVersion + "

" diagnosticHTML += "
" diagnosticHTML += "" diagnosticHTML += "

NavBar top: " + document.all.NavBar.offsetTop diagnosticHTML += "
Navbar original height: " + NavBar.originalHeight diagnosticHTML += "
NavBar current height: " + document.all.NavBar.clientHeight diagnosticHTML += "
NavBar height change: " + parseInt(document.all.NavBar.clientHeight - NavBar.currentHeight) diagnosticHTML += "

NavBar spacer clientHeight: " + document.all.NavSpacer.clientHeight diagnosticHTML += "
NavBar spacer offsetHeight: " + document.all.NavSpacer.offsetHeight diagnosticHTML += "
NavBar spacer posHeight: " + document.all.NavSpacer.posHeight diagnosticHTML += "
NavBar spacer height adjustment: " + jheight diagnosticHTML += "
NavBar spacer top: " + document.all.NavSpacer.offsetTop diagnosticHTML += "

NavBar prompt style: " + navPromptStyleName diagnosticHTML += "
NavBar prompt style Idx: " + navPromptStyleIndx diagnosticHTML += "
NavBar prompt height: " + document.styleSheets(0).rules.item(navPromptStyleIndx).style.height diagnosticHTML += "
NavBar prompt top: " + document.styleSheets(0).rules.item(navPromptStyleIndx).style.top + "

" diagnosticHTML += "
" diagnosticHTML += "" diagnosticHTML += "

Current page: " + window.location diagnosticHTML += "
Refering page: " + document.referrer + "

" Diagnostic.innerHTML = diagnosticHTML Diagnostic.style.visibility = "visible" }