JavaScript DHTML/Ajax Layer/Banner
Содержание
JavaScript Widgets -- Banners
<source lang="html4strict">
<!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>
<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>
<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>
<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>
<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>
<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>
</SCRIPT>
<SCRIPT language=JavaScript>
</SCRIPT>
</HEAD> <BODY background=banner_files/researchbg.gif onload=initialize();> <SCRIPT language=JavaScript>
</SCRIPT>
Examples/Banners
In this example, there is a form banner, a title banner and a status-line banner.
<SCRIPT language=JavaScript>
</SCRIPT> <FORM>
| <INPUT onclick="stopCycling("Test");" type=button value="Stop Cycling" name=stop> | <INPUT onclick="restartCycling("Test");" type=button value="Restart Cycling" name=restart> | <INPUT onclick="clearBanners("Test");" type=button value="Clear Banners" name=clear> |
Put your mouse over the <A href="javascript:void(0);">dummy link</A> to test the behavior of the status line banner.
Final note: the logic of the "clear scroll" functions includes a call to clearTimeout(). 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 setTimeout() with the appropriate "stop" or "clear" function.
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.
<FORM>
| <INPUT onclick="stopAfter2("Test");" type=button value="Stop after 2 seconds." name=StopAfter2> | <INPUT onclick="clearAfter2("Test");" type=button value="Clear after 2 seconds." name=ClearAfter2> |
</source>
JavaScript Widgets -- Examples/Notes
<source lang="html4strict">
<!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/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>
</SCRIPT>
</HEAD> <BODY background=noteBasedonJavascript_files/researchbg.gif onload=initialize();> <SCRIPT language=JavaScript>
</SCRIPT>
Examples/Notes
The following example shows how dynamic footnotes might be included in a document...
Any browser-specific comments can be found in brackets here -- <SCRIPT language=JavaScript> </SCRIPT>
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.
activated by moving the mouse over the "link" a-link. I have set the width of
this footnote to 400 pixels.activated by moving the mouse over the "2" a-link. I have set the width of this
footnote to 300 pixels.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.
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jswidgets-0.9-4.zip">jswidgets-0.9-4.zip( 18 k)</a>
