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
Date added: Thu. December 12, 2002
Posted by: Jim Summer | Views: 51615 | Tested Platforms: CF5 | Difficulty: Beginner
Best Practices
 |
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. - Date added: Wed. April 14, 2004
Replacing "enter" key with "<br>" tag
This little piece of code will transform those pesky "enter" keys in a textarea into "<br>" tags so your users input is printed out properly in your html page. - Date added: Fri. December 13, 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 the <cfoutput> tag. - Date added: Tue. December 10, 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. - Date added: Mon. December 9, 2002
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. - Date added: Mon. December 9, 2002
|
pdf
GREAT SITE!GOOD WORK!
www.amicutilities.com
Posted by: ramandra
Posted on: 04/23/2004 08:03 AM
|
Improvement To This HTML
Hello everyone. Thank you for your comments and for making this one of the top 5 most viewed tutorials. Since I wrote this I have learned a very simple but highly effective trick in the html. Sorry I did not think of this to begin with. The trick is: preface all of your images and links with a forward slash based on the root of the domain. It is simple, often overlooked, but I cannot remember its proper name. This page in this tutorial is 2 subfolders below the root of freecfm.com... so images will be like /t/tentonhead/b/leo.gif and links like /t/tentonhead/leena.cfm?lite=leena. This allows you to include the navigation include file no matter what level deep you are, it will always map the links and images to the correct level. Cheers!
Jim Summer
Posted by: Jim Summer
Posted on: 04/30/2004 04:53 PM
|
Congratulations!
Wooow! You have a great site! It is very well organized!
See mine (if U want): http://www.adolix.com
Posted by: Tudor
Posted on: 10/09/2004 01:19 PM
|
Updated Version
This again is all XHTML validated code... I have the IF/ELSE statements all on one line so it produces clean output in the xhtml when you view source... not tons of CF produced whitespace.
---
The site used in this example I did as a favor to my daughter's dance instructor... her site is Hollie's Dancin' Dream.
URL: http://www.holliesdancindream.net/
CSS URL: http://www.holliesdancindream.net/css/Jacksonville-Dance.css
3 state image URL: http://www.holliesdancindream.net/css/btnnav.jpg
---
What is does:
The code checks the path to the page you are currently on, if the path matches the IF statement (you are on that page), it dynamically writes a class="act" to the LI tag and removes the hyperlink, if you are not on that page, then (ELSE) the anchor tag behaves with the hover event with a background image swap (actually repositions the background image via CSS)... in your CSS you set up your LI .act class to be something to indicate "you are here". In this case it is one image to represent the 3 different states... off, hover, and active (act). Using CSS you can position the image however you want... so for all of the main navigation, there is only 1 http call to load the image, yet you get 3 different backgrounds for your anchor states (off, hover, active). This is very code/load efficient. In the CSS search for btnnav to see how the image is positioned for the different states.
---
CF Code:
<ul id="nav">
<cfif findnocase("/Jacksonville-Dance-Classes.cfm",path_info) GT 0><li class="act">Dance Classes</li><cfelse><li><a onfocus="blur();" href="/Jacksonville-Dance-Classes.cfm">Dance Classes</a></li></cfif>
<cfif findnocase("/Jacksonville-Dance-Camps.cfm",path_info) GT 0><li class="act">Dance Camps</li><cfelse><li><a onfocus="blur();" href="/Jacksonville-Dance-Camps.cfm">Dance Camps</a></li></cfif>
<cfif findnocase("/kidsnightout.cfm",path_info) GT 0><li class="act">Kid's Night Out</li><cfelse><li><a onfocus="blur();" href="/kidsnightout.cfm">Kid's Night Out</a></li></cfif>
<cfif findnocase("/dance-birthday-parties.cfm",path_info) GT 0><li class="act">Birthday Parties</li><cfelse><li><a onfocus="blur();" href="/dance-birthday-parties.cfm">Birthday Parties</a></li></cfif>
<cfif findnocase("/Jacksonville-Dance-Calendar",path_info) GT 0><li class="act">Event Calendar</li><cfelse><li><a onfocus="blur();" href="/Jacksonville-Dance-Calendar/">Event Calendar</a></li></cfif>
<cfif findnocase("/contact.cfm",path_info) GT 0><li class="act">Contact Us</li><cfelse><li><a onfocus="blur();" href="/contact.cfm">Contact Us</a></li></cfif>
</ul><!-- /nav -->
<cfif findnocase("/default.cfm",path_info) LT 1><a id="Jacksonville-Dance-Home" onfocus="blur();" href="http://holliesdancindream.net" title="Jacksonville Dance Hollie's Dancin' Dream Home page"><img id="Jacksonville-Dance-Home-img" src="/css/Jacksonville-Dance-home.gif" alt="Jacksonville Dance Hollie's Dancin' Dream Home page" title="Jacksonville Dance Hollie's Dancin' Dream Home page" /></a></cfif>
---
The last anchor tag (id="Jacksonville-Dance-Home"), checks to see if you are on the home page. If you ARE NOT on the home page, it displays "HOME" in big letters at the top of the page to make it really obvious... (some users don't get that the logo usually is a hyperlink to the home page). Again, using CSS, the (id="Jacksonville-Dance-Home") is assigned to be absolutely positioned... because it is absolutely positioned, it is taken "out of the flow" of the xhtml, this means you can put that "Home" hyperlink anywhere in the code (doesn't matter), and it will display wherever you tell it to in the CSS.
--
Feel free to email me with any questions, or post it in the forums. Thanks!
--
Jim Summer
Jacksonville Web Design
http://tentonweb.com/
Posted by: Jim Summer
Posted on: 01/11/2008 10:28 AM
|
|
ColdFusion Hosting
Blink
Del.icio.us
Digg
Furl
Google
Simpy
Spurl
Y! MyWeb