COM271, Week 10

Advanced JavaScript—Super Hypertexts

Syllabus | Table of Pages | Assignments | References and Useful Links

Inspiration

The National Science Foundation (www.nsf.gov) operates a website that all Americans can truly be proud of. To convey the rich set of activities underwritten by NSF—including grants programs and reports on accomplishments—takes a prodigious web development effort.

One of my personal interests has been in NSF's "Science and Engineering Indicators," an immense collection of facts and figures describing all aspects of the Nation's science research enterprise. When I first became aware of this statistician's goldmine, it was available (for free!) as a very heavy, thick paper report, issued every two years. It was about half narrative—pages of wonkish text, tables, and graphs—and half extensive spreadsheets providing details. As technology evolved, the tables became available as CDs, and from the web. But going back and forth between data summaries and the underlying tables was cumbersome, and the size of pages was prohibitive. On the web, this was clearly an opportunity to take advantage of hypertext.

Finding Code

Rushing ahead...

What follows is an example of seeing something in a web page, and going after the code to make it work. It may be that the codes are obscure or difficult to make work, perhaps deliberately. And certainly in the case of server-side technologies, you cannot actually see the code, short of illegal hacking of a server. But JavaScripts and style sheets must be downloaded for a browser to use them, and this means they are at least accessible.

As I perused the source code for the NSF page (above), I easily found the links to external style sheets and scripts, and it was easy to also find relevant html and JavaScript:

Rushing ahead, I clicked on the javacript and css files and copied them to the server, also copying the calling page. I adjusted directories, fired up the page, and...nothing. It wasn't going to be that easy. What was I missing? Well, clearly there were some graphics missing somewhere. So...

A More Systematic Search for Code...

Opening the first javascript file, I found where the code had come from.

The site highslide.com says,

A page of examples illustrates image galleries and an array of uses with content from HTML, AJAX, Iframe, Iframe with form, or as a display for flash or YouTube, for example, with a variety of animation effects.

Three license options are available, including a free non-commericial license, a single-site commerical license ($29), and an unlimited commercial license ($179).

Installation isn't as simple as my first attempt, but is not difficult after all:

The intent of the editor is to create a subset of the javascript plus a set of configuration settings to display content based on options that you set with the editor. This reduces the amount of code and download time. Noticeable delay in download of highslide pages is for graphics and javascipt files.

From the installation page, I chose to download a zip file of all scripts, style sheets, and a file of graphics (back arrows, frame elements, etc.). You wouldn't be able to see these with a simple file grab, which was part of the reason my first pass approached failed. I extracted the zip files into a highslide folder at the root of my text files (the root of this page's file); you can place these files where you want, but you need to then edit the files to point to the graphics directory, for example. The CSS file directories also have to be in the correct place. A little attention to the directions, and this wasn't too difficult.

It was pretty cool when the first footnote actually opened.

For Dreamweaver users, there is also a 6 page pdf outlining steps to take to get files lined up and code references straight.

How To

For this course, all lecture pages are in the folder notes, which I designate as the root folder for this exercise. From the Highslide download page, I downloaded the zipped files, then extracted them to a new folder, highslide, in my root folder (i.e., notes/highslide).

To see whether this works, I cut and paste sections from the NSF page (above), including content:

I also included part of the NSF basic style sheet (removing everything except for descendents of the div class="content-left"), placing this style sheet in the root folder
<link rel="stylesheet" href="css/style.css" type="text/css"/>

Going back to the NSF code, I cut and pasted the script tags and css links and modified them for my directories...

The content of the footnote 3 also must be included on the page, in a div (all footnotes are not displayed on the screen version because visibility is set to hidden. On the print version, they appear on the bottom of the printed page):

The structure of the text boxes is not at all apparent because it is not contained on the html page itself. It exists within the javascript page, but may be nearly impossible for beginning level javascript jockeys to identify. Fortunately, the css selectors are reasonably named and not hard to associate with what appears on the page. This made it easy for me to find the appropriate selector for the expanded box itself, allowing me to rewrite background color, font, color, etc. to conform with the style on the rest of the page:
.highslide-container div {font: 11px arial, Verdana, Helvetica;background:#224;border:1px solid #779;color:#99f; }
The highslide site also has a Javascript API Reference which defines and provides examples for javascript variables.

For the second footnote, I needed the html and I needed to provide two images, one the content of the expanded window and the other the small image icon ():
<a href="../images/fig05-01.gif" class="highslide" rel="highslide">figure <nobr>5-1</nobr></a> <img src="../images/nsf_figure.gif" width="16" height="15" alt="" title="figure"/>

It wasn't a trivial matter to look at the NSF page and to be able to repeat the same effects with my own material. If you have a little time and a bit of patience, the highslide site has all of the code, plenty of examples, an editor to practice styles and to carve out all of the javascript you'll need. With the examples, the tutorial, etc., I was able to adapt a nifty set of scripts to create a very effective way of packing lots of information onto a page, quickly retrieveable with quick clicks on footnotes. I can't wait to begin applying this to some of my heavily footnoted online lecture notes!