| This page contains additional information for JavaScript programmers or professional webdesigners with experience in DHTML. It was created to explain how the code of FX Menu can be tuned with rules and to show the ability to change the menu both at buildtime and runtime. |
Using Variables, which are used in FX Menu
Browser Sniffer
FX Menu is using a partly object orientated browser sniffer. Let's say a loose one. This causes all unknown browsers to be identified as Netscape Navigator 6, if they support document.getElementById. Since they support the DOM-object this doesn't make much difference for the JavaScript they have to execute.
The table below gives you an overview over the variables used for browser sniffing. This might help to start a discussion about the browser sniffer used in FX Menu. Additional Information about hardcore browser sniffing can be found at The Ultimate JavaScript Client Sniffer.
|
| Variable | Value | Comment |
| IE | True for Internet Explorer 4.0+ - 6.x | |
| IE4 | True for Internet Explorer 4.x | Only true for Internet Explorer 4.x |
| IE5 | True for Internet Explorer 5.0+ - 6.x | |
| IE55 | True for Internet Explorer 5.5+ - 6.x | |
| NN4 | True for Netscape Navigator 4.x | Only true for Netscape Navigator 4.x |
| NN6 | True for Netscape Navigator 6.0+ - 7.x (and Gecko engine based browsers). | |
| NN7 | True for Netscape Navigator 7.0+ (and Gecko engine based browsers). | |
| MOZ | True for all Gecko engine browsers, except for Netscape Navigator. | |
| MOZ16 | True for Mozilla 1.6+ browsers, except for Netscape Navigator | |
| OP | True for Opera 5.x, 6.x and 7.x | |
| OP5 | True for Opera 5.x and 6.x | False for Opera 7.x |
| OP7 | True for Opera 7.0+ | |
| OP722 | True for Opera 7.22+ | |
| SAFI | True for Safari | |
| MAC | True for Macintosh browsers. | |
| Examples |
with(itemStyle=new fxstyle()){
if(!NN4)fontsize="8pt";
else fontsize="9pt";
} | if(!OP5)buildMenus() |
|
Other Internal Global Variables |
| Variable | Value | Comment |
| _iQ | _ItemCount. Returns overall number of items. | |
| _mQ | _MenuCount. Returns overall number of menus. | |
| FDTD | True if a doctype definition is set. | Always true for all Gecko based browsers. |
| flg | False if a menu on a webpage is active. Used in the code to decide, wether a submenu should be closed after a timeout or not. | Not reliable. |
| _A | This is the two-dimensial array, where the information about all web menus on one page is stored. Available after the function buildMenus() in input.js. Properties of a single menu can be accessed with:
_A[MenuNumber]
A single property value can be accessed with:
_A[MenuNumber][PropertyNumber] | |
| _I | This is the three-dimensial array, where the information about all items on one page is stored. Available after the function buildMenus() in input.js. Properties of a single item can be accessed with:
_I[MenuNumber][ItemNumber]
A single property value can be accessed with:
_I[MenuNumber][ItemNumber][PropertyNumber] | The properties of the first item in each menu can be accessed with:
_I[MenuNumber][1]. |
| ItemObject.B | Object orientated variable. This is only available if the item already had the focus and is short for ItemObject._A[MenuNumber]. | Useful if the item is only available as an object and you need to access the parent menu properties. |
| ItemObject.I | Object orientated variable. This is only available if the item already had the focus and is short for ItemObject._I[MenuNumber][ItemNumber]. | Useful if the item is only available as an object and you need to access it's properties. |
|
A byte is a bitDecreasing the file sizeFX Menu is already splitted into several files for different browser to keep the file size down. Nevertheless there are some tools in the net to decrease the file size of the current code by up to 25%.
JavaScript Obfuscator is such a tool available at javascript-source.com.
Manually decreasing the .js file size is possible by removing unnecessary functions. If you don't need the pop-up functions built into FX Menu you can remove: popUp() and popDown() in fxmenu.js
|
|
Additional Methods & Functions
The following functions are not built into the standard code of FX Menu. They are available as module for download to save bandwidth and have to be copied and pasted into fxmenu.js or attached with an external js file. Download fxmodul0.js - API functions
|
| Function | Definition | Comment |
| getObjectById("ObjectId","ParentObjectId") | Returns the object if available or returns null. | ParentObjectId is necessary for nested layers in Netscape 4.x. If you don't consider Netscape as worth supporting pass only ObjectId. |
| getMenuObjectByNumber(MenuNumber) | You have to pass a number between 1 and _mQ (_MenuCount) as an argument. Returns the object if available or returns null. | |
| getMenuObjectByName(MenuName) | You have to pass the name of a menu as an argument. Returns the object if available or returns null. | |
| getMenuNameByNumber(MenuNumber) | You have to pass a number between 1 and _mQ (_MenuCount) as an argument. Returns the name of the menu. | |
| getMenuNumberByName("MenuName") | You have to pass over a menu name. Returns the number of the menu if available or returns null. | |
| getFocusedItem() | Returns the focused item object if available or returns null. An item gets focused by moving the mouse over it and is focused until you move other an other item. | |
| getFocusedMenu() | Returns the focused menu object if available or returns null. | |
| focusMenu(MenuNumber) | You have to pass over a menu number. Increases the z-Index of the menu by 1. | |
|
|
Additional Global Variables
Rules System
The following global variables are built into the standard code of FX Menu and have default values. They can be used for fine tuning your menu or simply to modify menu behaviour.
|
| Variable | Definition | Comment |
| RL0 | If RL0=true, an item without a defined url stays in "over" state, even when you click on it. This can be used to prevent an item, which shows a submenu on "mouseover", to go in "down" state, when you click on it by accident. | Boolean. Default value: false |
| RL1 | Be careful when using RL1. This is used to set a timeout, before an item gets the focus. When moving your mouse over an item, the script reaction is delayed by the amount of milliseconds defined in RL1. Implemented to stop users from "crazy menu jumping". This variable is present in almost all FLASH menus and may also be declared as 0 for FX Menu. | Unit is milliseconds. Default value: 55 |
| RL3 | BlurDelay. Sets a timeout before a submenu is closed, when you focus another item (only works if hideonclick is false or not defined).
The reason for this property only being available as a rule is that this might cause a bug. This bug only occurs, when different items in the same level have the same submenu.
| Unit is milliseconds. Default value: 0 |
| RL4 | When a submenu is displayed and "RL4" is true, the parent item changes to "down" style. Useful in combination with "showdelay".
| Boolean. Default value: false |
| RL5 | Is used in combination with "match". If RL5=1 an item with url matching the active page, keeps the url and it's still possible to click the item and go to the (same) url. | Boolean. Default value: false |
| RL6 | Used in combination with "match". Usually a matched item stays in "mouseout" state, when moving your mouse over it. This can be changed by declaring RL6 as true. | Boolean. Default value: false |
| RL7 | With RL7=true partial-menu loading is turned on for Internet Explorer 5.5+. This is used to improve the loading performance: Each menu loads separatly and only if required, might cause an open delay. | Boolean. Default value: false. Has not been tested properly yet. |
| RL8 | With RL8=true, you can prevent all items from changing to "down" state on "mouseclick". | Boolean. Default value: false |
Other Global Variables
|
| Variable | Definition | Comment |
| windowsmenu | Helps to simulate windows behaviour. Only works perfectly, when the following properties in the menu properties are declared as true for the main navbar: showonclick, hideonclick and keepvisible. Keeponblur has to be false. For all submenus keepvisible has to be true. The global variable hideonpageclick should be declared as true for a fully functional windows menu. | windowsmenu=true; |
|
Menu Reference Property Numbers
Style Properties
This is the runtime addition to the item/style property reference guide. Some of the properties can be changed at runtime, some are only read once and therefore keep their value.
|
| Property | Runtime | Number |
| visible | | 13 |
| position | | 24 |
| left | | 2 |
| top | | 3 |
| orientation | | 14
|
| showdelay | | 21 |
| showonclick | | 16 |
| hideonclick | | 17 |
| keeponblur | | 15 |
| keepvisible | 27 |
| keeponclick | 35 |
| direction | | 45 |
| alignwith | | 48 |
| width | | 4 |
| height | | 5 |
| filterover | | 8 |
| filterout | | 9 |
| functionover | | 22 |
| functionout | | 10 |
| screenalign | | 11 |
| overlap | | 18 |
| highlightpath | | 23 |
| menuwidth | | 25 |
| menuheight | | 26 |
| menualign | | 42 |
| wiseposition | | 31 |
| shadowstrength | | 30 |
| colorvisited | | 32 |
| fontstylevisited | | 33 |
| columns | | 34 |
| separatorsize | | 43 |
| separatorcolor | | 28 |
| menubgcolor | | 6 |
| menubgimage | | 7 |
| menumargin | | 39 |
| menuborderwidth | | 36 |
| menuborderstyle | | 40 |
| menubordercolor | | 41 |
| overflow | | 44 |
| flickthrough | | 19 |
| hidelayer | | 37 |
