JavaScript Widgets -- Banners : Banner : Ajax Layer JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » 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 = "&nbsp;" + 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('&nbsp;<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&amp;type=5" width="210" height="62" border="0" alt="SourceForge Logo"></a>');
    document.writeln('</div>');
  } else if (is.ns4) {
    document.writeln('<layer top="20" left="400">');
    document.writeln('<a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=33495&amp;type=5" width="210" height="62" border="0" alt="SourceForge Logo"></a>');
    document.writeln('</layer>');
  }
//-->
</SCRIPT>

<DIV onmouseover=clearAll(); 
style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px">
<DIV class=pad50>
<H2>Examples/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>&lt;style&gt;</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>

           
       



-

Leave a Comment / Note


Vérification Refresh
  
Enter code
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

Navioo Ajax Layer
» Banner
Ajax Layer Ajax Layer
Data Type Data Type
Date Time Date Time
Development Development
Document Document
Event Event
Event onMethod Event onMethod
Form Control Form Control
GUI Components GUI Components
HTML HTML
Javascript CollectionsJavascript Collections
Javascript Objects Javascript Objects
Language Basics Language Basics
Node Operation Node Operation
Object Oriented Object Oriented
Page Components Page Components
Security Security
Style Layout Style Layout
Table Table
Utilities Utilities
Window Browser Window Browser