Download Javascript Object Oriented Menu by Aurigen (JOOMA)

Return to Aurigen Home Page

General Informaiton

JOOMA can be used to create a pull down menu on your site similar to the menus above.

• Has been tested with various browsers
  • Microsoft Internet Explorer (IE) v 5.5, 6.0, 7.0
  • Mozilla Firefox 1.5, 2.0
  • Mozilla (Mz) 0.9.x, 1.0
  • Netscape Navigator (NN) 4.7
  • Netscape Navigator (NN) 6.0
  • Opera (Opera) 5.0, 6.0
• Gives you mouseOver control of menu:
  • Font: family, size, style, weight
  • Images
  • Background colors
• Reads your menu configuration informaton from 2 JS files
• Fully object oriented JavaScript code
• Includes this documentation/demonstraton

For IE and CSS1 browsers, it gives you mouseover/mouseout control for the menu element's font-family, font-size, background color, associated images, and other parameters. Some browsers do not allow control of all these paramaters. For example, NN4.x only allows direct control of menu item images, background colors and background images. Opera 5.0 and 6.0 have similar limitations. Still, you can achieve some interesting mouseover effects.

JOOMA reads your menu specificatons (menu text, target pages, format, colors, etc.) from two separate, easy to modify JavaScript files.

Licensing

JOOMA is copyrighted by Aurigen Inc., 2001-2006. All rights reserved. You can use JOOMA for free on your personal, non-commercial, non-business site. Businesses, please contact us for a site license.

Basic Usage

JOOMA is simple to configure for your site.  All you have to do is create your menu buttons in the joomaConfig.js file with statements like these:

// Instantiate (create) a button style object
// styleDefault = new NavButtonStyleFactory(["styleName"]);
 styleDefault = new NavButtonStyleFactory();
 styleDefault = styleDefault.getRef();
 styleDefault.styleWrite();

// Instantiate (create) a menu object
// menu0 = new NavMenu([locX], [locY], ["styleName"]);
 menu1 = new NavMenu(50, 50);

// Add buttons to the menu
// menu.addButton(barName, popBtnNum, title, target,
//      [horzOrVert], [styleRef], [persist])
 btn = menu0.addButton(0, null, "Title00", "Target00.html", "H");
 btn = menu0.addButton(0, null, "Title01", "Target01.html");
 btn = menu0.addButton(0, null, "Title02", "Target02.html");
 btn = menu0.addButton(1,    1, "Title10", "Target10.html");
 btn = menu0.addButton(1, null, "Title11", "Target11.html");
 btn = menu0.addButton(1, null, "Title12", "Target12.html");

Include jooma.js and joomaConfig.js within the HEAD tag of each page which will contain the menu:

<script src="script/jooma.js" type="text/javascript"
 language="JavaScript"></script>
<script src="script/joomaConfig.js" type="text/javascript"
 language="JavaScript"></script>

Include a Javascript statement within the BODY tag of each page which will contain the menu:

<script type="text/javascript" language="JavaScript">
<!--
 menu1.bodyWrite();
// -->
</script>

That's all you have to do to set up your menu.

Parameter definitions:

barName    = usually the bar number, starting with 0
popBtnNum  = the number of the button which causes the bar of
             the button being added to appear.  See below.
title      = the text which appears on the button
target     = the URL which you want displayed  when the button is clicked
horzOrVert = determines if the button's bar is horizontal or vertical
persist    = overrides whether the bar disappears onmouseout()

Notes on parameter definitions:

The popBtnNum, horzOrVert, and persist parameters refer to the *bar* on which the button being added appears. You only need to set this varialbe for one of the bar's buttons.  If persist is not specified, it is defaulted to "true" for bar0 and "false" for all other bars.

The "popBtnNum" is determined by counting the buttons starting from zero in the order they are defined without regard to the bar on which they appear.  If you change the order of the button definitons, you change the popBtnNums.

Non-Javascript Browsers

