Purpose

Web sites are very non-linear and windows are really quite small. It's hard to get a lot of information on the screen without cluttering it. Scrolling or drilling down are fine for some things but it is easy to lose context. are an alternative. They are quite familiar from windows help pages. In essence, when you rollover a pop-up link a small <div> of html code pops up.

Pop-up Styles

popup
controls the appearance of the pop-ups
poplink
controls the appearance of the pop-up links

Available Functions


insertPopUp(name, htmlString, isDef, width, height)

Arguments

name
a string giving a unique name (for the current page) to the pop-up.
htmlString
a string containing the html for the pop-up. It can be a simple string or it can contain HTML markups.
isDef
a boolean which should be set to false.
Optional Arguments
width and height give the dimensions of the pop-up in pixels. If not specified, default values will be used.
Return
Nothing is returned
Action

The pop-up is written dynamically into the document at the point of invocation. It is initially hidden.

Comment

If HTML markups are included in the pop-up, authors would be advised to embed the function call within an HTML comment.


startPopUp(name)
endPopUp()

Comment

These two routines are an alternative to the insertPopUp routine. The only difference is that the startPopUp function is invoked before the pop-up HTML text and the endPopUp after it. No htmlString argument is used because the desired HTML appears directly on the page between the two calls marking the beginning and ending of the pop-up.


insertPopLink(name, link )

Arguments

name
a string giving a the name of the pop-up to be displayed when the link is rolled-over. Multiple links can reference the same pop-up.
link
a stringcontaining the text for the link itself. This is exactly how conventional links work.
Return
Nothing is returned
Action

The pop-up link is written dynamically into the document at the point of invocation. (dx,dy) can be used to move it around by trial and error, however, the effect is problematic since the page may be laid out on the user's browser differntly from the author's.


startPopLink(name )
endLink()

Comment

These two routines are an alternative to the insertPopLink routine. The only difference is that the startPopLink function is invoked before the link text and the endLink after it. No link argument is used because the link text is already on the page between the two calls marking the beginning and ending of the link.


Usage

Pop-ups can be used to provide or answers to questions or to give more information, a piece at a time, without cluttering up the screen or losing its context. The two popups for this page were created by inserting the following javaScript right after the <body> tag.


<script language="Javascript" type="text/javascript">
<!--
insertPopUp("demo1","This is the demo1 pop-up!");
insertPopUp("demo2","<h2>Hint</h2><p>You can use <strong>html</strong> in popups!</p>");
//-->
</script>

They didn't have to go right after the <body> tag but they do have to appear before any pop-up link that references them, so immediately after the <body> tag is a good, safe choice which doesn't alter the structure of the page; after all, pop-ups are invisible and will ultimately be placed in juxtaposition with their invoking link.

Any number of links may refer to the same . Here the JavaScript call insertPopLink("demo1", "pop-up"); was inserted in-line into this paragraph between the word same and the period that ended the previous sentence.

If you on a pop-up link the pop-up will freeze into place. This one give the appropriate hint as to how to clear it.

Popup style is controlled by the class .popup in the style sheets and popup links by .poplink.