310 HOW: The Joy of JavaScript: Avoiding the Heartbreak of Linkitis
Can we use graphics instead of HTML text to perform these functions? Oh, yeah! In the original HTML document, we can use a fancy-pants GIF image we’ll call openwindow.gif:
<a href=”sucky_old_browser.html” onClick=”aWindow(‘porkpops.html’); returnfalse;”><img alt=”Open new window.” src=”openwindow.gif” height=”100”width=”100”></a>
And in the pop-up window we can use the dapper and elegant closeme.gif:
<a href=”#” onclick=”window.close(); return false”>)”><img alt=”Close this window.”src=”closeme.gif” height=”25” width=”50”>
And that’s all there is to it.
AVOIDING THE HEARTBREAK OF LINKITIS
Problem: The client insists on a menu with dozens of choices. You know such a menu will be ugly and confusing and will cause visitors to scroll indefinitely (or more likely, leave). Your client “knows better.” What’s a mother to do?
Solution: The JavaScript pull-down menu.
Slip this in your <HEAD> and smoke it:
<script type=”text/javascript”> <!--
function load_page(which_form)
{
self.location.href=which_form.modules.options[which_form.modules.selectedIndex].value;} //-->
</script>
This sets up a load_page function with a replaceable variable (which_form) and uses the location object to swap links in and out.
Now, in the <BODY> of your HTML document, create a standard HTML pulldown form element and use the onChange event handler to trigger new pages in response to user actions:
<form name=”hc”>
<select name=”modules” onChange=”load_page(this.form)” size=”1”> <option value=””>Pick a Project!
<option value=”a.html”>A List
Taking Your Talent to the Web |
311 |
<option value=”b.html”>B List <option value=”c.html”>C List <option value=”d.html”>D List <option value=”e.html”>E List <option value=”f.html”>F List <option value=”g.html”>G List <option value=”h.html”>H List <option value=”i.html”>I List <option value=”j.html”>J List <option value=”k.html”>K List <option value=”l.html”>L List <option value=”m.html”>M List <option value=”n.html”>N List <option value=”o.html”>O List <option value=”p.html”>P List <option value=”q.html”>Q List <option value=”r.html”>R List <option value=”s.html”>S List <option value=”t.html”>T List
</select>
</form>
This script will automatically change pages as soon as the user highlights any item in the list. If you prefer, you can use a button or other mechanism to actually initiate the action. You can also easily add inline CSS to add some style to the whole sorry affair:
<select name=”modules” onChange=”load_page(this.form)” size=”1” style=”font-size:10px; font-family: verdana, geneva, arial; background-color: #336; color: #ccc”>
The resulting mega-menu will look nice and take up very little space on the page (see Figure 11.5). Compared with an endless list of standard HTML links, the advantages of JavaScript-based navigation become obvious. To compensate for non-JavaScript-capable browsers, you should include a standard HTML menu somewhere on the page, but it need not be a mess if you consolidate these HTML links using subpages:
<a href=”subpage_a-g.html”>A-G</a> <a href=”subpage_h-n.html”>L-N</a> etc.