JavaScript DHTML/Ajax Layer/Banner
JavaScript Widgets -- Banners
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>JavaScript Widgets -- Examples/Banners</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2963" name=GENERATOR>
<style title="Website Style" type=text/css rel=stylesheet>
DIV.footnote {
BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 2px solid; PADDING-LEFT: 5px; Z-INDEX: 2; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 5px; OVERFLOW: hidden; BORDER-LEFT: black 2px solid; PADDING-TOP: 5px; BORDER-BOTTOM: black 2px solid; POSITION: absolute; TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: justify
}
A.note {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: blue; FONT-STYLE: normal; POSITION: relative
}
A.topic {
FONT-WEIGHT: bold; COLOR: black; TEXT-DECORATION: none
}
A.topic:hover {
COLOR: red
}
SPAN.topic {
FONT-WEIGHT: bold; COLOR: blue
}
DIV.menuBar {
BORDER-RIGHT: silver 2px outset; PADDING-RIGHT: 1px; BORDER-TOP: silver 2px outset; PADDING-LEFT: 1px; VISIBILITY: visible; PADDING-BOTTOM: 1px; BORDER-LEFT: silver 2px outset; PADDING-TOP: 1px; BORDER-BOTTOM: silver 2px outset; WHITE-SPACE: nowrap; POSITION: absolute; BACKGROUND-COLOR: blue; TEXT-ALIGN: center
}
IMG.menuBar {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 1px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
DIV.menuBody {
BORDER-RIGHT: silver 2px outset; BORDER-TOP: blue 0px solid; Z-INDEX: 1; VISIBILITY: hidden; BORDER-LEFT: silver 2px outset; BORDER-BOTTOM: silver 2px outset; POSITION: absolute; BACKGROUND-COLOR: blue
}
DIV.menuItem {
BORDER-RIGHT: silver 0px outset; PADDING-RIGHT: 0px; BORDER-TOP: blue 2px solid; PADDING-LEFT: 2px; FONT-SIZE: 10pt; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: silver 0px outset; CURSOR: pointer; COLOR: white; PADDING-TOP: 2px; BORDER-BOTTOM: silver 0px outset; FONT-FAMILY: "Times New Roman", Times, serif; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: blue; TEXT-ALIGN: left
}
</style>
<!-- browser.js -->
<SCRIPT language=JavaScript>
function Is() {
var appName = navigator.appName.toLowerCase();
var version = navigator.appVersion.toLowerCase();
var agent = navigator.userAgent.toLowerCase();
var platform = navigator.platform.toLowerCase();
this.major = parseInt(version);
this.minor = parseFloat(version);
this.nsa = (agent.indexOf("netscape") != -1);
this.mza = (agent.indexOf("mozilla") != -1);
this.gla = (agent.indexOf("galeon") != -1);
this.mza = (this.mza && !this.nsa);
if (this.mza) {
version = agent.substring(agent.indexOf("rv:")+3,agent.indexOf(")"));
this.nsa = false;
if (agent.indexOf("rv:") != -1) {
this.major = parseInt(version);
this.minor = parseFloat(version);
this.mz1 = (this.mza && (this.major == 1));
} else {
this.mza = false;
version = this.minor;
}
}
if (this.gla) {
version = agent.substring(agent.indexOf("galeon/")+7,agent.indexOf("(")-1);
this.nsa = false;
if (agent.indexOf("galeon/") != -1) {
this.major = parseInt(version);
this.minor = parseFloat(version);
this.gl1 = (this.gla && (this.major == 1));
} else {
this.gla = false;
version = this.version;
}
}
this.version = version;
this.nsn = (appName.indexOf("netscape") != -1);
this.ns2 = (this.nsn && (this.major == 2));
this.ns3 = (this.nsn && (this.major == 3));
this.ns4 = (this.nsn && (this.major == 4));
this.ns6 = (this.nsa && (this.major >= 5));
if (this.ns6) {
this.version = agent.slice(agent.indexOf("netscape6/")+10,agent.length);
}
this.ie = ((appName.indexOf("internet explorer") != -1)
&& (agent.indexOf("opera") == -1));
this.ie3 = (this.ie && (this.major == 3));
this.ie4 = (this.ie && (this.major == 4)
&& (agent.indexOf("msie 4.") != -1));
this.ie5 = (this.ie && (this.major == 4)
&& (agent.indexOf("msie 5.") != -1));
this.ie6 = (this.ie && (this.major == 4)
&& (agent.indexOf("msie 6.") != -1));
if (this.ie4 || this.ie5 || this.ie6) {
this.version = agent.slice(agent.indexOf("msie ")+5,agent.length);
this.version = this.version.slice(0,this.version.indexOf(";"));
}
this.ieX = (this.ie && !this.ie3 && !this.ie4);
this.op = (agent.indexOf("opera") != -1);
this.op4 = (this.op && (this.major == 4)
&& (agent.indexOf("opera 4.") != -1));
this.op5 = (this.op && (this.major == 4)
&& (agent.indexOf("opera 5.") != -1));
this.op6 = (this.op && (this.major == 4)
&& (agent.indexOf("opera 6.") != -1));
if (this.op) {
this.ie = false;
this.ie4 = false;
this.ie5 = false;
this.ie6 = false;
this.version = agent.slice(agent.indexOf("opera")+6,agent.length)
this.version = parseFloat(this.version);
}
this.kq = (agent.indexOf("konqueror") != -1);
if (this.kq) {
this.version = agent.substring(agent.indexOf("konqueror/")+10,agent.length);
this.version = this.version.substring(0,this.version.indexOf(";"));
this.major = parseInt(this.version);
this.minor = parseFloat(this.version);
this.mza = false;
}
this.kq2 = (this.kq && (this.major == 2));
this.kq3 = (this.kq && (this.major == 3));
this.w3c = (!(!(document.getElementById)));
this.win32 = (platform.indexOf("win32") != -1);
this.linux = (platform.indexOf("linux") != -1);
this.bsd = (platform.indexOf("bsd") != -1);
}
var is = new Is();
function setTagFontColor(tag, color) {
if (is.ie4 || is.w3c) {
tag.style.color = color;
} else if (is.ns4) {
tag.color = color;
} else {
return;
}
}
function setTagFontStyle(tag, style) {
if (is.ie4 || is.w3c) {
tag.style.fontStyle = style;
} else if (is.ns4) {
tag.fontStyle = style;
} else {
return;
}
}
function mousePosLeft(event) {
var leftPos;
if (is.ie4 || (is.w3c && !(is.ns6 || is.mza))) {
leftPos = event.clientX;
//alert("event.clientX = " + event.clientX);
} else if (is.ns4 || is.ns6 || is.mza) {
leftPos = event.pageX;
}
return leftPos;
}
function mousePosTop(event) {
var topPos;
if (is.ie4 || (is.w3c && !(is.ns6 || is.mza))) {
topPos = event.clientY;
//alert("mousePosTop is clientY = " + event.clientY);
} else if (is.ns4 || is.ns6 || is.mza) {
topPos = event.pageY;
//alert("mousePosTop is pageX = " + event.pageX);
}
return topPos;
}
</SCRIPT>
<!-- layers.js -->
<SCRIPT language=JavaScript>
function getNSLayer(inNode, inName) {
var node, i;
node = inNode[inName];
for (i = 0; !node && inNode.layers && i < inNode.layers.length; i++) {
node = getNSLayer(inNode.layers[i].document,inName);
}
return node;
}
function getLayer(inNode,inName) {
var node;
if (inNode.getElementById) {
node = inNode.getElementById(inName);
} else if (inNode.all) {
node = inNode.all[inName];
} else if (inNode.layers) {
node = getNSLayer(inNode, inName);
}
if (!node) alert("Could not find layer " + inName + ".");
return node;
}
function getStyle(inNode) {
var style;
if (is.w3c || is.ie4) {
style = inNode.style;
} else if (is.ns4) {
style = inNode;
} else {
style = 0;
}
return style;
}
function setLayerPos(inNode, left, top) {
if (is.ie4 || is.w3c) {
inNode.style.left = left + "px";
inNode.style.top = top + "px";
} else if (is.ns4) {
inNode.left = left;
inNode.top = top;
}
}
function showLayer(mNode) {
var style;
style = getStyle(mNode);
if (style) style.visibility = "visible";
}
function hideLayer(mNode) {
var style;
style = getStyle(mNode);
if (style) style.visibility = "hidden";
}
function isPositioned(mNode) {
return (mNode.left || mNode.style.left);
}
function layerWidth(mNode) {
var nWidth;
if (is.ie4 || is.w3c) {
//alert("Node width = " + mNode.style.width);
nWidth = parseInt(mNode.style.width);
} else if (is.ns4) {
nWidth = parseInt(mNode.width);
}
return nWidth;
}
function expandLayer(mNode) {
var style;
style = getStyle(mNode);
if (style) style.display = "block";
}
function contractLayer(mNode) {
var style;
style = getStyle(mNode);
if (style) style.display = "none";
}
function insertLayer(mNode) {
var style;
style = getStyle(mNode);
if (style) style.display = "inline";
}
function setLayerColor(tag,bgColor,tColor) {
var elLayer;
elLayer = getLayer(document,tag);
elStyle = getStyle(elLayer);
if (elStyle) {
if (is.ns4) {
elStyle.bgColor = bgColor;
//Netscape 4.xx browsers don"t support this!
//elStyle.fgColor = tColor;
} else {
elStyle.backgroundColor = bgColor;
elStyle.color = tColor;
}
}
}
var NSVisType = new Array();
NSVisType["visible"] = "show";
NSVisType["hidden"] = "hide";
NSVisType["inherit"] = "inherit";
function setStyle(divType, fontSize, left, top, width, height, zIndex, bgColor, visibility) {
var dStyle;
if (divType == "layer") {
dStyle = "left="" + left;
dStyle += "" top="" + top;
dStyle += "" width="" + width;
dStyle += "" height="" + height;
if (zIndex) dStyle += "" z-index="" + zIndex;
if (bgColor) {
dStyle += "" bgColor="" + bgColor;
} else {
dStyle += "" bgColor="#000000";
}
if (visibility) dStyle += "" visibility="" + NSVisType[visibility];
dStyle += "" ";
} else {
dStyle = "style="font-size : " + fontSize + "pt; ";
dStyle += "left : " + left + "px; ";
dStyle += "top : " + top + "px; ";
dStyle += "width : " + width + "px; ";
dStyle += "height : " + height + "px; ";
if (zIndex) dStyle += "z-index : " + zIndex + "; ";
if (bgColor) dStyle += "background-color : " + bgColor + "; ";
if (visibility) dStyle += "visibility : " + visibility + "; ";
dStyle += "" ";
}
//alert("dStyle = " + dStyle);
return dStyle;
}
</SCRIPT>
<!-- brmenu.js -->
<SCRIPT language=JavaScript>
function BrowserMenuInfo() {
//alert("Creating instance of BrowserLayerInfo.");
if (is.ns4) {
if (is.win32) {
this.itemHeight = 16;
} else if (is.linux) {
this.itemHeight = 15;
} else {
this.itemHeight = 15;
}
this.cellOffset = 2;
this.leftOffset = 2;
this.mTopOffset = 2;
this.wBarPadding = 4;
this.hBarPadding = 6;
this.itemPadding = 10;
this.itemSpacing = 2;
this.menuPadding = -2;
this.mBarOffset = 4;
this.bBarOffset = -2;
this.dividerHeight = 2;
this.bwPadding = 4;
this.bhPadding = 4;
this.fontSize = 12;
if (is.win32) {
this.charWidth = 7;
} else if (is.linux) {
this.charWidth = 6;
} else {
this.charWidth = 6;
}
this.divType = "layer";
//Now set foreground/background colors -- Netscape 4.xx only.
window.mtActive = "#FFFF00";
window.mtPassive = "#FFFFFF";
window.mbActive = "#FF0000";
window.mbPassive = "#081C92";
} else if (is.kq) {
this.itemHeight = 18;
this.cellOffset = 4;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 2;
this.hBarPadding = 6;
this.itemSpacing = 0;
this.itemPadding = 2;
this.menuPadding = 0;
this.mBarOffset = 4;
this.bBarOffset = 4;
this.dividerHeight = 1;
this.bwPadding = 2;
this.bhPadding = 4;
this.fontSize = 10;
this.charWidth = 7;
this.divType = "div";
} else if (is.op5 || is.op6) {
this.itemHeight = 17;
this.cellOffset = 4;
this.leftOffset = 2;
this.mTopOffset = 0;
this.wBarPadding = 2;
this.hBarPadding = 6;
this.itemPadding = 10;
this.itemSpacing = 2;
this.menuPadding = 2;
this.mBarOffset = 6;
this.bBarOffset = 4;
this.dividerHeight = 1;
this.bwPadding = 2;
this.bhPadding = 4;
this.fontSize = 10;
this.charWidth = 6;
this.divType = "div";
} else if (is.ie4) {
this.itemHeight = 18;
this.cellOffset = 0;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 4;
this.hBarPadding = 5;
this.itemPadding = 10;
this.itemSpacing = 2;
this.menuPadding = -2;
this.mBarOffset = 3;
this.bBarOffset = -3;
this.dividerHeight = 1;
this.bwPadding = 4;
this.bhPadding = 2;
this.fontSize = 10;
this.charWidth = 6;
this.divType = "div";
} else if (is.ie5) {
this.itemHeight = 20;
this.cellOffset = 0;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 4;
this.hBarPadding = 8;
this.itemPadding = 11;
this.itemSpacing = 0;
this.menuPadding = 2;
this.mBarOffset = 4;
this.bBarOffset = -2;
this.dividerHeight = 1;
this.bwPadding = 4;
this.bhPadding = 2;
this.fontSize = 10;
this.charWidth = 6;
this.divType = "div";
} else if (is.ie6) {
this.itemHeight = 18;
this.cellOffset = 4;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 0;
this.hBarPadding = 6;
this.itemPadding = 11;
this.itemSpacing = 2;
this.menuPadding = 2;
this.mBarOffset = 4;
this.bBarOffset = 4;
this.dividerHeight = 1;
this.bwPadding = 2;
this.bhPadding = 4;
this.fontSize = 10;
this.charWidth = 6;
this.divType = "div";
} else if (is.mza || is.gla || is.ns6) {
this.itemHeight = 18;
this.cellOffset = 4;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 2;
this.hBarPadding = 6;
this.itemSpacing = 0;
this.itemPadding = 2;
this.menuPadding = 0;
this.mBarOffset = 4;
this.bBarOffset = 4;
this.dividerHeight = 1;
this.bwPadding = 2;
this.bhPadding = 4;
if (is.win32) {
this.fontSize = 10;
} else if (is.linux) {
this.fontSize = 12;
} else {
this.fontSize = 10;
}
this.charWidth = 7;
this.divType = "div";
} else if (is.w3c) {
this.itemHeight = 19;
this.cellOffset = 0;
this.leftOffset = 0;
this.mTopOffset = 0;
this.wBarPadding = 0;
this.hBarPadding = 0;
this.itemSpacing = 6;
this.itemPadding = 2;
this.menuPadding = 0;
this.mBarOffset = 3;
this.bBarOffset = 5;
this.dividerHeight = 1;
this.bwPadding = 0;
this.bhPadding = 0;
this.fontSize = 10;
this.charWidth = 7;
this.divType = "div";
} else {
alert("This should never happen.");
return 0;
}
}
</SCRIPT>
<!-- menu.js -->
<SCRIPT language=JavaScript>
var blInfo = new BrowserMenuInfo();
// Create a test cell to read the style.
document.write("<" + blInfo.divType + " id="test.cell"");
document.write("" class="menuItem" ");
document.write(setStyle(blInfo.divType, blInfo.fontSize, 0, 0, 100, 20,null,null,"hidden") + ">");
document.write("test.cell");
document.writeln("</" + blInfo.divType + ">");
// Read the style during activateMenus();
function startSiteMap(mName,mTarget) {
window.menuName = mName;
window.menuTarget = mTarget;
window.menuPntr = "/images/tri.gif";
window.menuCells = new Array();
window.menuPopups = 0;
window.menuHeads = 0;
window.menuLevel = 0;
window.menuMain = 0;
window.menuLayers = new Object();
window.menuStack = new Array();
window.menuBody = new Array();
window.bodyCells = new Array();
window.mbActive = "#FF0000";
window.mtActive = "#FFFF00";
}
function menuItem(label,action,width,level,popup) {
if (label == 0) {
this.label = label;
} else {
this.label = " " + label;
}
this.action = action;
this.width = width;
this.level = level;
this.popup = popup;
}
function bodyItem(cells,popup,level,left,top,width,height) {
this.cells = cells;
this.popup = popup;
this.level = level;
this.left = left;
this.top = top;
this.width = width;
this.height = height;
}
function stackMenuBody(queue,bPopup,bLevel,bLeft,bTop,bWidth,bHeight) {
var mBody,i;
mBody = new bodyItem(window.bodyCells.length,bPopup,bLevel,bLeft,bTop,bWidth,bHeight);
window.menuBody[window.menuBody.length] = mBody;
for (i = 0; i < queue.length; i++) {
window.bodyCells[window.bodyCells.length] = queue[i];
}
window.bodyCells[window.bodyCells.length] = 0;
}
function addMenuDivider() {
var mItem,mLevel;
mLevel = window.menuLevel;
mItem = new menuItem(0,0,0,mLevel,0);
window.menuCells[window.menuCells.length] = mItem;
}
var alphaWidth = Array();
alphaWidth["a"] = blInfo.charWidth;
alphaWidth["b"] = blInfo.charWidth;
alphaWidth["c"] = blInfo.charWidth;
alphaWidth["d"] = blInfo.charWidth;
alphaWidth["e"] = blInfo.charWidth;
alphaWidth["f"] = blInfo.charWidth;
alphaWidth["g"] = blInfo.charWidth;
alphaWidth["h"] = blInfo.charWidth;
alphaWidth["i"] = Math.floor(blInfo.charWidth*0.4);
alphaWidth["j"] = Math.floor(blInfo.charWidth*0.7);
alphaWidth["k"] = blInfo.charWidth;
alphaWidth["l"] = Math.floor(blInfo.charWidth*0.4);
alphaWidth["m"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["n"] = blInfo.charWidth;
alphaWidth["o"] = blInfo.charWidth;
alphaWidth["p"] = blInfo.charWidth;
alphaWidth["q"] = blInfo.charWidth;
alphaWidth["r"] = blInfo.charWidth;
alphaWidth["s"] = blInfo.charWidth;
alphaWidth["t"] = blInfo.charWidth;
alphaWidth["u"] = blInfo.charWidth;
alphaWidth["v"] = blInfo.charWidth;
alphaWidth["w"] = Math.floor(blInfo.charWidth*1.8);
alphaWidth["x"] = blInfo.charWidth;
alphaWidth["y"] = blInfo.charWidth;
alphaWidth["z"] = blInfo.charWidth;
alphaWidth["A"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["B"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["C"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["D"] = Math.floor(blInfo.charWidth*2.0);
alphaWidth["E"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["F"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["G"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["H"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["I"] = Math.floor(blInfo.charWidth);
alphaWidth["J"] = Math.floor(blInfo.charWidth);
alphaWidth["K"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["L"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["M"] = Math.floor(blInfo.charWidth*2);
alphaWidth["N"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["O"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["P"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["Q"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["R"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["S"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["T"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["U"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["V"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["W"] = Math.floor(blInfo.charWidth*3);
alphaWidth["X"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["Y"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["Z"] = Math.floor(blInfo.charWidth*1.6);
alphaWidth["0"] = blInfo.charWidth;
alphaWidth["1"] = blInfo.charWidth;
alphaWidth["2"] = blInfo.charWidth;
alphaWidth["3"] = blInfo.charWidth;
alphaWidth["4"] = blInfo.charWidth;
alphaWidth["5"] = blInfo.charWidth;
alphaWidth["6"] = blInfo.charWidth;
alphaWidth["7"] = blInfo.charWidth;
alphaWidth["8"] = blInfo.charWidth;
alphaWidth["9"] = blInfo.charWidth;
alphaWidth["."] = blInfo.charWidth;
alphaWidth[","] = blInfo.charWidth;
alphaWidth["""] = blInfo.charWidth;
alphaWidth[" "] = blInfo.charWidth;
alphaWidth["\""] = blInfo.charWidth;
alphaWidth["/"] = blInfo.charWidth;
alphaWidth["\\"] = blInfo.charWidth;
alphaWidth["<"] = blInfo.charWidth;
alphaWidth[">"] = blInfo.charWidth;
alphaWidth["?"] = blInfo.charWidth;
alphaWidth["~"] = blInfo.charWidth;
alphaWidth["!"] = blInfo.charWidth;
alphaWidth["#"] = blInfo.charWidth;
alphaWidth["$"] = blInfo.charWidth;
alphaWidth["%"] = blInfo.charWidth;
alphaWidth["^"] = blInfo.charWidth;
alphaWidth["&"] = blInfo.charWidth;
alphaWidth["*"] = blInfo.charWidth;
alphaWidth["("] = blInfo.charWidth;
alphaWidth[")"] = blInfo.charWidth;
alphaWidth["-"] = blInfo.charWidth;
alphaWidth["_"] = blInfo.charWidth;
alphaWidth["="] = blInfo.charWidth;
alphaWidth["+"] = blInfo.charWidth;
alphaWidth["{"] = blInfo.charWidth;
alphaWidth["}"] = blInfo.charWidth;
alphaWidth["["] = blInfo.charWidth;
alphaWidth["]"] = blInfo.charWidth;
alphaWidth["|"] = blInfo.charWidth;
alphaWidth[";"] = blInfo.charWidth;
alphaWidth[":"] = blInfo.charWidth;
function estLabelWidth(label) {
var lWidth = 0, i;
for (i=0; i < label.length; i++) {
lWidth += alphaWidth[label.charAt(i)];
}
lWidth += 5;
//alert("Width of " + label + " = " + lWidth + ". label.charAt(0) = " + label.charAt(0) + ".");
return lWidth;
}
function addMenuItem(label,action,popup) {
var mLabel,mAction,mPopup,mItem,mWidth,mLevel;
mLevel = window.menuLevel;
mWidth = estLabelWidth(label)+4;
if (label) {
mLabel = label;
} else {
alert("No label given for action " + action + ".");
mLabel = "no label";
}
if (action) {
mAction = "location="" + action + """;
} else {
mAction = "clearMenus(" + mLevel + ")";
}
mPopup = popup;
if (mPopup && (mLevel > 0)) mWidth += 15; // Add margin for window.menuPntr.
if (mLevel == 0) window.menuHeads++;
mItem = new menuItem(mLabel,mAction,mWidth,mLevel,mPopup);
window.menuCells[window.menuCells.length] = mItem;
}
function startMenu(label,action) {
addMenuItem(label,action,"popup" + window.menuPopups++);
window.menuLevel++;
}
function endMenu() {
window.menuLevel--;
}
function menuLayer(label,action) {
this.name = name;
this.label = label;
this.action = action;
}
function buildMenuCell(index,left,top,width,height) {
var mName,mLabel,mLeft,mTop,mWidth,mHeight,mAction,mLevel;
mName = "cell" + index;
mClass = "menuItem";
mLevel = window.menuCells[index].level;
mLeft = left;
mTop = top;
mWidth = width;
mHeight = height;
mLabel = window.menuCells[index].label;
mAction = window.menuCells[index].action;
document.write("<" + blInfo.divType + " id="" + mName);
document.write("" class="" + mClass + "" ");
document.write(setStyle(blInfo.divType, blInfo.fontSize, mLeft, mTop, mWidth, mHeight, 0, window.mbPassive, "inherit"));
document.write(" onclick="" + mAction + "" ");
mPopup = window.menuCells[index].popup;
if (mPopup) {
document.write("onmouseover="popMenu(" + mLevel + ","" + mName + "","" + mPopup + """ + ");" ");
document.write("onmouseout="setColorPassive(" + """ + mName + """ + ");">");
} else {
document.write("onmouseover="unPopMenus(" + mLevel + ","" + mName + """ + ");" ");
document.write("onmouseout="setColorPassive(" + """ + mName + """ + ");">");
}
window.menuLayers[mName] = new menuLayer(mLabel,mAction);
if (blInfo.divType == "layer") {
document.write(mLabel.fontcolor(mtPassive));
} else {
document.write(mLabel);
}
if (mPopup && (mLevel >= 1)) {
document.write(" <img src="" + window.menuPntr + "" border="0">");
}
document.writeln("</" + blInfo.divType + ">");
}
function buildMenuBody(cQueue,bName,bLevel,bLeft,bTop,bWidth,bHeight) {
var i,bClass,geometry,zIndex,level,bLayer;
var lWidth,lHeight,mLeft,mTop;
bClass = "menuBody";
lWidth = bWidth + blInfo.bwPadding;
lHeight = bHeight + blInfo.bhPadding;
document.write("<" + blInfo.divType + " id="" + bName + "" class="" + bClass + "" ");
document.write(setStyle(blInfo.divType, blInfo.fontSize, bLeft, bTop, lWidth, lHeight, bLevel+1, "#000000", "hidden"));
document.writeln(">");
mLeft = blInfo.leftOffset;
mTop = blInfo.mTopOffset;
for (i = 0; i < cQueue.length; i++) {
mLabel = window.menuCells[cQueue[i]].label;
if (mLabel) {
buildMenuCell(cQueue[i],mLeft,mTop,bWidth,blInfo.itemHeight);
mTop += blInfo.itemHeight + blInfo.cellOffset;
} else if (mLabel == 0) {
mTop += blInfo.dividerHeight;
} else {
alert("Expecting label in buildMenuBody."); // This should never happen!
return 0;
}
}
document.writeln("</" + blInfo.divType + ">");
}
function buildMenuBodies() {
var i,cQueue,bName,bLevel,bLeft,bTop,bWidth,bHeight,bCells;
for (i = 0; i < window.menuBody.length; i++) {
bCells = window.menuBody[i].cells;
bName = window.menuBody[i].popup;
bLevel = window.menuBody[i].level;
bLeft = window.menuBody[i].left;
bTop = window.menuBody[i].top;
bWidth = window.menuBody[i].width;
bHeight = window.menuBody[i].height;
cQueue = new Array();
cCount = 0;
while ((bCells < window.bodyCells.length) && (window.bodyCells[bCells] > 0))
{
cQueue[cCount++] = window.bodyCells[bCells++];
}
buildMenuBody(cQueue,bName,bLevel,bLeft,bTop,bWidth,bHeight);
cQueue = null;
}
}
function queueMenuBuilds(mIndex,mLevel,mPopup,mLeft,mTop) {
var queue = new Array();
var i,sPopup,sLeft,sTop,sWidth,sHeight;
sTop = mTop;
sWidth = 0;
sHeight = 0;
i = mIndex;
while ((i < window.menuCells.length) && (window.menuCells[i].level >= mLevel)) {
if (window.menuCells[i].level == mLevel) {
sWidth = Math.max(sWidth,window.menuCells[i].width);
}
i++
}
sLeft = mLeft + sWidth + 2;
i = mIndex;
while ((i < window.menuCells.length) && (window.menuCells[i].level >= mLevel)) {
queue[queue.length] = i;
if (window.menuCells[i].popup) {
sPopup = window.menuCells[i].popup;
i++;
i = queueMenuBuilds(i,mLevel+1,sPopup,sLeft,sTop);
sTop += blInfo.itemHeight + blInfo.cellOffset;
sHeight += blInfo.itemHeight + blInfo.cellOffset;
} else if (window.menuCells[i].label) {
i++;
sTop += blInfo.itemHeight + blInfo.cellOffset;
sHeight += blInfo.itemHeight + blInfo.cellOffset;
} else { // This must be a menu divider.
i++;
sTop += blInfo.dividerHeight;
sHeight += blInfo.dividerHeight;
}
}
if (queue.length > 0) stackMenuBody(queue,mPopup,mLevel,mLeft,mTop,sWidth,sHeight-blInfo.cellOffset);
queue = null;
return i;
}
function endSiteMap() {
}
function drawHMenuBar(left, top, width, height, padding, graphic) {
var bLeft,bTop,bWidth,bHeight,iPadding,bGraphic;
var i,geometry,zIndex,iWidth,iLeft,mTop;
bLeft = left;
bTop = top;
bWidth = width + blInfo.wBarPadding;
bHeight = height + blInfo.itemHeight + blInfo.hBarPadding;
iPadding = padding + blInfo.itemPadding;
bGraphic = graphic;
document.write("<" + blInfo.divType + " id="menuBar" class="menuBar" ");
document.write(setStyle(blInfo.divType, blInfo.fontSize, bLeft, bTop, bWidth, bHeight, 0, null, "visible"));
document.writeln(">");
document.writeln("<img name="menuImage" src="" + bGraphic + "" class="menuBar" border="1" width="" + width + "" height="" + height + "">");
iLeft = blInfo.leftOffset;
mTop = height + blInfo.mBarOffset;
bTop += blInfo.bBarOffset;
i = 0;
while (i < window.menuCells.length) {
iWidth = window.menuCells[i].width + iPadding;
iWidth = Math.min(iWidth, bWidth-iLeft+blInfo.menuPadding);
buildMenuCell(i,iLeft,mTop,iWidth,blInfo.itemHeight);
if (window.menuCells[i].popup) {
mPopup = window.menuCells[i].popup;
i++;
i = queueMenuBuilds(i,1,mPopup,bLeft,bTop+bHeight);
}
bLeft += iWidth + blInfo.itemSpacing;
iLeft += iWidth + blInfo.itemSpacing;
}
document.writeln("</" + blInfo.divType + ">");
buildMenuBodies();
document.close();
}
function drawVMenuBar(left, top, width, height, padding, graphic) {
var bLeft,bTop,bWidth,bHeight,mHeight,iPadding,bGraphic;
var i,geometry,zIndex,iWidth,iLeft,mTop,nTopItems;
bLeft = left;
bTop = top;
bWidth = width + blInfo.wBarPadding;
bHeight = height;// + blInfo.itemHeight + blInfo.hBarPadding;
nTopItems = 0;
i = 0;
while (i < window.menuCells.length) {
if (window.menuCells[i].level == 0) {
nTopItems++;
}
i++;
}
mHeight = nTopItems*(blInfo.itemHeight + blInfo.cellOffset);
i = 0;
iPadding = padding + blInfo.itemPadding;
bGraphic = graphic;
document.write("<" + blInfo.divType + " id="menuBar" class="menuBar" ");
document.write(setStyle(blInfo.divType, blInfo.fontSize, bLeft, bTop, bWidth, bHeight+mHeight, 0, null, "visible"));
document.writeln(">");
document.writeln("<img name="menuImage" src="" + bGraphic + ""class="menuBar" border="1" width="" + width + "" height="" + height + "">");
iLeft = blInfo.leftOffset;
mTop = height + blInfo.mBarOffset;
bTop += blInfo.bBarOffset;
while (i < window.menuCells.length) {
iWidth = window.menuCells[i].width + iPadding;
iWidth = Math.min(iWidth, bWidth-iLeft+blInfo.menuPadding);
buildMenuCell(i,iLeft,mTop,iWidth,blInfo.itemHeight);
if (window.menuCells[i].popup) {
mPopup = window.menuCells[i].popup;
i++;
i = queueMenuBuilds(i,1,mPopup,bLeft+iWidth,bTop+bHeight);
}
mTop += blInfo.itemHeight + blInfo.cellOffset;
bTop += blInfo.itemHeight + blInfo.cellOffset;
}
document.writeln("</" + blInfo.divType + ">");
buildMenuBodies();
document.close();
}
function loadMe() {
eval(this.action);
}
function activateMenus() {
var mName,mAction,mNode,tStyle;
tStyle = getStyle(getLayer(document, "test.cell"));
if (!is.ns4) {
//Netscape 4.xx doesn"t support this.
window.mtPassive = tStyle.color;
window.mbPassive = tStyle.backgroundColor;
return; // Nothing further to do for non Netscape 4.xx browsers.
}
for (mName in window.menuLayers) {
mAction = window.menuLayers[mName].action;
mNode = getLayer(document,mName);
mNode.captureEvents(Event.MOUSEDOWN);
mNode.onmousedown = loadMe;
mNode.action = mAction;
mNode.fgColor = window.mtPassive;
}
}
var nameStack = new Array();
var nodeStack = new Array();
var stackDepth = 0;
function findNode(elMain,mName) {
var elNode,elIndex;
elNode = getLayer(elMain,mName);
elIndex = 0;
while ((!elNode) && (elIndex < stackDepth)) {
elNode = getLayer(nodeStack[elIndex],mName);
elIndex++;
}
return elNode;
}
function clearMenus(mNum) {
while (stackDepth > mNum) {
stackDepth--;
hideLayer(nodeStack[stackDepth]);
nameStack[stackDepth] = 0;
nodeStack[stackDepth] = 0;
}
}
function unPopMenus(mNum,tag) {
setLayerColor(tag,window.mbActive,window.mtActive);
clearMenus(mNum);
if (is.ns4) document.releaseEvents(Event.MOUSEDOWN);
}
function setColorPassive(tag) {
setLayerColor(tag,window.mbPassive,window.mtPassive);
if (is.ns4) document.captureEvents(Event.MOUSEDOWN);
}
function popMenu(mNum,tag,mName) {
var style,elLayer;
clearMenus(mNum);
setLayerColor(tag,window.mbActive,window.mtActive);
elLayer = getLayer(document,mName);
if (elLayer) {
showLayer(elLayer);
nameStack[stackDepth] = mName;
nodeStack[stackDepth] = elLayer;
stackDepth++
}
if (is.ns4) document.releaseEvents(Event.MOUSEDOWN);
}
function clearAll(e) {
clearMenus(0);
}
if (is.ns4) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clearAll;
}
</SCRIPT>
<!-- site-map.js -->
<SCRIPT language=JavaScript>
</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
}
A {
FONT-WEIGHT: bold; COLOR: blue; FONT-STYLE: normal
}
A:hover {
FONT-WEIGHT: bold; COLOR: red; FONT-STYLE: normal
}
INPUT.formBanner {
BORDER-RIGHT: blue 4px outset; PADDING-RIGHT: 5px; BORDER-TOP: blue 4px outset; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: blue 4px outset; PADDING-TOP: 5px; BORDER-BOTTOM: blue 4px outset
}
</STYLE>
<SCRIPT language=JavaScript src="banner_files/banner.js">
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
function stopCycling() {
if (is.w3c) stopTitleBanner();
stopStatusBanner();
if (is.w3c) stopFormBanner("Test");
}
function restartCycling(name) {
if (is.w3c) restartTitleBanner();
restartStatusBanner();
if (is.w3c) restartFormBanner("Test");
}
function clearBanners(name) {
if (is.w3c) clearTitleBanner();
clearStatusBanner();
if (is.w3c) clearFormBanner("Test");
}
function stopAfter2(name) {
setTimeout("stopCycling("" + name + "");", 2000);
}
function clearAfter2(name) {
setTimeout("clearBanners("" + name + "");", 2000);
}
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
//For almost all examples, some initialization may be necessary
//for maximum cross-browser compatibility.
function initialize() {
activateMenus();
}
//-->
</SCRIPT>
</HEAD>
<BODY background=banner_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/Banners</H2>
<P>In this example, there is a form banner, a title banner and a status-line
banner. </P>
<DIV align=center>
<SCRIPT language=JavaScript>
<!--
if (is.w3c) setupFormBanner("Test", "This is a form message.", 40, true);
if (is.w3c) setupTitleBanner("This is a title message.", true);
setupStatusBanner("This is a status message.", true);
if (is.w3c) {
document.writeln("<p>Notice that the form banner above is displayed in outset border style. You can specify the style yourself by defining <b>input.formBanner</b> in the <b><style></b> section of your page.</p>");
}
if (is.kq) {
document.writeln("<p>Note: the scrolling title example does not work at all with Konqueror, and the scrolling status example works only partially.</p>");
} else if (is.mza || is.op) {
document.writeln("<p>Note: the scrolling status example works most logically in Mozilla and Opera.");
if (is.op) {
document.writeln("Unfortunately, Opera doesn"t support full control of the form banner style. (But it almost works!)</p>");
} else if (is.mza) {
document.writeln("Mozilla supports both the default status logic and form banner style control.");
}
} else if (is.ie) {
document.writeln("<p>Note: the scrolling status example works only partially in Internet Explorer. Form banner style control also works here.</p>");
} else if (is.ns4) {
document.writeln("<p>Note: only the scrolling status message works in Netscape 4.xx. Even that works only partially, as you can see by moving your mouse over the dummy link while the status message is scrolling.</p>");
}
//-->
</SCRIPT>
<FORM>
<TABLE align=center>
<TBODY>
<TR>
<TD><INPUT onclick="stopCycling("Test");" type=button value="Stop Cycling" name=stop></TD>
<TD><INPUT onclick="restartCycling("Test");" type=button value="Restart Cycling" name=restart></TD>
<TD><INPUT onclick="clearBanners("Test");" type=button value="Clear Banners" name=clear></TD></TR></TBODY></TABLE></FORM>
<P>Put your mouse over the <A href="javascript:void(0);">dummy link</A> to test
the behavior of the status line banner.</P>
<P>Final note: the logic of the "clear scroll" functions includes a call to
<B>clearTimeout()</B>. This ensures that race conditions are avoided when
cycling is turned off. It is therefore easily possible to implement a scroll
timeout via a call to <B>setTimeout()</B> with the appropriate "stop" or "clear"
function.</P>
<P>Check this out here. Clicking on "Stop after 2 seconds." will cause cycling
to stop after 2 seconds. Clicking on "Clear after 2 seconds." will cause cycling
to stop the message and to clear it after 2 seconds.</P>
<FORM>
<TABLE align=center>
<TBODY>
<TR>
<TD><INPUT onclick="stopAfter2("Test");" type=button value="Stop after 2 seconds." name=StopAfter2></TD>
<TD><INPUT onclick="clearAfter2("Test");" type=button value="Clear after 2 seconds." name=ClearAfter2></TD></TR></TBODY></TABLE></FORM></DIV></DIV></DIV></BODY></HTML>
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jswidgets-0.9-4.zip">jswidgets-0.9-4.zip( 18 k)</a>