You can provide a menu for non-Javascript browsers by putting simple HTML links on your page where the Javascript menu would have appeared, or at some other convenient location. You could use the HTML from our bar menus above, but omit the Javascript.

The HTML for JOOMA is written to your pages by Javascript code. This makes it easier to configure the menu. You don't have to write any HTML, you just modify the Javascript configuration code. Consequently, if a browser does not support Javascript, or if a user has disabled Javascript, no menu appears. Whatever would have been under the menu will appear.

Fancier Menus

JOOMA can be used to create simple text menus, or more complicated menus which contain images, or are entirely composed of images.  It can also be used to construct a simple bar menu which works, without mousover effects, if Javascript is absent or disabled.

Examples of all these menus are shown above on JoomaDemo.html.

Changing the Style of the Entire Menu

See joomaConfigSimple.js and joomaConfigDemo.js for additional examples.

If you want to change the menu colors, fonts, etc., go to jooma.js, and edit NavButtonStyle():

function NavButtonStyle(styleID){

 this.name           = styleID? styleID: "stylePop";

 this.persist  = false;
 this.horzOrVert     = "V";
 this.locX           = 0;
 this.locY           = 0;
 this.offsetX        = 0;  // -1 to cause mouseover() before mouseout()
 this.offsetY        = 0;  // -1 to cause mouseover() before mouseout()

 this.btnHeight      = "20px";
 this.btnWidth       = "200px";

 this.visibility     = "visible";

 this.fgColorCold    = "#0000ee";
 this.fgColorHot     = "#000000";
 this.bgColorCold    = "#cccccc";
 this.bgColorHot     = "#eeeeee";

 this.fontFamilyCold = "sans-serif";
 this.fontFamilyHot  = "serif";
 this.fontSizeCold   = "10pt";
 this.fontSizeHot    = "10pt";
 this.fontWeightCold = "normal";   // normal,bold
 this.fontWeightHot  = "bold";   // normal,bold
 this.fontStyleCold  = "normal";   // normal,italic
 this.fontStyleHot   = "italic";   // normal,italic

 this.textAlignCold      = "left";
 this.textAlignHot       = "left";
 this.textDecorationCold = "none";  // none,underline,blink,line-through,overline
 this.textDecorationHot  = "none"; // none,underline,blink,line-through,overline

 if(document.getElementById && document.all && !window.opera){
  this.cursorHot = "hand";   // IE5+ browsers
 }else{
  this.cursorHot   = "pointer";  // WC3 browsers except IE5+
 }
 this.cursorCold  = "default";
 
// alert(this);
};

Changing the Style of an Entire Menu Bar

See joomaConfigSimple.js and joomaConfigDemo.js for additional examples.

If you want one of your menu bars (say the main horizontal bar) to have a different style from the rest:

* Instantiate a second "NavButtonStyle" object
* Modify its properties as desired
* Specify this style for the first button of the appropriate bar

Here is sample code to instantiate a second "NavButtonStyle" object.

 styleM = new NavButtonStyleFactory("styleMain");
 styleM = styleM.getRef();
 styleM.btnWidth      = 50;
 styleM.textAlignCold = "center";
 styleMtextAlignHot   = "center";
 styleM.styleWrite();

Here is code to specify the second style:

 btn = menu1.addButton(0, null, "Title00", "Target00.html", "H", styleM);
 btn = menu1.addButton(0, null, "Title01", "Target01.html");
 btn = menu1.addButton(0, null, "Title02", "Target02.html");

Changing the Style of a Single Menu Button

See joomaConfigSimple.js and joomaConfigDemo.js for additional examples.

This is especially useful for creating menus which contain images for each button instead of text. Here is an example of code to set up some menu buttons which swap between hot and cold images onMouseOver()

