GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. Menu based on Javascript


    
//  written  by Tan Ling Wee
//  last updated 20 June 2003
//  email :  info@sparrowscripts.com
//      url : www.sparrowscripts.com
//////////////////////////////////////////////////////////////////////////////////
// Layers 
//////////////////////////////////////////////////////////////////////////////////
var layerQueue=new Array()
var layerIndex=-1
/* hides  and  objects (for IE only)
*/
function showElement( elmID )
{
  if( ie )
  {
  for( i = 0; i < document.getElementsByTagName( elmID ).length; i++ )
  {
    obj = document.getElementsByTagName( elmID )[i];
    
    if( !obj || !obj.offsetParent )
    {
    continue;
    }
  
    obj.style.visibility = "";
  }
  }
}
function lw_createLayer (layerName, top_pos, left_pos, width, height, bgcolor, bordercolor, z_index) {
  document.write("")
}
function lw_getObj (objName) {
  return (dom)?document.getElementById(objName).style:ie?eval("document.all."+objName) :eval("document."+objName)
}
function lw_showLayer (layerName) {
  found=false
  for (i=0;i<=layerIndex;i++)
  {
    if (layerQueue[i]==layerName)
    {
      found=true
    }
  }
  if ((lw_getObj(layerName).visibility!="visible")&&(lw_getObj(layerName).visibility!="show"))
  {
    lw_getObj(layerName).visibility = (dom||ie)?"visible":"show"
    layerQueue[++layerIndex] = layerName
    hideElement( 'SELECT', document.getElementById(layerName) );
    hideElement( 'APPLET', document.getElementById(layerName) );
  }  
}
function lw_hideLayer () {
  showElement( 'SELECT', document.getElementById(layerQueue[layerIndex]) );
  showElement( 'APPLET', document.getElementById(layerQueue[layerIndex]) );
  lw_getObj(layerQueue[layerIndex--]).visibility = "hidden"
}
function lw_hideLayerName (layerName) {
  var i
  var tmpQueue=new Array()
  var newIndex=-1
  showElement( 'SELECT', document.getElementById(layerName) );
  showElement( 'APPLET', document.getElementById(layerName) );
  lw_getObj(layerName).visibility = "hidden"
  for (i=0;i<=layerIndex;i++)
  {
    if ((layerQueue[i]!="")&&(layerQueue[i]!=layerName))
    {
      tmpQueue [++newIndex] = layerQueue[i]      
      hideElement( 'SELECT', document.getElementById(layerQueue[i]) );
      hideElement( 'APPLET', document.getElementById(layerQueue[i]) );
    }
    
  }
  layerQueue = tmpQueue
  layerIndex = newIndex
}
function lw_closeAllLayers() {
  while (layerIndex >= 0)
  {
    lw_hideLayer()
  }
}
function lw_closeLastLayer() {
  if (layerIndex >= 0)
  {
    while ((lw_getObj(layerQueue[layerIndex]).visibility!="visible") && (layerIndex>0))
    {
      layerIndex--;
    }
    lw_hideLayer()
  }
}
function lw_escLayer (e) {
  if (navigator.appName=="Netscape")
  {
    var keyCode = e.keyCode?e.keyCode:e.which?e.which:e.charCode;
    if ((keyCode==27)||(keyCode==1))
    {
      lw_closeLastLayer()
    }
  }
  else
  if ((event.keyCode==0)||(event.keyCode==27))
  {
    lw_closeLastLayer()    
  }
}
var lw_leftpos = 0
var lw_toppos = 0
var lw_width = 0
var lw_height = 0
function lw_calcpos(obj) {
  lw_leftpos=0
  lw_toppos=0
  lw_width = obj.offsetWidth
  lw_height = obj.offsetHeight
  var aTag = obj
  do {
    lw_leftpos += aTag.offsetLeft;
    lw_toppos += aTag.offsetTop;
    aTag = aTag.offsetParent;
  } while(aTag.tagName!="BODY");
}
document.onkeypress = lw_escLayer;
document.onclick = lw_closeAllLayers;
    
    
    
    
//  written  by Tan Ling Wee
//  last updated 20 June 2003
//  email :  info@sparrowscripts.com
//      url : www.sparrowscripts.com
var orientation=0  // 0-horizontal 1-vertical
var imgPath = "sparowMenu/"
var mainItemForeground = "#000000"
var mainItemBorder = "#f0f0f0"
var mainItemBackground = "#f0f0f0"
var mainItemHoverForeground = "#000000"
var mainItemHoverBorder = "#a0a0a0"
var mainItemHoverBackground = "#d0d0d0"
var subItemForeground = "#000000"
var subItemBorder = "#ffffff"
var subItemBackground = "#ffffff"
var subItemHoverForeground = "#000000"
var subItemHoverBorder = "#a0a0a0"
var subItemHoverBackground = "#d0d0d0"
var menuFont = "verdana"
var menuSize = "11px"
/////////////////////////////////////////////////////////////////////////////
var  ie=(navigator.appName=='Microsoft Internet Explorer')
var  ns=(navigator.appName=='Netscape')
var  dom=document.getElementById
var lw_menuId, lw_trigger, to1
var s1
/////////////////////////////////////////////////////////////////////////////
function Tmenu (id, parentId, url, description, img) {
  this.id = id
  this.parentId = parentId
  this.url = url
  this.description = description
  this.numChild = 0
  this.levelId = 0
  this.img = img
}
/////////////////////////////////////////////////////////////////////////////
var menu = new Array()
var menuCounter = 0
var numLevel = 0
var prevMenuId = -1
var nNowAt = 0
function displayMenuItem(menuId) {
  var sHTML
  
  if (menu[menuId].parentId>0)
  {
    ItemForeground = subItemForeground 
    Border = subItemBorder 
    Background = subItemBackground 
    HoverForeground = subItemHoverForeground 
    HoverBorder = subItemHoverBorder 
    HoverBackground = subItemHoverBackground 
  }
  else
  {
    ItemForeground = mainItemForeground 
    Border = mainItemBorder 
    Background = mainItemBackground 
    HoverForeground = mainItemHoverForeground 
    HoverBorder = mainItemHoverBorder 
    HoverBackground = mainItemHoverBackground 
  }
  if ((orientation==1)||(menu[menuId].levelId>0))
  {
    sHTML += ""
  }  
  if (menu[menuId].description!='-')
  {
    sHTML = "    if (menu[menuId].numChild!=0) {
      sHTML += "showSubmenu("+menu[menuId].id+",this);hideSubmenu(menu["+menuId+"].levelId+1);"
    }
    else
    {
      sHTML += "prevMenuId = "+menuId+";hideSubmenu(menu["+menuId+"].levelId);"
    }
    sHTML += ";nNowAt="+menuId+";clearAll("+menu[menuId].levelId+","+menu[menuId].parentId+")' onclick='document.location.href=\""+menu[menuId].url+"\"' onmouseout='s1=setInterval(\"resetMenu();hideSubmenu(0)\",1000);'>"
    if (menu[menuId].levelId>0)
    {
      sHTML += "      if (menu[menuId].img=="")
      {
        sHTML += imgPath + "trans.gif"
      }
      else
      {
        sHTML += imgPath + menu[menuId].img
      }
      sHTML += "' width=16 height=16 border=0>"
    }
    if ((orientation==0) && (menu[menuId].levelId==0))
    {
      nArrowWidth = 0
    }
    else
    {
      nArrowWidth = 25
    }
    sHTML += "" + menu[menuId].description.replace(" "," ") + ""
    if (menu[menuId].numChild>0)
    {
      if ((orientation==0)&&(menu[menuId].levelId==0))
      {
        sHTML += ""
      }
      else
      {
        sHTML += ""
      }
    }
    else
    {
      sHTML += " "
    }
    sHTML += ""
  }
  else
  {
    sHTML = ""
  }
  if ((orientation==1)||(menu[menuId].levelId>0))
  {
    sHTML += ""
  }  
  return sHTML
}
function clearAll(levelId, parentId) {
  if (levelId>0)
  {
    Border = subItemBorder 
    Background = subItemBackground 
  }
  else
  {
    Border = mainItemBorder 
    Background = mainItemBackground 
  }
  for (i=0;i  {
    if (menu[i].levelId==levelId)
    {
      if ((i!=nNowAt) && (menu[i].parentId==parentId) && (menu[i].description!="-")) {
        lw_getObj("menu_"+i).backgroundColor=Background;
        lw_getObj("menu_"+i).borderColor=Border
      }
    }
  }
}
function mapID (id) {
  for (var i=0;i  {
    if (menu[i].id==id)
    {
      return i
    }
  }
  return -1
}
function showSubmenu(menuId,trigger) {
  lw_menuId = menuId
  lw_trigger = trigger
  if (ns)
  {
    to1 = setTimeout("showActualSubmenu(lw_menuId,lw_trigger)",50)      
  }
  else
  {
    showActualSubmenu(lw_menuId,lw_trigger)
  }
}
function showActualSubmenu(menuId,trigger) {
  var nLevel = 0
  var leftpos = 0 
  var nIndex=0
  if (menuId>0)
  {
    lw_calcpos(trigger)
    for (var i=0;i    {
      if (menu[i].id==menuId)
      {  
        nLevel = menu[i].levelId
        nIndex = i
      }
    }
    if ((orientation==1)||(menu[nIndex].parentId>0))
    {
      lw_getObj("menu_level_"+nLevel).top=lw_toppos
      leftpos = lw_leftpos + lw_width + 5
      if (nLevel==0) {
        leftpos -= 3
      }
    }
    else {
      lw_getObj("menu_level_"+nLevel).top = lw_toppos + lw_height + 2
      leftpos = lw_leftpos
    }
    lw_getObj("menu_level_"+nLevel).left=leftpos
    sHTML = ""
    for (var i=0;i    {
      if (menu[i].parentId==menuId)
      {
        sHTML += displayMenuItem (i)
      }
    }
    sHTML += ""
    document.getElementById("menu_level_"+nLevel+"_content").innerHTML=sHTML
    lw_showLayer('menu_level_'+nLevel)
  } 
}
function hideSubmenu(levelId) {
  for (var cnt=levelId; cnt  {
    lw_hideLayerName("menu_level_"+cnt)
  }
}
function DrawMenu ()  {
  for (var i=0; i  {
    lw_createLayer("menu_level_"+i,0,0,0,0,"#ffffff","#d0d0d0",100)
  }
  
  sHTML=""
  for (var i=0; i  {
    if (menu[i].parentId==0)
    {    
      sHTML += displayMenuItem (i)
    }
    else if (menu[i].parentId==-1)
    {    
      sHTML += "" + menu[i].description + ""
    }
  }
  sHTML += ""
  document.writeln(sHTML)
}
function getLevel (menuId) {
  var pId=menuId
  var nLevel=0
  while (pId!=0)
  {
    nLevel++
    for (var i=0;i    {
      if (menu[i].id==pId)
      {  
        pId = menu[i].parentId
      }
    }
  }
  return nLevel
}
function AddMenuItem (id, parentId, url, description, img)  {
  menu[menuCounter++] = new Tmenu (id, parentId, url, description, img)
  if (parentId>0)
  {
    for (i=0;i    {
      if (menu[i].id==parentId)
      {
        menu[i].numChild++
      }
    }
    menu[menuCounter-1].levelId = getLevel(parentId)
    if ( numLevel < menu[menuCounter-1].levelId)
    {  
      numLevel = menu[menuCounter-1].levelId
    }
  }   
  else if (parentId==0)
  {
    menu[menuCounter-1].levelId = 0
  }
  else
  {
    menu[menuCounter-1].levelId = -1
  }
}
function handleonclick() {
  if (ns)
  {
    lw_closeAllLayers()
  }
  else
  {
    lw_closeAllLayers(event)
  }
  resetMenu()
}
function handlekeypress(e) {
  if (ns)
  {
    var keyCode = e.keyCode?e.keyCode:e.which?e.which:e.charCode;
    if ((keyCode==27)||(keyCode==1))
    {
      handleonclick()
    }
  }
  else
  if ((event.keyCode==0)||(event.keyCode==27))
  {
    handleonclick()
  }
  resetMenu()
}
function resetMenu () {
  for (i=0;i  {
    if (menu[i].levelId==0)
    {
      lw_getObj("menu_"+i).backgroundColor=mainItemBackground
      lw_getObj("menu_"+i).borderColor=mainItemBorder
    }
  }
}
document.onkeypress = handlekeypress
document.onclick = handleonclick
    
    

 


 



           
       
sparowMenu.zip( 4 k)