COM271, Week 10

Hypertext

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

Title Attribute: For short definitions we can use a link with the title attribute to provide additional information. Hover here to see.

...<a title="...and this message will appear...">Hover here</a> to see.

Hidden Text: JavaScript gives us the capability of embedding hidden text such as footnotes, with the ability to display the text by hovering. In the paragraph that follows, there is a highlighted footnote indicator. Hover and a footnote appears near the position of the mouse. Try it!

(The magenta footnote [2] is a significant elaboration on this. Click to try it, too! See "Advanced JavaScript—Super Hypertexts" for a breakdown.)

Political Participation

...We are reminded each election year that fewer voters show up at the polls in America than in most other democracies: our turnout rate ranks us just above the cellar—narrowly besting Switzerland, but below all twenty-two other established democracies [1] [2]. Nevertheless, Americans are fairly active politically outside the ballot booth. However, our interest here is not "How are we doing compared with other countries?" but "How are we doing today compared with our own past?" The answer to that question is less encouraging.

Robert Putnam, Bowling Alone, Simon & Schuster, 2000. p. 31

HTML:

<body onload="init();">

...
...democracies <sup class="yellow" onmouseover="footnote(event,'foot1','visible');" onmouseout="footnote(event,'foot1','hidden');">[1]</sup>. Nevertheless....

<div id="foot1" class="hidetext"<<p>In the mid-1970s...etc...</p></div>

Note that footnotes can be placed anywhere on the page (here, they are at the end of the document). A separate print style sheet would then render all footnotes in a series, generally at the end of the document with a diminutive font size.

Script

Comment
<script type="text/javascript">
var noteWidth = 400;
var availwidth = "";

function init(){
availwidth = getAvailableWidth();
if(availwidth < 600)window.resizeTo(700,500);
}
  • create and initialize global noteWidth and availwidth
  • noteWidth is width of the footnote
  • availwidth is window size minus width of the footnote
  • window.resizeTo(x,y) method resizes a window to x width and y height.
function footnote(evt,elemID,vis){
init();
if (window.event){ evt = window.event; }
if (evt){
if (vis=="visible"){
var x = evt.clientX+25;
if (x > availwidth-noteWidth) { x=availwidth-noteWidth-30; }
var y = evt.clientY + 15; var z = 4;
}else{
var x = evt.clientX+25; var y = 0; var z = 0;
}
var elem = document.getElementById(obj);
shiftTo(elem,x,y,z);
elem.style.visibility = "hidden";
if (vis=='visible')elem.style.visibility = "visible";
}
}
  • Checking event versus window.event (see "mouse position")
  • clientX is x position of cursor (=CSS "left" value)
  • clientY is y position of cursor (=CSS "top" value)
  • adjusting x and y to make sure footnote box fits in available window, sitting to the right and below the cursor position
  • calling shiftTo to change offset values of the element
  • making the box visible or hidden, according to vis
function shiftTo(elem,x,y,z){
elem.style.left = x + "px";
elem.style.top = y + "px";
elem.style.zIndex = z;
}
  • resetting CSS offsets top, left, and z-index
function getAvailableWidth(){
var theWidth=null;
if (window.innerWidth) {
theWidth = window.innerWidth;
}
if (document.body.clientWidth) {
theWidth = document.body.clientWidth;
}
return theWidth;
}
  • Netscape uses window.innerWidth
  • IE uses document.body.clientWidth

In the mid-1970s Americans were about twice as likely to take an active role in political campaigns as were citizens in Britain, German, Austria, and the Netherlands; Samuel H. Barnes, Max Kasse, et al., Political Action: Mass Participation in Five Western Democracies (Beverly Hills, Calif.: Sage, 1979), 541-542. Nearly twenty years later Americans tied for third place among forty democracies (old and new) in the frequency with which we sign petitions, though Americans ranked twentieth out of forty in the frequency with which we discuss politics with our friends; Russell Dalton, Citizen Politics: Public Opinion and Political Parties in Adevanced Western Democracies, 2nd ed., (Chatham, N.J.: Chatham House, 1996), 74. On turnout, see Dalton, Citizen Politics, 45.

In the mid-1970s Americans were about twice as likely to take an active role in political campaigns as were citizens in Britain, German, Austria, and the Netherlands; Samuel H. Barnes, Max Kasse, et al., Political Action: Mass Participation in Five Western Democracies (Beverly Hills, Calif.: Sage, 1979), 541-542. Nearly twenty years later Americans tied for third place among forty democracies (old and new) in the frequency with which we sign petitions, though Americans ranked twentieth out of forty in the frequency with which we discuss politics with our friends; Russell Dalton, Citizen Politics: Public Opinion and Political Parties in Adevanced Western Democracies, 2nd ed., (Chatham, N.J.: Chatham House, 1996), 74. On turnout, see Dalton, Citizen Politics, 45.

JS & DOM Reference

Overview

JavaScript Objects

JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Global

Browser Objects

Window Navigator Screen History Location

HTML DOM Objects

Document Events Elements Anchor Area Base Body Button Form Frame/IFrame Frameset Image Input Button Input Checkbox Input File Input Hidden Input Password Input Radio Input Reset Input Submit Input Text Link Meta Object Option Select Style Table TableCell TableRow Textarea