JavaScript Widgets -- Examples/Notes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://jswidgets.sourceforge.net/examples/notes.shtml -->
<HTML><HEAD><TITLE>JavaScript Widgets -- Examples/Notes</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2963" name=GENERATOR><LINK title="Website Style"
href="noteBasedonJavascript_files/system.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/browser.js">
</SCRIPT>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/layers.js">
</SCRIPT>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/brmenu.js">
</SCRIPT>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/menu.js">
</SCRIPT>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/site-map.js">
</SCRIPT>
<STYLE type=text/css>P {
TEXT-ALIGN: justify
}
DIV.pad50 {
MARGIN-LEFT: 50px; MARGIN-RIGHT: 50px
}
DIV.centered {
TEXT-ALIGN: center
}
STRONG {
COLOR: blue
}
TH.list {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px
}
TD.list {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px
}
A {
FONT-WEIGHT: bold; COLOR: blue; FONT-STYLE: normal
}
A:hover {
FONT-WEIGHT: bold; COLOR: red; FONT-STYLE: normal
}
</STYLE>
<SCRIPT language=JavaScript
src="noteBasedonJavascript_files/notes.js">
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
//For almost all examples, some initialization may be necessary for maximum cross-browser
//compatibility.
function initialize() {
activateMenus();
activateFootnotes('a');
}
//-->
</SCRIPT>
</HEAD>
<BODY background=noteBasedonJavascript_files/researchbg.gif
onload=initialize();>
<SCRIPT language=JavaScript>
<!--
if (is.w3c || is.ie4 || (is.ns4 && !is.hj)) {
var barTop = 20;
var barLeft = 50;
var barWidth = 370;
var barHeight = 44;
var itemPadding = 5;
var barImage = "/images/title.png";
drawHMenuBar(barLeft,barTop,barWidth,barHeight,itemPadding,barImage);
}
if (is.w3c) {
document.writeln('<div style="position : relative; top : 15px; float : right; padding-right : 42px; text-align : right">');
document.writeln('<a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=33495&type=5" width="210" height="62" border="0" alt="SourceForge Logo"></a>');
document.writeln('</div>');
} else if (is.ns4) {
document.writeln('<layer top="20" left="400">');
document.writeln('<a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=33495&type=5" width="210" height="62" border="0" alt="SourceForge Logo"></a>');
document.writeln('</layer>');
}
//-->
</SCRIPT>
<DIV onmouseover=clearAll();
style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px">
<DIV class=pad50>
<H2>Examples/Notes</H2>
<P>The following example shows how dynamic footnotes might be included in a
document... </P>
<P>Any browser-specific comments can be found in brackets here --
<SCRIPT language=JavaScript>
<!--
if (is.op) {
document.writeln("[This example doesn't work at all with Opera.]");
} else if (is.mza || is.ns6 || is.gla) {
document.writeln("[The timeout feature doesn't work with Mozilla, Netscape 6 or Galeon. Also, the event object model here is different from the Explorer global event model.]");
} else if (is.kq) {
document.writeln("[With Konqueror, the page is redrawn when a layer pops up. This can sometimes confuse \"mouseover\" events and the note might not go away when the mouse is moved away.]");
}
//-->
</SCRIPT>
</P>
<P>In a typical paragraph with footnotes, there is a bunch of text, followed by
a note. The note is represented, as here, by a hypertext <A class=note
name=link></A>. That link should, as a matter of style, be indicated in the form
of a number, as here <A class=note name=2></A>. Footnotes can, with some
browsers, be set up with a timeout feature, as with this <A class=note
name=timed></A>link. I have set this one to time out after 4 seconds. To test
this feature properly in a variety of browsers, I have inserted notes that
appear in those browsers. </P>
<DIV class=footnote id=notelink style="WIDTH: 400px">This first footnote is
activated by moving the mouse over the "link" a-link. I have set the width of
this footnote to 400 pixels. </DIV>
<DIV class=footnote id=note2 style="WIDTH: 300px">This second example is
activated by moving the mouse over the "2" a-link. I have set the width of this
footnote to 300 pixels. </DIV>
<DIV class=footnote id=notetimed style="WIDTH: 400px" timeout="4">This third
example is actived by moving the mouse over the "timed" a-link. I have set this
one up to have a 4-second hold time. </DIV></DIV></DIV></BODY></HTML>
jswidgets-0.9-4.zip( 18 k)Related examples in the same category