[thelist] Table Row Rollover

.jeff jeff at members.evolt.org
Thu Oct 18 23:38:25 CDT 2001


karen,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Karen Bowen
>
> How did you make the extra bar with the evolt logo link
> & drop-down in it??
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

the simple answer is there's alittle coldfusion involved, some css, and some
javascript.  it's something i threw together as a whim so the result is
nice, but the method and coding to achieve are not as good as i'd like.

basically i've got an include in application.cfm (which runs prior to every
.cfm file request) that checks for a url variable "sub".  if it's zero (it's
default value), it includes the html to make the toolbar, remove the borders
of the body via css to make it appear as if it's part of the browser, places
an iframe with percentage height and width in the rest of the document, and
then uses <cfabort> to stop further processing of the page request.  it then
loads the originally requested url into the iframe and appends the "sub" url
variable with a value of 1.  this request, application.cfm runs, includes
this same file, but finds that the "sub" variable has a value of 1 and
instead includes a snippet of javascript into the <head> of the document.
this snippet of javascript attaches a function to the onload event handler
which goes through all the links in the page setting their targets to "_top"
so the url in the browser window always references the actual document being
viewed (guaranteeing bookmarks will always work).

the toolbar itself is made of some spans that behave like buttons.  they
have events attached to them that control their state when you mouseover,
mouseout, mousedown, mouseup, click, etc.  the logo button simply changes
the location of the top level window object.  the viewsource button has two
states.  entering the clicked state, it grabs the outerhtml of the contents
of the <html> tags in the document in the iframe.  it then clears contents
of the iframe, document.write()s a pair of <pre></pre> tags into the
document in the iframe, and then sets the innertext of those <pre></pre>
tags to the outerhtml it just grabbed.  upon leaving the clicked state, it
uses the replace() method to change the location of the iframe document to
the url of the top level window object (the url you see in the browser
window).

the toolbar also contains a dropdown menu.  this part is built using
coldfusion and the <cfdirectory> tag.  it simply queries the file system for
all the files and folders in the directory currently being viewed.  it then
applies a "filter" so it only displays certain files and folders and keeps
others that i don't wish to be included from being displayed.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> Is it IE-only?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

what can i say, it's a personal site and i despise developing for some other
browsers and operating systems.  so, yeah, it's win/ie[5|6] for now.

does that answer your questions?

thanks,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/






More information about the thelist mailing list