This allows you to include a navigation system (with graphic buttons) in your page as an include file, and lights up the button correctly as the user navigates your site. This is nice because as you add pages you only need to edit the include file.
See this example in action at http://freecfm.com/t/tentonhead.
On a side note, this page utilizes an advanced CSS attribute... "fixed" positioning for the navigation and the header divs. IE does not understand this yet, so you will notice nothing different... in Mozilla or NS6+ the header image and the navigation remain fixed while you scroll the page.
This tutorial consists of 3 sections...
- The navigation include file (as a custom tag)
- A nifty (linked) javascript that utilizes id's assigned to each image... this allows you to keep all of the "onMouseover and onMouseout" stuff out of your (X)HTML and the "onLoad" out of the <body> tag. This by the way, is all XHTML 1.1 compliant and validated.
- You will notice that there is an "x.gif" beside each image ending with an "o"... in the case that you are on that page, that is to satisfy the javascript looking for the id... it is a 1x1 transparent gif.
- Image names: le.gif is the plain image, lea.gif is the mouseover image, leo.gif is the active image for when you are on that page
- The [onfocus="blur();"] in the anchor tag removes that annoying dotted line around a link that IE give you free of charge
- The (X)HTML itself... merely a call to your include file
------------------------------------------------------
1) The include file check the querystring and lights up the proper button depending on what was clicked...
---------------------
<cfif IsDefined("lite")>
<!-- our variable that tracks what the user clicked -->
<cfoutput>
<cfif #lite# EQ "leena">
<img src="b/leo.gif"
height="27"
width="97"
alt="Leena's Page" />
<img id="le"
src="b/x.gif"
height="1"
width="1"
alt="Leena's Page" />
<cfelse>
<a href="leena.cfm?lite=leena"
onfocus="blur();">
<img
id="le" src="b/le.gif"
height="27"
width="97"
alt="Leena's Page" />
</a>
</cfif>
<cfif #lite# EQ "jake">
<img src="b/jao.gif"
height="27"
width="97"
alt="Jake's Page" />
<img id="ja"
src="b/x.gif"
height="1" width="1"
alt="Jake's Page" />
<cfelse>
<a href="jake.cfm?lite=jake"
onfocus="blur();">
<img
id="ja" src="b/ja.gif"
height="27"
width="97" alt="Jake's Page" />
</a>
</cfif>
<cfif #lite# EQ "diane">
<img src="b/dio.gif"
height="27"
width="97" alt="Diane's Page" />
<img id="di"
src="b/x.gif"
height="1"
width="1"
alt="Diane's Page" />
<cfelse>
<a href="diane.cfm?lite=diane"
onfocus="blur();">
<img
id="di" src="b/di.gif"
height="27"
width="97" alt="Diane's Page" />
</a>
</cfif>
<cfif #lite# EQ "jim">
<img src="b/jio.gif"
height="27" width="97"
alt="Jim's Page" />
<img id="ji"
src="b/x.gif"
height="1"
width="1"
alt="Jim's Page" />
<cfelse>
<a href="jim.cfm?lite=jim"
onfocus="blur();">
<img
id="ji" src="b/ji.gif"
height="27" width="97"
alt="Jim's Page" />
</a>
</cfif>
<cfif #lite# EQ "pics">
<img src="b/picso.gif"
height="27"
width="97"
alt="Family Pictures Page" />
<img id="pics"
src="b/x.gif"
height="1"
width="1"
alt="Family Pictures Page" />
<cfelse>
<a href="pictures.cfm?lite=pics"
onfocus="blur();">
<img
id="pics"
src="b/pics.gif" height="27"
width="97"
alt="Family Pictures Page" />
</a>
</cfif>
<cfif #lite# EQ "guest">
<img src="b/guesto.gif"
height="27"
width="97"
alt="Sign Our Guestbook Page" />
<img id="guest"
src="b/x.gif"
height="1" width="1"
alt="Sign Our Guestbook Page" />
<cfelse>
<a href="guestbook_posts.cfm?lite=guest"
onfocus="blur();">
<img
id="guest"
src="b/guest.gif"
height="27"
width="97"
alt="Sign Our Guestbook Page" />
</a>
</cfif>
<cfif #lite# EQ "ctcs">
<a href="ctcs.cfm?lite=ctcs"
onfocus="blur();">
<img
src="b/ctco.gif" height="27"
width="97" alt="Our Contacts Page"
/>
</a>
<img id="ctc"
src="b/x.gif"
height="1"
width="1"
alt="Our Contacts Page" />
<cfelse>
<a href="ctcs.cfm?lite=ctcs"
onfocus="blur();">
<img
id="ctc" src="b/ctc.gif"
height="27"
width="97"
alt="Our Contacts Page" />
</a>
</cfif>
<cfif #lite# EQ "login">
<img src="b/logino.gif"
height="27"
width="97" alt="Members Login and Sign Up Page" />
<img id="login"
src="b/x.gif"
height="1"
width="1"
alt="Members Login and Sign Up Page" />
<cfelse>
<a href="login.cfm?lite=login"
onfocus="blur();">
<img
id="login"
src="b/login.gif"
height="27"
width="97" alt="Members Login and Sign Up Page"
/>
</a>
</cfif>
<cfif #lite# EQ "home">
<img src="b/homeo.gif"
height="27"
width="97"
alt="Home Page" />
<img id="home"
src="b/x.gif" height="1"
width="1" alt="Home Page" />
<cfelse>
<a href="index.cfm?lite=home"
onfocus="blur();">
<img
id="home"
src="b/home.gif"
height="27"
width="97"
alt="Home Page" />
</a>
</cfif>
</cfoutput>
<cfelse>
<!-- else use has entered via search engine or typed in the staright domain so nothing is lit up yet -->
<cfoutput>
<a href="leena.cfm?lite=leena"
onfocus="blur();">
<img
id="le" src="b/le.gif"
height="27" width="97"
alt="Leena's Page" />
</a>
<a href="jake.cfm?lite=jake"
onfocus="blur();">
<img
id="ja" src="b/ja.gif"
height="27"
width="97"
alt="Jake's Page" />
</a>
<a href="diane.cfm?lite=diane"
onfocus="blur();">
<img id="di"
src="b/di.gif"
height="27"
width="97" alt="Diane's Page" />
</a>
<a href="jim.cfm?lite=jim"
onfocus="blur();">
<img
id="ji" src="b/ji.gif"
height="27"
width="97"
alt="Jim's Page" />
</a>
<a href="pictures.cfm?lite=pics"
onfocus="blur();">
<img
id="pics"
src="b/pics.gif" height="27"
width="97"
alt="Family Pictures Page" />
</a>
<a href="guestbook_posts.cfm?lite=guest"
onfocus="blur();">
<img
id="guest"
src="b/guest.gif"
height="27"
width="97"
alt="Sign Our Guestbook Page" />
</a>
<a href="ctcs.cfm?lite=ctcs"
onfocus="blur();">
<img
id="ctc" src="b/ctc.gif"
height="27"
width="97" alt="Our Contacts Page" />
</a>
<a href="login.cfm?lite=login"
onfocus="blur();">
<img
id="login"
src="b/login.gif"
height="27"
width="97" alt="Members Login and Sign Up Page"
/>
</a>
<a href="index.cfm?lite=home"
onfocus="blur();">
<img
id="home" src="b/home.gif"
height="27"
width="97" alt="Home Page" />
</a>
</cfoutput>
</cfif>
------------------------------------------------------
2) The javascript that preloads the images and does the mouseover work... notice below in the (X)HTML in number 3) that the body tag is free of all extraneous "onLoad" etc etc.... it is in the javascript...
---------------------
window.onload = init;
function init() {
initRollOvers();
MM_preloadImages('b/leo.gif','b/lea.gif','b/jao.gif','b/jaa.gif','b/dio.gif',
'b/dia.gif','b/jio.gif','b/jia.gif','b/picso.gif','b/picsa.gif','b/guesto.gif',
'b/guesta.gif','b/ctco.gif','b/ctca.gif','b/logino.gif','b/logina.gif',
'b/homeo.gif','b/homea.gif');
// writeControls();
// writeLinkControls();
// updateExternalLinks();
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function initRollOvers() {
var le;
var ja;
var di;
var ji;
var pics;
var guest;
var ctc;
var login;
var home;
if (document.getElementById) {
le = document.getElementById('le');
ja = document.getElementById('ja');
di = document.getElementById('di');
ji = document.getElementById('ji');
pics = document.getElementById('pics');
guest = document.getElementById('guest');
ctc = document.getElementById('ctc');
login = document.getElementById('login');
home = document.getElementById('home');
} else {
return false;
}
/*if (document.all) {*/
le.onmouseover = swapI;
le.onmouseout = swapI;
ja.onmouseover = swapI;
ja.onmouseout = swapI;
di.onmouseover = swapI;
di.onmouseout = swapI;
ji.onmouseover = swapI;
ji.onmouseout = swapI;
pics.onmouseover = swapI;
pics.onmouseout = swapI;
guest.onmouseover = swapI;
guest.onmouseout = swapI;
ctc.onmouseover = swapI;
ctc.onmouseout = swapI;
login.onmouseover = swapI;
login.onmouseout = swapI;
home.onmouseover = swapI;
home.onmouseout = swapI;
}
function swapI(e) {
e = (e) ? e : event;
thisI = (e.srcElement) ? e.srcElement : e.target;
if((thisI.status != 'a') &&
(thisI.status != 'p')) {
thisI.src = 'b/' + thisI.id + 'a.gif'; // i is for the images folder with path like this /jim/ttw2002/i/
thisI.status='a';
} else if(thisI.status != 'p') {
thisI.src='b/'+thisI.id+'.gif'; // i is for the images folder b is for buttons
thisI.status='';
}
}
------------------------------------------------------
3) Finally, the (X)HTML that asks for the include file...
---------------------
</head>
<body>
<div id="logo">
<img src="i/famlogo5.gif"
height="72" width="542"
alt="Summer Family Website"
title="Summer Family Website" />
</div>
<div id="nv">
<!--custom tag-->
<cf_leftnav>
<!--/custom tag-->
</div>
------------------------------------------------------
Thank you and thanks to Pablo for running this contest! Great idea!
Jim Summer
-
Recordset Paging in Cold Fusion
This will pull a predefined number of records from a database, allow the user to change the number of records to be shown, and write the "NEXT" or "BACK" (or both) buttons at the bottom of the page. Thus allowing the user to "surf" through the database. See it in action at http://freecfm.com/t/tentonhead/ and click on the "CTCS" link when you get there. The HTML for this page has changed a little since I first did this (so it validates as XHTML1.1) but the CFML remains as it is in this snippet.
Author: Jim Summer
Views: 46,291
Posted Date: Monday, December 9, 2002 -
Database Dates (between ranges)
This deals with database dates: (1)inserting a properly formatted date into the database, and then (2)pulling a query from the database between a date range defined by 2 text boxes.
Author: Jim Summer
Views: 29,620
Posted Date: Monday, December 9, 2002 -
Aliasing Your SQL Statements
Many developers I have talked to are not aware of the ability to create an "alias" in an SQL statement, concatenate, and even add strings into your SQL statements. A little work up front in the SQL can cut out a lot of tedious coding in thetag.
Author: Jim Summer
Views: 24,061
Posted Date: Tuesday, December 10, 2002 -
Navigation as an include file
Create an include file (custom tag) for your navigation to help make maintenance easier! This include file lights up the button depending on where the user is at in your website, and is XHTML 1.1 validated! If you need to edit your navigation, just do it in 1 place, the include file! Javascript included :)
Author: Jim Summer
Views: 67,896
Posted Date: Thursday, December 12, 2002 -
Replacing "enter" key with "<br>" tag
This little piece of code will transform those pesky "enter" keys in a textarea into "
" tags so your users input is printed out properly in your html page.
Author: Jim Summer
Views: 28,902
Posted Date: Friday, December 13, 2002 -
Search Engine Bot Notifier
This code detects the most common user agents (web browsers) and notifies you via email if it is not a recognized user agent as defined in the code. Usually this will be a bot of some sort. Extrememly useful for tracking how often Google, Yahoo, etc visits your site. It will email you the bot and a reverse IP lookup url with the IP appended so you can verify if it is a "good bot" or a "bad (spam) bot" (then you can block that IP or stop processing of the page). Use this in your home page or as an include file throughout your site. Nothing fancy it should work on MX also although I have not tested it there.
Author: Jim Summer
Views: 28,089
Posted Date: Wednesday, April 14, 2004