// Add buttons to the menu
// menu.addButton(barName, popBtnNum, title, target, horzOrVert, styleRef, persist)
btn = menu1.addButton(0, null, "Title00", "Target00.html", "H", styleM);
btn.fgImgHot = "image/circle160x0x0.gif";
btn.fgImgCold = "image/circle0x160x0.gif";
btn = menu1.addButton(0, null, "Title01", "Target01.html");
btn.fgImgHot = "image/pentArrowHot.gif";
btn.fgImgCold = "image/pentArrowCold.gif";

Version History

• Fix a bug which prevented the top level main menu from being vertical
• JoomaDemo.html
  • Added Vertical background image demo menu
  • Updated information
• Various internal code improvements

• Netscape 4.x: Added background image swapping
• WC3 Browsers: tested background image swapping
• JoomaDemo.html
  • Added background image demo menu
  • Added information
• Bar Menu: Added cellspacing="0" to fix rendering of borders
• Background color fix: you had to change it for both WC3 and NN4
• Various internal code improvements

• Arguments changed in NavMenu.addButton()
• from: menu.addButton(barNum, parentBtnNum, title, target, styleRef, horzOrVert, persist)
• to: menu.addButton(barNum, title, target, parentBarNum, parentBtnNum, horzOrVert, styleRef, persist)
• Added multilevel pull downs
• Pre-load of images: button hot and cold
• Upgraded JavaDemo.html display multi-level pull down menus
• Various internal code improvements

• Upgraded to improve display of image buttons in the menus.
• Upgraded handling of simple bar menus which degrade to simple links in the absence of Javascript.
• Streamlined code by using Javascript inheritance
• Added JavaDemo.html and JavaDemoSimple.html to display various menu examples

A Word To The Wise And The Wary

If you do things in small steps, testing each step, and you find you've made a mistake, you know where to look for the mistake: the last small step you took. We find this is good method to use, especially the first time you do something. So, here's how we recommend you proceed.

Add the include files (jooma.js and joomaDemoSimple.js) and the JavaScript function calls to your existing page. Test the page to see the sample menu displayed on your own page.  That way you'll know the menu is working.

Next, edit the existing menu0.addButton() to conform to some of your buttons. Test again.  Next, continue adding menu buttons and pull downs and testing until you have your complete menu.

Files

JOOMA requires 2 files:

• jooma.js
• joomaConfig.js

The Download Zip file (jooma.zip) includes the files listed below.

• jooma.js
• joomaConfig.js
• joomaConfigDemo.js
• joomaConfigDemoSimple.js

• Target00.html
• Target01.html
• Target02.html
• Target10.html
• Target11.html
• Target12.html
• Target20.html
• Target21.html
• Target22.html
• JoomaDemo.html
• JoomaDemoSimple.html

• Images
• Cascading Style Sheet (CSS)

If you unzip jooma.zip in its own folder, the menus on the example pages should work immediately.  See summary of usage above for more information.

Troubleshooting

-------------------------------------------------
Error: popUps disappear when mouse is moved from the main menu bar to the popUp.
Error: button DIVs remain highlighted when mouse is moved away from them.
Try increasing the height or width of your button DIVs.  Each button DIV should be large enough to hold its text and images.  If it is not, some browsers may increase the size of the DIV, and the button DIVs may not be butted exactly against each other, although they may look like they are.  If they are not butted exactly against eachother, the mouseout() of one button may fire too soon before the mouseover() of the next, causing the 2nd button to disappear before the mouse gets over it.

-------------------------------------------------
Error message like: is not an object.
It is likely that the paths to the scripts are not correctly specified on your HTML pages.

FAQs

-------------------------------------------------
How do you make a two line horizontal menu bar?
Put a "<br>" in the menu text item where you want to go to a second line.  Make sure the btnHeight is large enough to accomodate 2 lines in the font you are using.

-------------------------------------------------
I have a two line horizontal menu bar, but some of my menu text items are line one. How do I make them appear on line two instead of line one?
Precede the menu text item with a "<br>".

Contacting Us
Robert Emmons
Aurigen Inc.
(973)228-9139
remmons@aurigen.com
http://www.aurigen.com