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>