Tips from the Sea Grant Web network

A place for those little discoveries that can make our work so much easier. Please share yours!

• HTML Tips
  • Replacing the null javascript trigger (accessibility)
• CSS Tips
  • Getting link styles in the right order
• Other Tips
  • Importing Excel tables into HTML

HTML

The null javascript trigger - an alternative: The null javascript trigger - "javascript:;" - can be useful for opening new browser windows, activating dropdown menus, etc. But it's inaccessible to anyone whose browser can't parse javascript, or who has javascript turned off. Here's a trick from the Dreamweaver MX usergroup:

Instead of inserting "javascript:;" into the link that triggers the action, as in:

<a href="javascript:;" onClick="MM_openBrWindow('filename.html','filename','scrollbars=yes,resizable=yes,width=300,height=400')>Open a new window</a>

use the targeted filename and add ";return false" at the end of the link, thus:

<a href="filename.html" onClick="MM_openBrWindow('filename.html','filename','scrollbars=yes,resizable=yes,width=300,height=400');return false">Open a new window</a>

The behavior will work as usual for javascript-enabled browsers. For those without, the link won't open a new window (or whatever other behavior you're attempting) but it will get the userto the desired page.

If you're creating behaviors in Dreamweaver or some other WYSIWIG-style editor, you'll need to go into code view and make the necessary changes by hand.

Example: Used at http://seagrant.oregonstate.edu/sgpubs/videos/tellsomebody.html to open "Read The Transcript" link in a new window.

This should work with dropdown menus and other behaviors that use the null javascript link. Play with it and let us know.

For the long term: Learn DHTML and XHTML to create accessible, standards-compliant dynamic menus that work on all browsers and platforms. Just as soon as we have time, right ... [Pat Kight, Oregon Sea Grant]

CSS

Link styling: If your CSS link styles aren't working as expected, it may be because you have them in the wrong sequence. In order for style inheritance to work properly, the pseudoclasses must appear in the following order in your style sheet:

• Link
• Visited
• Hover
• Active

You can leave one or another of them out, but keep the order: L-V-H-A. If you're using an editor (TopStyle, Dreamweaver, etc.) to create your CSS, you may need to go into the stylesheet with a simple text editor such as Notepad and move the link styles around to get them in the right order. [Pat Kight, Oregon Sea Grant]

Other

Importing Excel Tables to HTML: Copying Excel tables and trying to paste them into HTML pages can be a real pain. Dreamweaver makes this easy: Simply save your Excel spreadsheet in a tab delimited text file format, then from the DW Document window choose: File > Import > Tabular Data. The resulting window lets you set up the resulting HTML table as you prefer. [Pat Kight, Oregon Sea Grant]