JavaScript Widgets -- Examples/Notes : Banner : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Banner »

 

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
}
{
  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&amp;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&amp;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 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>


           
       

Download : Download nav_jswidgets-0.9-4.zip nav_jswidgets-0.9-4.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Banner