Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

Popup menu

Code listing for m.js

  1. /*
  2. * date: 2002-10-14
  3. * info: http://inspire.server101.com/js/m/
  4. */
  5. var mItem = [];
  6. var mTime = [];
  7. var mWait = 250;
  8. function mSet(ul, c) {
  9. if (document.getElementById) {
  10. ul = document.getElementById(ul).getElementsByTagName('ul');
  11. var i, j, e, a, f, b;
  12. var m = mItem.length;
  13. for (i = 0; i < ul.length; i++) {
  14. if (e = ul[i].getAttribute('id')) {
  15. mItem[m] = e;
  16. e = ul[i].parentNode;
  17. e.className = c;
  18. f = new Function('mShow(\'' + mItem[m] + '\');');
  19. b = new Function('mBlur(\'' + mItem[m] + '\');');
  20. e.onmouseover = f;
  21. e.onmouseout = b;
  22. a = e.getElementsByTagName('a');
  23. for (j = 0; j < a.length; j++) {
  24. a[j].onfocus = f;
  25. a[j].onblur = b;
  26. }
  27. m++;
  28. }
  29. }
  30. }}
  31. function mShow(id) {
  32. for (var i = 0; i < mItem.length; i++) {
  33. if (document.getElementById(mItem[i]).style.display != 'none') {
  34. if (mItem[i] != id) mHide(mItem[i]);
  35. else mClear(mItem[i]);
  36. }
  37. }
  38. document.getElementById(id).style.display = 'block';
  39. }
  40. function mHide(id) {
  41. mClear(id);
  42. document.getElementById(id).style.display = 'none';
  43. }
  44. function mBlur(id) {
  45. mTime[id] = setTimeout('mHide(\'' + id + '\');', mWait);
  46. }
  47. function mClear(id) {
  48. if (mTime[id]) {
  49. clearTimeout(mTime[id]);
  50. mTime[id] = null;
  51. }
  52. }

function mSet(ul, c)

Transforms <ul> elements into a popup menu. Creates mouse and keyboard event triggers and adjusts classes to allow the menu style to be altered upon success.

ul
String: id the menu items’ parent in the HTML source.
c
String: class name applied to menu items.

function mShow(id)

Hides all open menus, then opens the specified menu. Cancels any timeout set to close the specified menu.

id
String: id of menu item to show (pop up).

function mHide(id)

Internal function triggered by timeouts set in mBlur. Immediately hides a menu. Calling this directly from menu events would cause the menu to disappear when tabbing through menu links, or moving the mouse too far too fast.

id
String: id of menu item to hide.

function mBlur(id)

Creates a timeout to hide this menu. Timeouts are used to detect when the mouse or keyboard focus leaves a menu. If the mouse/keyboard focus returns to the menu, the timeout is cancelled (therefore the menu is never hidden).

id
String: id of menu item to hide.

function mClear(id)

Internal function used by mShow and mHide to clear timeouts. One timeout per menu is allowed in the mTime (hash) array. Timeouts are set to null to enable accurate detection of whether a given timeout is set.

id
String: id of menu item.
[ inspire logo ]
Code in the javascript library is free to use. Enjoy! Feedback welcome.
© Ben Boyle 2003.