[struts-menu-devel] Howto: convert dhtmlDropdown to mouse over...

[Tao Starbow]

I modified scripts/menuDropdown.js to get the coolmenu's effect of 
having the menu appear on mouseovers and disappear on mouseout, rather 
than needed to be clicked on.  The only tricky bit is that you get 
mouseout events when you move inside the menu, hence the timeout.

Also, I added a onload function to scan the html for *Actuator links and 
call initializeMenu on them.  This could be added to the default script, 
as the example currently does not work.

This still does not work well with submenus.

Thanks for a great tag library.
-tao starbow
/*
* menuDropdown.js - implements an dropdown menu based on a HTML list
* Author: Dave Lindquist ([EMAIL PROTECTED])
* Converted to MouseOver by Tao Starbow
*/
var currentMenu = null;
var timeout = null;
if (!document.getElementById) {
   document.getElementById = function() { return null; }
}
// a little nasty, this does not play nice with anything else that wants 
to be called onLoad.
// initialize the menus - first scan the DOM for all link with 
id="*Actuator"
window.onload = function() {
   regEx=/(.+)Actuator/;
   for( i=0; i<document.links.length; i++ ) {
       str = document.links[i].id
       if( str != "" ) {
            myArray = str.match(regEx);
            if( myArray != null ) {
               initializeMenu( myArray[1] + "Menu", myArray[1] + 
"Actuator" );
            }
       }
   }
}

function initializeMenu(menuId, actuatorId ) {
   var menu = document.getElementById(menuId);
   var actuator = document.getElementById(actuatorId);
   if (menu == null || actuator == null) return;

    menu.onmouseover = function() {
       window.clearTimeout( timeout );
    }
    menu.onmouseout = function() {
       timeout = window.setTimeout( 'hideMenu()', 100 );
    }
   actuator.onmouseover = function() {
       window.clearTimeout( timeout );
       if( currentMenu ) {
           currentMenu.style.visibility = "hidden";
       }
       this.showMenu();
   }
   actuator.onmouseout = function() {
        timeout = window.setTimeout( 'hideMenu()', 100 );
    }
         
   actuator.onclick = function() {
       if (currentMenu == null) {
           this.showMenu();
       }
       else {
           currentMenu.style.visibility = "hidden";
           currentMenu = null;
       }

       return false;
   }
   actuator.showMenu = function() {
       result = getElementPosition( this );
       menu.style.left = result.left + "px";
       menu.style.top = result.top +  this.offsetHeight + "px";
       menu.style.visibility = "visible";
       currentMenu = menu;
   }
}
function hideMenu()  {
   if( currentMenu != null ) {
       currentMenu.style.visibility = "hidden";
          currentMenu = null;
    }
}
function expandMenus() {
   // empty method - this is here b/c the ListDisplayer
   // calls this method for expanding menus and the list
   // type is determined by JavaScript, rather than Java
}
// From "Cooking with JavaScript & DHTML" by Danny Goodman.
function getElementPosition( offsetTrail ) {
   var offsetLeft = 0;
   var offsetTop = 0;
   while (offsetTrail) {
       offsetLeft += offsetTrail.offsetLeft;
       offsetTop += offsetTrail.offsetTop;
       offsetTrail = offsetTrail.offsetParent;
   }
   if (navigator.userAgent.indexOf("Mac") != -1 &&
       typeof document.body.leftMargin != "undefined") {
       offsetLeft += document.body.leftMargin;
       offsetTop += document.body.topMargin;
   }
   return {left:offsetLeft, top:offsetTop};
}


-------------------------------------------------------
This SF.Net email is sponsored by: IBM Linux Tutorials
Free Linux tutorial presented by Daniel Robbins, President and CEO of
GenToo technologies. Learn everything from fundamentals to system
administration.http://ads.osdn.com/?ad_id=1470&alloc_id=3638&op=click
_______________________________________________
struts-menu-devel mailing list
[EMAIL PROTECTED]
https://lists.sf.net/lists/listinfo/struts-menu-devel