/*
*******************************************************************
** Menulibrary for Dynamic pulldown menu's **
*******************************************************************
** Bart Kapitein (bk@suppanet.com) **
** 5/13/2003 **
** version 1.0 MOD 4 WOONCOM **
*******************************************************************
** U S A G E :
**
** Include library with this tags:
**
**
** Make a function which runs on window.onload ()
**
** In this function you can set this defaults:
**
** defaultMenuWidth = xx //width of a menu. default is 150
** defaultMenuItemHeight = xx //height of one menuitem. default is 15 (this default is used for positioning the submenus)
** defaultTimeOut = xx //time (ms) to wait before a menu hides after a mouseout event. default is 50ms (increase this number if a submenu hides to early when you want to point your mouse over it)
**
** In this function you can use this commands:
**
** addMenu(menuID, null, label, directionX, directionY); //will add an extra menu
** addMenuItem(menuID, label, url, target); //will add a menuitem to the given menu
** addSubMenu(submenuID, parentmenuID, label, direction); //will add a submenu to the given menu, a negative direction causes the menu to expand to the left a positive direction causes the menu to expand to the right
**
** To show the menu's you can create a hyperlink for each menu with
** text or image
**
**
**
**
**
**
********************** A C T U A L C O D E B E L O W ********************************************
**
**
**
**
**
*/
//*******************************************************************//
//******************MULTI DOM DHTML OBJECT GETTER*******************//
//*******************************************************************//
//* -works for MSIE4.0+ (WIN + MAC) *//
//* -works for Mozilla *//
//* -works for Mozilla based browser *//
//* -works for other DOM Level 1 compatible browsers *//
//*--------------------------------------------------------------------------------------------*//
//* Bart Kapitein (bk@suppanet.com) *//
//* 05/13/2003 *//
//* v1.5 *//
//*******************************************************************//
function getObj(id) {
if(document.getElementById) {
return document.getElementById(id);
}
else if(document.all) {
return document.all[id];
}
//ns4 support removed
}
//*******************************************************************//
//*********************DYNAMIC MENU HTML BUILD FUNCTIONS************//
//*******************************************************************//
//* builds and generates menu dhtml *//
//*--------------------------------------------------------------------------------------------*//
//* Bart Kapitein (bk@suppanet.com) *//
//* 05/13/2003 *//
//* v1.0 *//
//*******************************************************************//
menus = new Array(); //array with menus
menuitems = new Array(); //array with menuitems
defaultMenuWidth = 150; //obsolete, calculating dynamic
defaultMenuItemHeight = 15; //obsolete, calculating dynamic
defaultTimeOut = 50;
menudebug = false;
function MenuObject(id, parent, directionX, directionY) {
this.id = id;
//this.x = posX;
//this.y = posY;
this.parent = parent;
this.timer = null;
this.directionX = directionX;
this.directionY = directionY;
}
function getMenu(id) {
for(k = 0; k < menus.length; k++)
if(menus[k].id == id) return menus[k];
return null;
}
function getMenuByParent(parent) {
children = new Array();
for(k = 0; k < menus.length; k++)
if(menus[k].parent == parent) children[children.length] = menus[k];
return children;
}
//---function to add a menu to the current html page MOD 4 Wooncom
function addMenu(id, parent, label, directionX, directionY, link, target, current) {
//add menuID to array
menus[menus.length] = new MenuObject(id, parent, directionX, directionY);
//we hebben een root menu, deze willen we ook in de blauwe wooncom balk zien
if( parent == null )
{
if( current == true )
{
addCurrentWooncomItem( label, link, target, "show('" + id + "', this);", "hide('" + id + "', true);" );
}
else
{
addWooncomItem( label, link, target, "show('" + id + "', this);", "hide('" + id + "', true);" );
}
}
//add new array to menuitems
menuitems[id] = new Array();
//maak een nieuwe div layer en zet attributen
laaier = document.createElement( "div" );
laaier.id = "menu" + id;
laaier.refID = id;
//laaier.style.width = defaultMenuWidth + "px";
laaier.style.visibility = "hidden";
laaier.style.position = "absolute";
laaier.style.left = "0px";
laaier.style.top = "0px";
laaier.style.zIndex = "10";
laaier.onmouseover = function( ) { show( this.refID ); }
laaier.onmouseout = function( ) { hide( this.refID, true ); }
//plaats een tabel in de layer
laaier.innerHTML = "";
//laaier.innerHTML = "";
//plaats de layer in het document
document.body.appendChild( laaier );
}
//---function to add a menuitem to a menu MOD 4 Wooncom
function addMenuItem(menuID, label, link, target) {
if(menuitems[menuID] == null) {
if(menudebug) alert("addMenuItem: menu not found (" + menuID + ").");
return false;
}
//nieuwe tablerow maken
tablerow = document.createElement( "tr" );
//de tabel waar de row aan toegevoegd moet worden
tableBody = document.getElementById( "menu" + menuID ).firstChild.firstChild;
//lastrow bepalen
tablerows = tableBody.getElementsByTagName( "tr" );
lastrow = tablerows[ tablerows.length - 1 ];
//td's maken
td = document.createElement( "td" );
td.style.width = "21px";
td.style.backgroundColor = "#DEDFFF";
td.innerHTML = "![\"stip\"](\"/images/pulldown_stip.gif\")
";
td.className = "pulldown";
tablerow.appendChild( td );
td = document.createElement( "td" );
td.style.backgroundImage = "url(/images/pulldown_back.gif)";
td.align = "left";
td.valign = "middle";
td.innerHTML = label;
td.className = "pulldown";
tablerow.appendChild( td );
//td's maken
td = document.createElement( "td" );
td.style.width = "10px";
td.style.backgroundImage = "url(/images/pulldown_r.gif)";
td.innerHTML = "![\"right\"](\"/images/spacer.gif\")
";
td.className = "pulldown";
tablerow.appendChild( td );
tablerow.openLink = link;
tablerow.openTarget = ( target == null ) ? "_self" : target;
tablerow.onclick = ( link != null ) ? function( ) {window.open( this.openLink, this.openTarget ); } : null;
tablerow.onmouseover = function( ) {
elements = this.getElementsByTagName( "td" );
for( i = 0; i < elements.length; i++ )
elements[i].className = "pulldown_hover";
};
tablerow.onmouseout = function( ) {
elements = this.getElementsByTagName( "td" );
for( i = 0; i < elements.length; i++ )
elements[i].className = "pulldown";
};
//tablerow vullen
tableBody.insertBefore( tablerow, lastrow );
}
//---function to add a submenu to a menu MOD 4 Wooncom
function addSubMenu(menuID, parentMenuID, label, directionX, directionY) {
if(menuitems[parentMenuID] == null) {
if(menudebug) alert("addSubMenuItem: Parent menu not found (" + menuID + ").");
return false;
}
//get parent menu object
parentMenu = getMenu(parentMenuID);
//
if(directionX == 0)
directionX = parentMenu.directionX;
if(directionY == 0)
directionY = parentMenu.directionY;
//add Menu
addMenu(menuID, parentMenuID, label, directionX, directionY);
//nieuwe tablerow maken
tablerow = document.createElement( "tr" );
//de tabel waar de row aan toegevoegd moet worden
tableBody = document.getElementById( "menu" + parentMenuID ).firstChild.firstChild;
//lastrow bepalen
tablerows = tableBody.getElementsByTagName( "tr" );
lastrow = tablerows[ tablerows.length - 1 ];
//td's maken
td = document.createElement( "td" );
td.style.width = "21px";
td.style.backgroundColor = "#DEDFFF";
td.innerHTML = "";
tablerow.appendChild( td );
td = document.createElement( "td" );
td.style.backgroundImage = "url(/images/pulldown_back.gif)";
td.align = "left";
td.valign = "middle";
td.innerHTML = "" + label + "";
tablerow.appendChild( td );
tablerow.menuID = menuID;
tablerow.onmouseover = function( ) { show( this.menuID, this ); }
tablerow.onmouseout = function( ) { hide( this.menuID, false ); }
tableBody.insertBefore( tablerow, lastrow );
//omdat het een submenu is, willen we een ronde bovenkant
tablerow = document.createElement( "tr" );
tableBody = document.getElementById( "menu" + menuID ).firstChild.firstChild;
//lastrow bepalen
tablerows = tableBody.getElementsByTagName( "tr" );
lastrow = tablerows[ tablerows.length - 1 ];
//td's maken
td = document.createElement( "td" );
td.style.width = "21px";
td.style.height = "10px";
td.align = "left";
td.valign = "top";
td.innerHTML = "![\"stip\"](\"/images/pulldown_lb.gif\")
";
tablerow.appendChild( td );
//td's maken
td = document.createElement( "td" );
td.style.height = "10px";
td.align = "left";
td.valign = "top";
td.style.backgroundImage = "url(/images.pulldown_b.gif)";
td.innerHTML = "";
tablerow.appendChild( td );
//td's maken
td = document.createElement( "td" );
td.style.height = "10px";
td.style.width = "10px";
td.align = "left";
td.valign = "top";
td.innerHTML = "![](\"/images/pulldown_rb.gif\")
";
tablerow.appendChild( td );
tableBody.insertBefore( tablerow, lastrow );
}
//function to add a blue wooncom submenu item
function addWooncomItem( label, link, target, onmouseover, onmouseout )
{
//als link is gevuld, dan href
//als link null is, dan onclick doen
if( link != null )
{
if( target == null ) target = "_self";
link = "window.open( '" + link + "', '" + target + "' )";
}
mainTD = document.createElement( "td" );
mainTD.style.backgroundColor = "#161D7C";
mainTD.style.height = "21px";
mainTD.innerHTML = "";
//lastrow bepalen
tablerow = document.getElementById("submenuLyr").getElementsByTagName( "td" );
lastTD = tablerow[ tablerow.length - 1 ];
document.getElementById( "submenuLyr" ).insertBefore( mainTD, lastTD );
}
//function to add a blue wooncom submenu item which is the current item
function addCurrentWooncomItem( label, link, target, onmouseover, onmouseout )
{
//als link is gevuld, dan href
//als link null is, dan onclick doen
if( link != null )
{
if( target == null ) target = "_self";
link = "window.open( '" + link + "', '" + target + "' )";
}
mainTD = document.createElement( "td" );
mainTD.style.backgroundColor = "#161D7C";
mainTD.style.height = "21px";
mainTD.innerHTML = "";
//lastrow bepalen
tablerow = document.getElementById("submenuLyr").getElementsByTagName( "td" );
lastTD = tablerow[ tablerow.length - 1 ];
document.getElementById( "submenuLyr" ).insertBefore( mainTD, lastTD );
}
//*******************************************************************//
//*********************DYNAMIC MENU ANIMATE FUNCTIONS**************//
//*******************************************************************//
//* animates the menus *//
//*--------------------------------------------------------------------------------------------*//
//* Bart Kapitein (bk@suppanet.com) *//
//* 05/13/2003 *//
//* v2.0 *//
//*******************************************************************//
//functie om een menu te tonen, als object opgegeven wordt, wordt het menu tegen dat object aan geplaatst. (boven, onder, links of rechts ervan)
function show(id, obj) {
//get menuobject
menuObj = getMenu(id);
if( !menuObj || menuObj == null )
return;
//cleartimeout of this menu (in case it would hide)
clearTimeout(menuObj.timer);
//menulaaier
laaier = getObj( "menu" + id );
//bepaal positie als object is opgegeven
if( obj )
{
posX = findPosX( obj );
//als items breder zijn dan het submenu, dan alignen we in het midden
if( obj.offsetWidth > laaier.offsetWidth )
posX += ( ( parseInt( obj.offsetWidth ) - parseInt( laaier.offsetWidth ) ) / 2);
//voor wooncom lijnen we standaard de boel naar rechts uit, behalve als we hiermee buiten het beeld komen (rechterkant kernnav gelijk aan submenu rechterkant, maar als submenu breder is dan kernnav, kan het menu links buiten beeld vallen)
else if( posX + ( parseInt( obj.offsetWidth ) - parseInt( laaier.offsetWidth ) ) > 0 )
posX += ( parseInt( obj.offsetWidth ) - parseInt( laaier.offsetWidth ) );
posY = findPosY( obj );
//als menu over x-as moet uitklappen( links rechts )
if( menuObj.directionX != 0 && menuObj.directionX != null )
{
if( menuObj.directionX > 0 )
posX += obj.offsetWidth;
else
posX -= laaier.offsetWidth;
}
//als menu over y-as moet uitklappen (onder boven)
else if( menuObj.directionY != 0 && menuObj.directionY != null )
{
if( menuObj.directionY > 0 )
posY += obj.offsetHeight;
else
posY -= laaier.offsetHeight;
}
//default naar rechts
else
{
posX += obj.offsetWidth;
}
laaier.style.left = posX + "px";
laaier.style.top = posY + "px";
}
//show the menu
laaier.style.visibility = "visible";
//do the same for parentmenu
if(menuObj.parent != null)
show(menuObj.parent);
}
//functie om een menu weer te verbergen
function hide(id, withparent) {
//get menuobject
menuObj = getMenu(id);
if( !menuObj || menuObj == null )
return;
//set timeout for menu
menuObj.timer = setTimeout("hide4real('" + id + "');", defaultTimeOut);
//do the same for parentmenu
if(menuObj.parent != null && withparent)
hide(menuObj.parent, withparent);
}
//functie om het menu echt te verbergen
function hide4real(id) {
//hide the menu
getObj("menu" + id).style.visibility = "hidden";
}
![\"stip\"](\"/images/pulldown_lo.gif\")
![](\"/images/pulldown_ro.gif\")