DHTML Menu: Friendly to No-Script Browsers

Earlier I described in my design objectives for a new website, http://www.whitebarncondo.com. This article describes the menu system used for that site.

My objective was to use a DHTML mouse-over menu to aid navigation and site layout, but to preserve good functionality for browsers which do not support Javascript or have Javascript turned off.

Here’s the demo:

If you view this demo with Javascript disabled, your experience will be much different, but very appropriate.

The demo above is also available here: http://www.duanemcguire.com/blog/menudemo/

The Javascript library I used for this implementation is from BrainJar. I made one modification the the brainjar.js library they present in their demo3 . The modification I made allows for the use of <UL> instead of <DIV> for menu containers.
The menu is implemented using CSS, Javascript (when detected), and ColdFusion. Though ColdFusion is used in these examples, any server-side technology could be used. And in fact no server-side technology is required, but as you will see, the server-side coding creates attractive code, which leads to easy maintenance.

The core code is contained in menu.cfm:

<cfparam name="url.area" default="home">
	// Server side function modifies the
	// class name of the current tab.
	// In this demo, modification is based on url of request.
	function activeTab(vArea){
		// this logic is for demo only
		// should be changed to suit the site architecture.
		if (url.area eq vArea){
			return "Current";
			return "";
<!--- Main Menu Bar --->
	The class of each "a tag" below is modified by the
	value of the function activeTab(area) below.
	The activeTab function returns either 'Current' or ''.
	Thus the "a tag" class is either menuButton or menuButtonCurrent
<div class="menuBar" >
	<a class="menuButton#activetab('home')#"
><a class="menuButton#activetab('document')#"
    onclick="return buttonClick(event, 'documentMenu');"
    onmouseover="buttonMouseover(event, 'documentMenu');"
><a class="menuButton#activetab('community')#"
    onclick="return buttonClick(event, 'communityMenu');"
    onmouseover="buttonMouseover(event, 'communityMenu');"
><a class="menuButton#activetab('contact')#"
Rather than putting out the dhtml menu directly, write it out with
client side script.  In that way, alternate browsers which may have
JS disabled will not see the divs at all.  We have also decluttered the
screens of these browsers if they also do not recognize CSS. We could
do this without coldfusion processing, but by stripping out CR and
TAB and escaping JS code, the menus:  documentMenu.cfm,
communityMenu.cfm, etc. are highly readable.
<cfsavecontent variable="dhtmlMenu">
	<cfinclude template="documentMenu.cfm">
	<cfinclude template="communityMenu.cfm">
	<cfinclude template="communityMenuNewsletters.cfm">
<cfset dhtmlMenu = replace(dhtmlMenu,chr(10),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(13),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(9),"","all")>

<script language="Javascript">

One of the menu <UL>’s, documentMenu.cfm, is shown here:

<!--- Document Menu --->
<ul id="documentMenu" class="menu"

	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_CCRs.pdf&area=document">Covenants and Restrictions</a></li>
	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_bylaws.pdf&area=document">By Laws</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/communityRules.cfm&area=document">Community Rules</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/petRules.cfm&area=document">Pet Rules</a></li>


Complete source code for this demo is available here:

And finally, by the way, the pages look fine when viewed on the simplest of browsers, lynx:
A view of the Documents Menu rendered by lynx



Joy of performance

When I got back to the piano a few months ago, after a 15+ year absence, I didn’t know what would happen. Ooo boy! A lot has happened. I have practiced with abandon, found a great teacher — Rebecca Wren of Ford Piano Studio — and things really are happening! The joy of it is that I find I can perform at a level which was not a part of me 15 years ago. What a fine feeling.

For the past two months I’ve been working on learning a piece recorded by Marian McPartland many years ago. The piece is her interpretation of “If You Could See Me Now”. I am working from the transcriptions of Don Sickler and John Oddo: “The Artistry Marian McPartland” (c 1985) I purchased my copy of this book on eBay. Amazon also lists it..

When first approached two months ago, I thought the first measure of page 48 was going to be out of reach. Today, well … I’m just so happy with it!
1st measure of page 48

Here’s an mp3 clip of my playing earlier this evening For me, it’s pure magic!

You can also hear Marian McPartland’s performance of this piece on Rhapsody (free).



Tidy Web Design

Recently I had the chance (volunteer work) to do some web development from the ground up. That’s not part of my everyday work, where I do mostly maintenance on existing web applications. I approached this project with several objectives:

  1. HTML/CSS standards compliant
  2. No Table layout
  3. Attractive, functional layout for screen sizes 800×600 and higher
  4. Javascript DHTML menus which support a good experience in a No Script environment
  5. Support the visually impaired by using resizeable fonts
  6. Provide a good print layout through use of CSS @media selector
  7. Strong use of CSS

Its still a work in progress! I’m not quite there with 1 and 2 above. I need to continue my quest in those areas. However, I’m quite pleased with other aspects of the objectives above. More later. Here’s a view of my work: http://www.whitebarncondo.com



Piano Performance Anxiety

Oh darn. I have Piano Performance Anxiety, and no, I’m not going to see a shrink. I’m investing in piano lessons instead. My Christmas present to myself was a 6’2″ grand built by the Charles Stieff Company of Baltimore in 1911.

Since Christmas, which technically ocurred just before Halloween, I’ve discovered a great deal about myself and my keyboard skills.

  • After several months of dedicated practice, I find that I’m just as good as I was 20 years ago
  • Actually, better!
  • I’m really lousy when anyone is listening!

This performance anxiety is, in a way, perplexing. I really didn’t anticipate it, since I’ve been performing publicly with my quartet(s) for more that 20 years now! Anxiety at those performances is nil.

So that gives me something to work on, besides notes! Today I did some interesting reading on the subject, and found two very different, and very interesting articles:
This article presents some thoughts from the perspective of an accomplished performer, with good advice to the amateur. Included in the thoughts is an interesting practice perspective on the MOTION TO THE OCEAN. The second article, a very personal view on performance anxiety, discloses an obvious truth: Playing the piano is so much fun, why worry about it?



Golf Course Intelligence

I went off early to the golf course this morning. I talked Wade in
the pro shop after I was done. I told him that I’d been concerned
about the course with all of the runoff and high water. He told me an
interesting story.

The background:
The American Fork River (which would be called a creek, where I come
from) is channelled through American Fork, and through the length of
our Tri-Cities golf course. The spring runoff has been very high,
and two weeks ago I could see that the river was within 18 inches of
overflowing its banks along the 15th fairway. In fact a small
section of riverbank did erode and cave in, but did not amount to much
damage to the course. For a stretch of about 500 yards, the river is
channelled through a 6-foot culvert under the 10th, 1st, and 5th
fairways. My concern has been that debries, a fallen tree, or
whatever might get lodged in that culvert and the damming would wash
out some of the course. And two weeks ago the situation was obviously
critical because that culvert was running with a tremendous force of
water at a level above its midpoint.

It isn’t alway so. Typically, in the summer the stream is diverted to
irrigation canals, and the river bed is dry. Just to the north of the
tenth fairway at the inlet to the culvert the river widens out and a
cart path goes down through the riverbed for a shortcut back to the
club house. Not now! That cart path is under 2 to 3 feet of fast
flowing river.

Wade told me this surprising tale. About two weeks ago, while the
river was at its highest, a kid driving a golf cart, who obviously had
less than normal intelligence, thought that he’d drive the cart
through the river, crossing just north of the culvert inlet. The
good news is that both the kid and the golf course survived. The
golfcart fared somewhat worse.

As the story was told when the cart got too deep into the river, the
front was grabbed by the force of the water and sent toward the
culvert. At that point a bit of intelligence appeared to surface in
the driver, as he jumped from the cart and into the river. The cart
proceeded into the culvert where its roof was ripped off.
Miraculously, the cart was propelled the entire length of the culvert
without becoming lodged. The battered cart was extracted from the
river south of the fifth fairway by the golf course’s largest tractor
and a hefty chain.

I’d bet the cart driver won’t be trying to ford rivers with a golf
cart a second time.



Timber Frame Workshop

In September, I posted here observations about a barn in Menlo, and the thoughts it spurred in me. Mostly it reminded me that my woodworking and construction projects of a lifetime have been on a small scale and it got me to thinking that I need to jump out and do some larger projects. As the thought progressed, somehow I moved into thinking about timber frame construction as a mode for the the project. Timber frame construction is traditional post and beam construction in which all joints are crafted of wood and joined with hardwood pegs. As the thought progressed, I realized that the project would follow this path:

  1. Buy a portable saw mill
  2. Buy some logs
  3. Make some lumber
  4. Build the frame
  5. Erect the building

Wind River Shop

The Wind River Timberframes Shop

Quite non-traditional and very exciting.

Yesterday I attended the Log and Timber Framing Expo in Sandy, UT. I came away with some valuable contacts and information. Represented at the show were two small firms from the region:

Chuck Brainerd and Dale Covington (Barn Owl) and Alan Bernholtz (Wind River) generously shared their thoughts and enthusiasms for the art of the timberframe. Chuck has built an impressive home for himself in Utah from a barn he salvaged in the midwest. Alan has completed many masterful homes, and his new workshop is a beauty in itself. I can’t expect to build anything of that scale, but it is an inspiration.




My son, Ryan, a student at Southern Utah State University, said he was interested in getting a new cell phone. He’d visited the TMobile website and found that per usual, TMobile (like all cellular companies) treats its new customers better than its existing customers. The phone he wanted was $70 if you are a new customer, and $180 if you are an existing customer. He asked if I thought we could get a better price.

Since I’ve been a customer of TMobile for more than 8 years — which I assume is close to a world record — I thought I’d give it a whirl. Ryan and I got on the phone to talk with the friendly customer service people of TMobile. We asked about the deepest discount on the phone and after trying the upgrade status of all 5 phones on our account, the representative determined that $180 was the best possible price. We’ve recently run through a spat of lost phones, and just didn’t have any upgrades available. He told us that one of our lines would qualify for the $70 rate in three months.

That’s when I turned on the loyal customer script:

“So, Greg, do the records in front of you show you how long I’ve been a TMobile customer?”

“Yes, they do. You have certainly been with us for a long time. Let me check on one other thing. Will you hold please?”

After a considerable pause, Greg was back, and he reported:

“I’ve researched your account and see that you have a deposit with us. Were you aware of that?”

“Really! It must have been there for a LONG time!” I said.

“Well yes”, said Greg, “We have your deposit of $500 from 1996.”

I’m breathless. “So, Greg, are you as surprised as I am? Wouldn’t your company normally refund a security deposit before the passing of eight years?”

“Well yes, this is certainly unusual. I think that I can request a refund of this deposit.”

I was amazed. Amazed that they held it for 8 years. Amazed that I had forgotten about a $500 deposit. Greg reported that he had indeed received approval to refund the deposit. And then, like a good salesperson, he asked if I might want to buy the upgrade phone for $180. While I was amused at his tenacity, and thankful for his good work, I said, “No. I don’t think the two events are related.”

Ryan bought the phone on eBay for $50.

I look forward to seeing the check. How much interest should I expect on a deposit that has been with them since 1996?



Back to school

A new branch campus of Weber State University sits just 600 yards from my office window. After the construction was complete, I ignored it for several months, but in August I made my move! I’m a student again!

After a long absence from the academic world, I’m back. And for the most part, I’m having fun. Some statistics:

1975 – Bachelors in Architecture
1978 – Bachelors in Math
1985 – Last college credits earned

My current direction is to earn a Bachelors in Computer Science over the next few years. If I’m having a great time, perhaps it will be a Masters. It’s amazing to look at the numbers and see that I’ve not been in a classroom for 26 years. Whoa! Some of the people I work with weren’t born at the time I was taking FORTRAN programming in my engineering curriculum at Grays Harbor College.

My current technical class is Discrete Mathematics. It is taught in an enjoyable manner. All the projects require programming examples written in C. This is challenging on two levels: First, just getting the academic brain cells working again. Second, I’ve never before written any C! So it is a fun challenge.

It’s great to engage the brain along new paths — even if the path is somewhat familiar.



Barn at Menlo

On the last several trips to Southwest Washington, my head has turned to enjoy the sight of a new barn at Menlo. It’s a fairly modest structure, but truly sweet, because I think, of its use of authentic materials and its classic design.

On a recent trip by I could not contain myself. I made a U-turn at Fern Hill and drove up the driveway. That is, up the driveway, past the NO TRESPASSING signs and the barking dogs. Like I’ve said, it’s a beautiful barn. I walked up to the door of the house and gave a knock. From the inside I heard a friendly “Come on In!”.

Somewhat timidly, I opened up the door and said, “OK, I’m coming in, but you don’t know me.”

Back came a rather gruff, “No, I sure don’t.”
“Well I’m sorry to barge in, but I just couldn’t help myself. I’ve been admiring your barn, and I just had to ask you about it.”

Now the voice inside became very warm and friendly. “Sure! Would you like to go out and take a look?”

I was then engaged in an hour coversation with the owner of this fine barn, Mike Smith. Mike built the barn with his family, using conventional post barn construction and rough sawn Douglas Fir. The entire structure is made of natural fir, including the board and batten siding. Mike works for Weyerhauser, and as he said, “I was able to get a good deal on some logs.” He had the logs sawn by a small mill operator, and the result is here!

I’ve reflected often on the captivating effect this structure had on me, as well as the enthusiasm for the project that Mike expressed. In the coming years, we’ll see the effects of this sighting on my own property. More to come!



Occasional observations of Duane McGuire