Click for Navigation:
Introduction (Pop-up | Toolbar | Closing)
Calling FloatingMenu() (Syntax | Where to Implement | Items Coding | Style Overrides | Global Variables | Options) |
Simple Item|
Submenu Item | Action Item |
Dialog Item
( Input Arguments | Output Arguments) |
Subdialog Item ( HTML | onopen= | Closing | Result Handling )|
Special Items ( Conditional Items | Optional Items | Non-text Items | Toolbar Items) |
Background |
Reference Card
FloatingMenu -
A Host of User Interactivity in a Nutshell
You want your Online Communication to have good usability? Then you need many control elements to give the users perfect control over layout and contents. So you need a good deal of the precious screen space for those control elements. This in turn takes away some of the working area, i.e. you have less usability. - Or you apply a FloatingMenu: in stand-bye it is occupying no screen space at all, not before the user's request it becomes (temporarily) visible.
For a real application based on a FloatingMenu see my article
Involve the Users - Let Them "Customize" Your Document!
If you want to provide rich user interactivity, you have a problem (apart from implementing it, of course): For good usability the visitors need
- A great number of control elements by which they can control the interactivity. Yet, many elements in total are occupying much space. Space is already limited on the small computer screen. The greater part of space is needed for the working area already.
- In a FloatingMenu each item can be associated with a Submenu or a Subdialog, popping up automatically when you move the cursor onto the item and let it rest there for about ½ second.
- A FloatingMenu goes by the concept: "Let the menu be there where the cursor is". Whereas with conventional control elements the user has to move the cursor quite carefully. So, a FloatingMenu means also more user-friendliness simply in terms of dexterity!
- And, not to forget, it should not take too much of your time to equip your document with user interactivity. There is no point in providing great on-screen demonstrations when you have just a minimum of contents! - With a FloatingMenu you need just one line of HTML-code to implement it in your Online Communication.
next top
Introduction
A FloatingMenu is based on a universal Menu software module that has a wide range of layout and behavior. Take, for example, the SectionMenu in the upper right corner of the screen. Compare it to the FloatingMenu (to launch it, press the Ctrl-key while clicking the right mouse button). Would you believe that they both are implemented around the same core module Menu, differentiated just by a few declarations?
By clicking any of the menu items (or elements of the sub-dialog associated, if any) you can manipulate a great number of style features of any of the titles, list items or paragraphs herein.
Note that with such a multitude of control elements needed for the user to control the user interactivity, one screen would not even be enough (disregarding the working area, that you need in addition!). In other words: Such a lavish user interactivity would not be possible at all with a conventional user interface.
This article has a FloatingMenu built in. You can launch it by pressing the Ctrl-key and, without releasing the key, clicking on any of the titles, list items or paragraphs herein with the right mouse button.
Then a FloatingMenu will pop up with a corner right at the point you clicked. (Typically this will be the top-left corner. But when you clicked at a place where the menu could not be fully placed on screen, it will be any other corner.)
As always, let me ask you: Please do spy on the source code! You might sometimes wonder if a demo was really implemented as said or if there was any trick at the bottom of it. To do that, you are explicitly asked to right-click anywhere on your browser and to click "View Source" in the context menu.
next top
Pop-up
By default, the FloatingMenu is popping up such that
- It appears completely on screen:
- normally the top-left corner will be exactly at the point you Ctrl+right-clicked
- if that point is too close near the bottom/right screen edge (so the FloatingMenu could not be appear completely), it will pop up such that any of the other corners will be at the point you clicked
- independent of the FloatingMenu's pop-up location: if it has any sub-menu or sub-dialog that could not appear completely on screen, that sub-menu/sub-dialog will pop up such that it comes up completely (overriding your displacements, if necessary)
- In some applications the readers will feel them at the wrong place. Then the FloatingMenu can be moved to another place by dragging :
- move the mouse to any place on the FloatingMenu where the cursor turns to move (
)
- press the (left) mouse button and, keeping it pressed,
- move the mouse cursor to any other place - the FloatingMenu will move along with it
- when moved to the desired location, release the (left) mouse button; from now on the FloatingMenu will stay put, independent of future mouse moves.
- From the new location you can drag the FloatingMenu again at any time.
- When dragging,
- if a sub-menu is open, it will be moved along with the dragged menu
- however, when a sub-dialog or toolbar is open, it will stay put until end of dragging and moving the cursor onto another menu item. Next time it is popped up, it will be near its menu item again.
- If there was any text selected before popping up the FloatingMenu, the selection will be gone temporarily during dragging. When the mouse button is released, the selection will be restored.
- When doing ' Ctrl+right-click' again when the FloatingMenu is on screen, the result is:
- if the point clicked is on any object (text, list item, ... ), the FloatingMenu is relocated to that point
- if the point clicked is on no object (i.e. the document's <BODY>), the FloatingMenu is removed.
previous next top
Toolbar
In my article Sub-dialogs and Toolbars - to Make Your Document "Customizable" a new class of sub-dialogs have been introduced: toolbar. A conventional sub-dialog conceptually is part of the menu. In contrast:
- A toolbar can have any collection of contents elements, just like a sub-dialog.
- A toolbar can be detached - that is, dragged away from the menu; there it stays, even when another sub-dialog or toolbar is opened, or when the FloatingMenu is closed.
- A toolbar can be moved - that is, to any place in the client area of the screen.
- A toolbar can be resized - that is, dragged on the inside of any border, to expand or shrink it (contents elements are re-arranged automatically).
- A detached toolbar has auto-scrolling - that is, when the reader scrolls over the document, a detached toolbar will automatically move along. The readers will always find it at the accustomed place on screen. Until it is closed, becoming a normal sub-dialog again.
- A detached toolbar is semi-permanent - that is, the readers can close a session and shut down the computer. When they come back some time later. the document will be opened with the same toolbars on screen at the same place and in the same sizes.
- A toolbar has some other useful properties (see my article Sub-dialogs and Toolbars - to Make Your Document Fully "Customizable").
When you think about it - toolbars add a new dimension of reader-friendliness to a FloatingMenu: by it, a reader has the liberty:
- to have a host of interactivity at hand all the time, without the precious screen space being cluttered by many controls (most of which are not needed most of the time!)
- still being able to keep the part of the controls right at hand that will be needed currently, thus making it quasi-permanent
- even between sessions, detached toolbars will stay at the accustomed place.
- to close a detached toolbar at anytime, thus freeing the screen space. After closing, the toolbar will be part of the FloatingMenu again.
previous next top
Closing
Usually the closing of FloatingMenu will be left to the application: Whenever a menu-driven feature has been completed, the FloatingMenu should be removed by
usermenu.style.display = 'none';
An open sub-menu (if any) will be closed automatically then.
If there is a sub-dialog involved in the feature, it needs to be closed separately. Its id will be known to the feature (let's assume it is something like …_dlg ) So it can be closed simply by
…_dlg.style.display = 'none';
Also, a well-designed application should provide any menu item Reset or Reset All doing nothing but restoring the initial state:
- closing the FloatingMenu
- removing any selection (if any)
- undoing any other modification distorting the screen (if any)
Experience showed that for more user-friendliness it's good to provide a quick "emergency exit", simply by pressing the Esc-key. Especially during the learning phase, when getting to know an application, this is a convenient way to quickly restore the initial state. So, this "emergency exit" has been built in.
Note, however, that by default pressing the Esc-key does nothing but closing the FloatingMenu and opened sub-dialogs (if any). If you want application-specific operations to be done, they should be implemented in a function xxx() that is declared to the sub-dialog by ONCLOSE="xxx()" (see section Output by ONCLOSE= ).
previous next top
Calling FloatingMenu()
There are quite a few things to keep in mind when calling FloatingMenu() . In the following sub-sections you can read details on:
- Syntax
- Where to Implement
- Items Coding
- Style Overrides
- Global Variables
- Options
previous next top
Syntax
FloatingMenu = ([w[,x[,y]];]item[,… … …])
A FloatingMenu can comprise
- Numeric arguments for menu width ( w ), horizontal displacement ( x ) and vertical displacement ( y ), referring to the parent menu's top-left corner. For the main menu, x and y are ignored.
- 1+ items (= any number, at least 1).
Menu Width (w): By default, the menu width is estimated such that the text of the longest item can be accommodated at average screen resolution and letter size. Normally this will look reasonably well. If, however, you want a different width, you can override the estimate by this numeric argument.
Menu Displacement (x, y): By default, a submenu will be popping up right beneath the item it is associated with, horizontally aligned with this item.
Horizontal Displacement: For a rather small menu this will be reasonably user-friendly.
A subdialog (see Subdialog Item) will normally pop up exactly at the place determined by [x[,y];], unless the parent menu is too close to the right and/or bottom screen edge so that it would partly be off screen. Then the displacements are modified such that the subdialog appears on screen in full. The modifications are temporary - the next pop-up will try again to adhere to your displacements.
This was provided to save your users from a scrolling operation. Thus they can handle a subdialog even at extreme locations.
For a more complex menu, though, it will be
- easier to handle if the submenus are popping up some 20-30 pixels to the right.
- Disadvantage: If you have several levels of submenus, the main menu will have to be launched a bit farther to the left of the right screen edge. For a SectionMenu you can do that by global variables displX and displY (see Global Variables)
Vertical Displacement: By default, a submenu is popping up right beneath the item it is associated with. In most cases this will make for user-friendly handling. If, however, you want your submenu(s) to pop up at any other place, you can control it by this numeric argument.
You should be considerate to do that, though: The value y is referring to the top edge of the parent menu. Your setting might be fine at a particular letter size. But can you be sure that your visitors will never set their browsers to a larger or smaller letter size? Might the position of the submenu be slightly confusing then?
The syntax of each item is:
[prefix@]text[suffix]
The prefix can be any URL or bookmark if introduced by # ):
URL|#bookmark
When the user clicks a prefixed item, the browser loads the document associated with the URL, or scrolls to the bookmark within the current document. If an item has no prefix, bookmarks 1 , 2 , 3 , etc. are assumed.
An item text can be any sequence of characters (except ! $ [ ; ) Text can comprise plain ASCII text, HTML tags and special symbols of HTML (&…;) For details see section Simple Item.
A suffix is governed by its leading character:
!action[;action]|$subdialog[,x[,y]]|[[x[,y];]item;…]
An action can be any Javascript-code representing the action to be taken when the user clicks this item:
- direct action code
- calling a Javascript function combining a number of action steps
action[;action]
It must be bracketed in pairs of single-quotes ('') if comprising ; For details see section Action Item.
subdialog is the ID of a DIV's HTML-code comprising the subdialog's user elements (button, Slider, ColorSelect, etc.) For details see section Subdialog.
An item can also be a submenu. That is a recursive construction of a FloatingMenu, bracketed in square brackets ( [] ). A FloatingMenu can comprise any level of submenus. For details see section Submenu Item.
previous next top
Where to Implement
The menus based on module Menu() have to be implemented differently.
A SectionMenu() will typically be coded at the end of the <HEAD> … </HEAD> part of an online document within brackets <SCRIPT> … </SCRIPT>, e.g.:
<HTML>
<HEAD>
<TITLE> … </TITLE>
<SCRIPT SRC="OnlineComm.js"></SCRIPT>
<LINK REL=stylesheet HREF="OnlineComm.css">
<SCRIPT>
SectionMenu("Section1[!|$|[…]]",
"Section2[Section21;Section22;…]",
:
);
</SCRIPT>
</HEAD>
Whereas a FloatingMenu() should be coded between </BODY> and </HTML> . That's because in it the event handlers oncontextmenu="" and onmousedown="" are set automatically, what can be done only past <BODY> has been declared. If for some reason you want to have FloatingMenu() coded at the begin of the document, you have to set them explicitly:
oncontextmenu="return bContextMenu" onmousedown="ToggleFloatingMenu()"
For an efficient implementation you should not forget to include files OnlineComm.js and OnlineComm.css . That's why the following lines are needed:
<SCRIPT SRC="OnlineComm.js"></SCRIPT>
<LINK REL=stylesheet HREF="OnlineComm.css">
In file OnlineComm.js all the Javascript functions are coded needed for FloatingMenu() , etc. File OnlineComm.css holds all the style sheets needed for creating a FloatingMenu() , etc. If you don't like the standard style declarations, you can override them by a local style sheet (see section Style Overrides).
If you have a rather complex FloatingMenu, perhaps even combined with a SectionMenu, the browser will be occupied some time for building the menu(s). During this time your visitors will see nothing on screen. So they will think your document seems to be quite complex, requiring a lot of load time. (Though the document is loaded already, but the browser is running in the background.)
To avoid such a disadvantageous perception, you might consider to implement your menu(s) at the end of your document, between </BODY> and </HTML>. Then the cover page will be displayed right from the start, while the browser is still working in the background. (Idea of "give your visitors something to read, instead of having them wait" - see Make Your Visitor forget about Loading Time!)
previous next top
Items Coding
You have much flexibility in coding your items. A menu can have 1+ items (any number, at least 1).
By adjoining sub-items embraced in square brackets ([…]) you can associate a simple item with a submenu, popping up on screen whenever the user moves the cursor onto it and holds it there for about ½ second. Each sub-item, in turn, can have its own submenu, and so on. Submenus can be nested up to any level, limited only by the user's hardware capacity.
The simplest way is coding each item in a separate line:
FloatingMenu("Item1",
"Item2",
:
);
If you have a number of short items, you might prefer to code them all in one line. Note, though, that you should separate them by semicolon ( ; ):
FloatingMenu("Item1;Item2;…",
:
);
Or the other way round: If you have an item with a submenu of many sub-items, you can split each line wherever they would be separated by a semicolon, e.g.:
FloatingMenu("Item1;Item2[Item21;Item22",
"Item23;…]",
:
);
A slight drawback of doing so is, that it's easy to forget the square bracket ( ] ) closing the submenu. So you might rather like to combine coding everything in place with pre-coded strings, e.g.:
var submenu2 = "[Item21;Item22;Item23;…]";
FloatingMenu("Item1",
"Item2" + submenu2,
:
);
If you want, you can still code one thing after the other, changing to the next line when needed. Note, however, that formally all the items are coded as strings. So, if you want to change to the next line right within a string, you need a backslash at the end of the first line (what's called "line splicing").
A word of warning here: Make sure that the backslash is really the last character in the line you want to continue in the next line. If somehow, for example, you get a blank space between backslash and line end, this would cause an error message whose reason would be very hard to find out.
Implementing a FloatingMenu using line splicing would look as follows:
FloatingMenu("Item1;Item2[Item21;Item22;Item23 \
Item24;…]",
:
);
You should make it a habit to use double quotes ( " ) around the items, because you will frequently need single quotes for coding the action to be associated with an action item. Say, for example, you wanted to trigger an alert-box when the user clicks an action item:
FloatingMenu("Item1!alert('…')",
:
);
If you want to point out groups of items, it will be user-friendly to have a horizontal line between them. To that aim, code an empty item between them:
FloatingMenu("ItemA_1",
:
"ItemA_m;", // ";" = empty item
"ItemB_1;",
:
"ItemB_n;"
);
previous next top
Style Overrides
You can override the standard style declarations in file OnlineComm.css To do that you need to code a local style sheet.
For example, the standard background color of a FloatingMenu is yellow. Say, you would like to have a linen background instead:
<STYLE>
<!--
.Usermenu { background-color:linen }
-->
</STYLE>
Declare those style features you want to override, omitting all the others you agree with their standard values - that's enough!
For the exact wording of all the styles used in FloatingMenu and for their standard values you should look into file OnlineComm.css You can easily download this file by clicking on the following link: Download OnlineComm.css
previous next top
Global Variables
To smoothly integrate your FloatingMenu into your online document, the following global variables will be helpful. They can be used directly within the suffix of an action item, or in any of your Javascript functions (be sure not to declare local variables of the same names!)
| objFloatingMenu |
Object clicked by the user when pressing Ctrl-key and clicking with right mouse button, to have a FloatingMenu displayed.
By this variable you can manipulate the object clicked by the user right within the suffix of an action item.
For example, say, you wanted to provide an item for setting the font style to 'italic'. You could code it as follows:
"italic!objFloatingMenu.style.fontStyle='italic'"
|
| xRclick |
Horizontal coordinate of the point clicked by the user when pressing Ctrl-key and clicking with right mouse button, to have a FloatingMenu displayed.
|
| yRclick |
Vertical coordinate of the point clicked by the user when pressing Ctrl-key and clicking with right mouse button, to have a FloatingMenu displayed. |
|
Coordinates xRclick and yRclick will be useful if you need the exact point where the user clicked for the FloatingMenu. |
| displX |
Number of pixels a SectionMenu will be placed left of the right screen edge. Default: 30. This will be fine for a SectionMenu with a submenu level of up to 2 (such as the one in this article - move your cursor to the top-right screen corner!) If you have a more complex SectionMenu, you will want to set it to any greater value. |
| displY |
Number of pixels a SectionMenu will be placed beneath the top screen edge. Default: 10. This will be fine for making your SectionMenu appear unobtrusively. |
| options |
String of keywords (+ argument(s), if any) controlling automatic menu creation. Details see section Options. |
previous next top
Options
Some features are good for user-friendly Online Communication, but they may be conflicting with other features of your document. So they have been made optional. All you need to switch on an optional feature is assigning the appropriate keyword (+ argument(s), if any) to the global variable options Separate your options by blank space:
options = "keyword1 keyword2 …"
For all menus the following options are defined currently:
| status |
When the user Ctrl+R-clicks any point on screen, the tag name of the object located by this click, and the client coordinates, are displayed in the status bar.
This is very user-friendly if the screen is densely populated with objects. So the user might have problems locating a specific one.
However, the status bar might be occupied by your own application of your online document. That's why this feature is provided optionally (default: no status display).
|
| foreitems='…' or foreitems="…" |
In many menu-applications you will have some item(s) to be included automatically, before the explicit items of the argument list are counted up. Within '…' you can code one or several items, separated by semicolon (;) Counting up default bookmarks is starting at "1" with the first explicit item.
Example: foreitems='http://www.yourdomain.com@Home;#top@top' in a SectionMenu.
|
previous next top
Simple Item
A Simple Item is an item comprising text only, but no suffix. Optionally it can have a prefix (formalism see Reference Card).
The text can be a plain ASCII string or it can have HTML tags or special symbols included.
Simple Items are good for navigational menus. For example, move your cursor to the upper right corner of the screen. The SectionMenu popping up then is a collection of Simple Items (green) and Submenu Items (blue).
When the user moves over a Simple Item with the mouse, the cursor turns to a hand (G).
When the prefix is omitted, a Simple Item links to a numeric default bookmark:
| 1, 2, 3, … |
Simple Items in the main menu. The topmost item has 1, the second item 2, etc. |
| n1, n2, n3, … |
First, second, third, etc. item of the submenu associated with the n-th item of the main menu. |
| i…n1, i…n2, … |
First, second, etc. item of the submenu associated with the n-th item of the i…n-th item of the main menu.
For example, the third item of the submenu associated with the second item of the submenu associated with the first item in the main menu, by default links to bookmark "123." Thus you can have any number of bookmarks in your document, nested over any number of levels.
Care should be taken if you have more than 9 bookmarks on the same structure level. Then the defaults are simply counted on, e.g. 18 19 110 111 112 etc. The browser has no problem with the ambiguity emerging now. But you should watch out not to give the same bookmarks to the tenth, eleventh, etc. sub-section of main section 1 - as well as to the first, second, etc. sub-section of the 11-th main section. then you will need non-numeric bookmarks which in turn must be coded explicitly to the corresponding Simple Items.
In Reference Card you will see that by adding >target to a prefix you have control over the TARGET="…" attribute of the link represented by a Simple Item. So you can, for example, offer a Simple Item in your menu referring to any URL outside your domain and have it displayed in an extra window - simply by coding that item as follows:
…URL…>_blank@…item text…
|
Note that a Submenu Item and an Action Item can also have a prefix to link to a bookmark or any URL.
previous next top
Submenu Item
You can break down your subject to any detailing level - each Simple Item of your section menu can easily be associated with a tree of sub-sections, reaching over any number of nesting levels, each with any number of sections of its own. All you have to do is adjoining a string of titles of the sub-sections (see "submenu" of Reference Card)
Each item within a submenu can be a Simple Item, an Action Item, a Subdialog Item or, in turn, another Submenu Item.
It might be useful if you provide a bookmark to the title of a section that is broken down into a number of sub-sections (reflected by a submenu associated with the section title in your section menu). Then the users will be able to get a quick overview of the section, before clicking the items of the submenu one after another.
The article you are just reading is structured in that way. Try it: In the SectionMenu click any of the blue items - you will get to the corresponding section title. Then, clicking on the items of the associated submenu, you will get to the sub-sections.
A Submenu Items is good for structuring your Online Communication down to any detailing level. For example, move your cursor to the upper right corner of the screen. The SectionMenu popping up then is a collection of Simple Items (green) and Submenu Items (blue).
When the user moves over a Submenu Item with the mouse, the cursor turns to a hand (G).
A word of warning:
Technically, it is easy to build up a deeply structured menu with many nested submenus.
In terms of usability, however, it should be possible for users to see all their choices in one glance
(see Drop-Down Menus: Use Sparingly)
For a navigational menu, the least thing you can do is: Write a summary of what to expect from reading the sub-sections, place it at the super ordinate section and add a bookmark to it. So that your users can simply click the respective submenu item, read the summary and - if they want! - go down to the sub-sections. They should never feel forced to enter every sub-section!
previous next top
Action Item
For providing "play appeal" to your document (or, to be more serious, for offering user interactivity) you will want to associate some menu items with an activity: When the user clicks that item, this will trigger the associated activity.
A Simple Item can easily be made to an Action Item - simply add a suffix to its text:
…text…!…action…
The action suffix can be coded quite as usual in Javascript. It can be a single operation. If you want to trigger a multi-operation action, you should pack them all in a Javascript function, and code its function name + (argument list) as action suffix of the menu item.
Note that an Action Item can also link to a bookmark or URL. To that aim, code it as a prefix in the usual way (see Reference Card)
Default links are disabled for an Action Item (to avoid scrolling inadvertently). So, if you want a link to an Action Item, you should code it explicitly (even if it is a numeric bookmark).
When the user moves over an Action Item with the mouse, the cursor turns to a hand (G).
When the user clicks on an Action Item, the associated action is triggered first - followed by jumping to the destination given in the prefix, if any.
previous next top
Dialog Item
You can use an Action Item to launch a modal dialog, that is a branch to an extra window. The user is bound to handle that extra window first, before closing the modal dialog and returning to the original window.
Such a modal dialog calls for some coding effort. As well, one might argue, the users could feel "forced" to do what the computer expects of them, not really perceiving your Online Communication as a "helper" in their current situation.
Therefore it cannot be recommended whole-heartedly here. It might be better to use modal dialogs only for rather simple operations that will occupy the user for just a few seconds.
And, looking at it economically, the coding effort is justified only for user interaction that is common to a greater number of applications.
For example, the color table coming up when the user clicks the left button of a ColorSelect (which is part of many of the dialogs you will find in the demos, whenever selecting a color is offered) is a quick modal dialog. When the user clicks on any of the colors in the color table, that color is returned to the original window and the dialog is closed.
previous next top
Input Arguments
A modal dialog is called by a code line like the following:
result = showModalDialog(sURL[,sArguments[,sFeatures]])
| sURL |
String with the name or Internet-address of the HTML-document to be presented on screen during the dialog. I.e. HTML-file holding all the implementations of dialog steps you want to offer to the user. |
| sArguments |
Optional. String with all the input arguments you want to pass over to the modal dialog. How this string is composed is very much depending on the dialog (as implemented in the file sURL )
A good format is simply collecting arguments in a form similar to options, i.e.
keyword1="argument1 keyword2=argument2 … … …"
|
| sFeatures |
Optional. String specifying the window ornaments for the dialog box. It can be a combination of the following values.
| dialogWidth:number |
Sets the width of the dialog window. |
| dialogHeight:number |
Sets the height of the dialog window. |
| dialogTop:number |
Sets the top position of the dialog window relative to the upper-left corner of the desktop. |
| dialogLeft:number |
Sets the left position of the dialog window relative to the upper-left corner of the desktop. |
| center:{yes|no|1|0} |
Specifies whether to center the dialog window within the desktop (default: yes). |
|
previous next top
Output Arguments
A good deal of the coding effort in the dialog file is required to pick the options apart and to interpret them correctly. Not before that you can start to process them in a way to offer alternatives to the users. Based on the user's response you can prepare the dialog outputs then and pass them back to the calling window.
Passing them back is just one code line:
window.returnValue = "…"
"…" is the string where you assembled all the dialog results. In the calling window they will be the return value of showModalDialog .
previous next top
Subdialog Item
By a FloatingMenu you can do better than offering a modal dialog - you can provide a subdialog:
- It comes up automatically when the user moves the cursor onto an item associated with it, and has it rest there for about ½ second. With a modal dialog the user has to click the item first.
- With a subdialog the user does not have to feel "forced" to handle the dialog first, before being able to return to the original window. (Well, you can exert some pressure - but it's a matter of taste if you should do that!)
- With a modal dialog the users tend to feel "cut off" the original window. A subdialog pops up right within the familiar environment.
- A subdialog requires considerably less coding effort than a modal dialog. You can use the user inputs directly to set features in the original window.
A subdialog is a very flexible tool. Details you can read in the following sub-sections. If you want to recall the formalism, look at Reference Card.
previous next top
Subdialog - HTML
In HTML, all you need to prepare for a subdialog is a DIV like the following:
<DIV ID="…" CLASS="popupDlg" STYLE="display:none">
:
:
</DIV>
Within that DIV you can code any number of input elements of any kind (e.g. button, text, SELECT, etc.) In addition to the standard HTML-inputs you can use any of the inputs described in Pedagogical Background of Online Communication.
The identifier of such a DIV is the same you write in the suffix of the corresponding subdialog item (see Reference Card).
previous next top
Subdialog - onopen=
In some applications you will want to initialize a subdialog before it is popping up. You can do that by an additional attribute in its DIV:
<DIV ID="…" CLASS="popupDlg" STYLE="display:none; width:…" ONOPEN="…">
:
:
</DIV>
The argument "…" of ONOPEN="…" is the name of the Javascript function doing the initialization.
previous next top
Subdialog - Closing
The flexibility of the Menu()-tools is reflected also by a number of methods of closing a subdialog:
Details on each of these methods you can read in the following sub-sections.
previous next top
Subdialog - Closing - Auto-closing
A subdialog (similar to a submenu) is closed automatically whenever another subdialog/submenu is about to be opened.
In the first instance, this is done just to avoid a confusing jumble of subdialogs/submenus open at the same time, perhaps even overlapping each other. The unsuspecting user would not know what to make of it.
But you can even use that method deliberately:
- Advantages:
- You need to code nothing particular for it. (Though auto-closing makes sense only if the subdialog has an attribute onclose="…" , and if there is a pertaining function "…" - see onclose=)
So it might be good for a "quick-and-dirty" application, intended only temporarily for yourself or your closest co-workers.
- It's good for quick handling of a menu if there's nothing specific to be done - simply go to the next subdialog.
- Disadvantages:
- For an outside user unknowingly getting into such an application, it tends to be distracting when something happens in an application without having done anything specific to bring it about.
- So, if your document will not be released to a closed circle of users (in particular, if it's designed to be published to an anonymous audience!) you better take some coding effort and use another method.
- Conclusion: "Know thy audience!"
previous next top
Subdialog - Closing - by onmouseout=
You can make a subdialog be closed when the user moves the cursor out of it. It's only one attribute more to code in the HTML of your subdialog: ONMOUSEOUT=
<DIV ID="…" CLASS="popupDlg" STYLE="display:none; width:…"
ONMOUSEOUT="CloseDiv(this)">
:
:
</DIV>
CloseDiv() is the Javascript function provided to help you integrate your subdialogs fully in the Menu()-concept.
this is a special feature provided by Javascript for referring to the current object. So, instead of "this" you could also code the identifier of the subdialog in which you want to use it.
Before applying this method, you should consider the following:
- Advantage: Relatively little additional coding effort. Though this method makes sense only if a subdialog has a function for output handling - see onclose=
- Disadvantages:
- For being user-friendly, this method is advisable only if the screen area of the subdialog is not too small.
Otherwise it is but too easy for a user not so familiar with handling a mouse to move out of it inadvertently.
- Somehow you should make the user aware of that moving the cursor out of the area of the dialog triggers closing it.
- So, once again you should be aware of the kind of users you are writing for!
previous next top
Subdialog - Closing - by OK/Esc-buttons
This method calls for the most coding effort, yet it is probably the user-friendliest way of closing a subdialog.
In the HTML-code of your subdialog there will be something like the following:
<CENTER>
<INPUT TYPE="Button" VALUE="OK" ONCLICK="Close…Dlg(…_dlg)">
<INPUT TYPE="Button" VALUE="Esc"
ONCLICK="…_dlg.style.display='none'">
</CENTER>
Close…Dlg(…_dlg) is the name of your Javascript function handling the results. (Of course, that's how it is called here for ease of understanding only. In your application you could call it differently.)
…_dlg is the identifier of your subdialog. (Again, you could call it differently, if you prefer another notation.)
Again, let's consider the pros and cons:
- Advantage: Very user-friendly, even for rather little knowledgeable users.
- Disadvantages:
- Considerable coding effort, in HTML and in Javascript as well.
- The buttons occupy some space. They will be justified only if there are several input elements in your subdialog anyway.
- If there's direct output, it would not be very user-friendly to rob the user of the time to click a button, just to close the subdialog!
previous next top
Subdialog - Result Handling
Closing a subdialog is just one side of the picture. If you don't have Direct Output, before closing there will be executed any function that is associated with the subdialog by an attribute onclose=. Details on both methods you can read in the following sub-sections.
previous next top
Subdialog - Result Handling - Direct Output
In many cases you will have only one input element in a subdialog (e.g. a ColorSelect, a Slider, etc.) Then it might be best to apply it directly - usually by a single code line like
objFloatingMenu.… = …
- This might be good in the interests of the users: Thus they can see immediately how it affects the application.
- It is also good for you: You have no other coding effort but that single line of code.
In terms of usability, however, you should use it considerately: Your users might tend to curse you if unknowingly they slipped into a situation that's next to impossible to reverse if that's not what they wanted; all they can do is starting all over again!
previous next top
Subdialog - Result Handling - Output by onclose=
In some applications you will want to handle the results of a subdialog before it is closed. You can do that by an additional attribute in its DIV:
<DIV ID="…" CLASS="popupDlg" STYLE="display:none; width:…" ONCLOSE="…">
:
:
</DIV>
The argument "…" of ONCLOSE="…" is the name of the Javascript function doing the result handling.
By the return value of that function you can control whether it should be closed now (return true) or kept on screen (return false).
For better usability of your application you should consider: If could be irritating to your users if they do something in order to close a subdialog, but it is kept on screen still. So, if your onclose-function for some reason decides to return false, there should be any indication WHY to the users!
previous next top
Special Items
FloatingMenu is a very flexible concept to present a great number of controls to the users. Currently are implemented:
- Conditional Items
Items that are always visible. But depending on a certain condition they are either available . When clicked, they are fully effective.
Or they are currently unavailable (greyed-out) and do not react when moved over by the mouse or when clicked.
- Optional Item
Items that, depending on the application, are either visible or supressed all the time. So it's easy to implement two versions of an application, the one with a certain feature included (thus requiring a certain menu item), the other without that feature + menu item.
Optional items can be any kind of item, including conditional items.
- Non-text Items
Items that are made up by any HTML construction, without any text. (Typical example: Icons, implemented by an <IMG tag.)
- Toolbar Items
Items that, just like subdialog items, launch a sub-dialog when the mouse is moved onto them and halted there for about ½ second. In contrast to subdialog items, however,
- this sub-dialog can be "detached" (dragged away from the menu, to any place on the screen),
- remain there (even when the menu is closed),
- toolbars can be resized (the individual toolbar items are automatically arranged),
- they are "auto-scrolling" (i.e. when the window is scrolled, the document is scrolled underneath the toolbar).
previous next top
Conditional Items
When talking about user interaction, you should keep some things in mind:
- Your readers are usually not at all familiar with the features offered in your document.
- They are not willing to take pains for coming to an understanding .
- You just cannot take for granted that they will know what to do in order to get any desired effect, or what are the obstacles to it.
- If they cann't get the desired effect within some 5-10 seconds - many of them will simply leave your document!
- So, virtually all features of your offerings should be presented explicitly on screen
(though only temporarily , for not to occupy precious screen space more than necessary).
When you have a number of various objects on screen, some features will apply only to some of the objects. For to be user-friendly, all the other features offered in your FloatingMenu should be disabled (and the corresponding menu item grayed out). When the user clicks on any other object, these items will be restored and other items are disabled/grayed out.
You can do that by making each of these items conditional - in front of such an item, code the condition and a question mark ('?'):
condition?item as usual
The item itself is to be coded quite normally, be it a simple item, submenu item, action item, dialog item or subdialog item. The conditional clause is simply an additional prefix.
For coding the conditional clause, you should know three things:
- The condition can be referring to a global variable, or to the object right-clicked by the user when launching the FloatingMenu.
- The conditional clause should be coded as it would be in Javascript, with '~' (hex 7E, decimal 126) representing the object right-clicked by the user.
- For factoring-out, the shortcut '~' cannot be used. Code "objRclick" instead.
Examples:
The following codes are valid condition clauses:
| width |
global variable 'width' is checked for != 0 |
| ~.className == 'class1' |
'~' shortcut for the object right-clicked by the user |
| (~.length % 6 || ~.style.borderColor == 'red') ^ ~.parentElement.tagName != 'A' |
condition can be of any complexity |
cond = "0 < obj.width && 10 > width";
FloatingMenu("cond?...item..." |
'<', '>', '&' would be taken as being part of a HTML symbol ('<...>' or '&...;'), so they should be factored out |
cond = "0 < objRclick.width && 10 > width";
FloatingMenu("cond?...item..." |
For factoring-out, the shortcut '~' has to be replaced by objRclick |
previous next top
Optional Item
A FloatingMenu is handy over a great range of applications. Among them there may be such applications that differ only in one or a few features, calling for new menu items. So it seems to be necessary to provide them with different FloatingMenus.
Or, just code those menu items as "Optional Items" - such as this:
FloatingMenu(
:
cond? "…" : " ",
:
);
| cond |
condition depending on which the item will be included or not |
| "…" |
item to include optionally, coded just like any other item (it can also be a conditional item!) |
| " " |
alternative for syntactically correct coding - note the blank space between the quotes! |
previous next top
Non-text Items
You know that any combination of plain text and HTML tags may be used for a menu item (see text in section Reference Card)
That idea taken to the extreme, a menu item can even by a wild construction of HTML tags, with or without any text.
If you want to handle the layout yourself onmouseover and onmouseout , you might want to disable style entry .ActionMenuItem:hover in file OnlineComm.css . When doing that, be sure not to mix up text and non-text items in one menu! (In example 3 you will learn a trick how to get around this restriction.) Another frequent error source is the nesting of single and double string quotes.
Note: In the following coding schemes the string of the non-text item had to be broken over several lines. In real coding this would result in an error message - a string is expected to be coded without a line break!
Three examples of non-text menu items seem worth to have a closer look at:
- Menu item = <DIV> … </DIV>
- Menu item = 1-cell table
- Menu item = <IMG>
Menu item = <DIV> … </DIV>
There's very much you can do within tags <DIV> … </DIV> You can change the wording, the background, the border, etc.
For a simple example, let's look at a button-like item changing its layout when the mouse is moving over it:
FloatingMenu ( ...,
...,
"<DIV STYLE='border:3px outset; …' onmouseover='Border(this,1)'
onmouseout='Border(this,0)'>… item text … </DIV>!… action …",
...,
...)
Function Border is very simple:
function Border(obj,type)
{
if(type) obj.style.borderStyle = "inset";
else obj.style.borderStyle = "outset";
}
Now the menu item initially looks like a protruding button. When the mouse is moved onto it, it looks like the button being pressed. When the mouse is moved out, the button seems to return to protruding.
back: "Non-text Items"
Menu item = 1-cell table
In this example you can see how to implement a bistable "flat button" (as you will know from many software applications). This time let's use a very versatile HTML layout, a 1-cell table:
FloatingMenu ( ...,
...,
"<TABLE><TR><TD STYLE='border:2px solid yellow' onclick='Lock()'
onmouseover='Border(this,1)' onmouseout='Border(this,0)'>
… item text …</TD></TR></TABLE>!… action …",
...,
...)
Functions Lock and Border are again very simple:
var locked = false; // global variable
function Lock()
{
if(locked) locked = false;
else locked = true;
}
function Border(obj,type)
{
if(!locked)
if(type) obj.style.borderStyle = "outset";
else obj.style.borderStyle = "solid";
}
This time the button seems to be fully integrated in its environment (the yellow menu background). When the mouse is moved onto it, it seems to protrude. When the mouse is moved away, it returns back into the environment - except if the button was clicked meanwhile: then it remains in that layout, until it is clicked again. (The action should be designed expediently, of course.)
back: "Non-text Items"
Menu item = <IMG>
A bit too complicated, the previous example? You can do it quite simply, by including any graphic instead of the item text:
FloatingMenu ( ...,
...,
"<IMG src='symbol1.ico' onmouseover='Ico(this,1)'
onmouseout='Ico(this,0)'>!… action &",
...,
...)
Function Ico is just changing the src of the <IMG> :
function Ico(obj,type)
{
if(type) obj.src = "symbol2.ico";
else obj.src = "symbol1.ico";
}
This time the menu item is a graphic symbol ( symbol1.ico ) When the mouse is moved onto it, it changes to symbol2.ico , and back to symbol1.ico when the mouse is moved away. If both graphics are designed appropriately, this can make a very eye-catchy effect!
Trick: A graphic symbol covers its background completely, i.e. not even its background color is visible. You can make use of that by leaving style entry .ActionMenuItem:hover in file OnlineComm.css active. Now you can have text and non-text items mixed up in a menu. (With a minor drawback: text and non-text items should have the same width.)
back: "Non-text Items"
previous next top
Toolbar Items
A FloatingMenu can also be used to launch sub-menus in form of toolbars. That is, the sub-menu items can be represented by a combination of text and non-text items, all in a horizontal row or in any other block (with items rectangular arranged, or whatever you like).
To do that, treat such a sub-menu just like a normal sub-dialog. Instead of any user-inputs, however, provide any text or non-text items, as you saw in the previous section.
You can do that with any of the methods outlined in the previous section. The third one, however, with <IMG> for presenting graphic symbols, delivers the most compact sub-menu. That's why in the following coding schemes we will concentrate on this method.
The FloatingMenu is very straightforward:
FloatingMenu(…
"… Item text …$icos,…",
...
)
The toolbar (or "sub-menu", if you like) icos looks like this:
<DIV id=icos CLASS=popupDlg STYLE="display:none; width:…">
<IMG src='….ico' STYLE='border:1px solid yellow; float:left'
onmouseover='Ico(this,1)' onmouseout='Ico(this,0)'
ALT='… indicate action …' onclick="… action …">
<IMG … >
<IMG … >
<IMG … >
</DIV>
A toolbar-like sub-menu is coded according to the same rules as you saw in sub-section Subdialog - HTML. With one inline style in addition:
width:…
The <IMG> coding, representing the toolbar/menu items, should have at least one additional inline style:
float:left
First you will have to fiddle about the best width , but soon you will have some "feeling" for it: With a very large width all the items will be arranged in a horizontal row. If you want to have them arranged rectangular, try a smaller width .
You want any action to be triggered when the user clicks a graphic symbol. You can have that by an entry
onclick="… action …"
Now, with graphic symbols instead of explicit designation, you can have a very compact, aesthetic toolbar. The price for that is a loss of user-friendliness. To make up for that, it will be a good idea to include within the <IMG> coding:
ALT='… indicate action …'
Function Ico() is the same as in the previous section.
previous next top
Reference Card
FloatingMenu([w[,x[,y]];]item[;… … …])
| item |
::= |
[[condition?][prefix@]text[suffix]]
For an empty item, a separator (= horizontal line) is placed in the menu. |
| condition |
::= |
Javascript-like code referring to the object right-clicked by the user in order to have the FloatingMenu launched.
As a shortcut, this object can be symbolised by '~' (hex 7E, decimal 126).
If this object is referred to only at the beginning of the condition, the '~' can be omitted. |
| prefix |
::= |
URL[>target] | #bookmark[>target] |
| URL |
::= |
any Internet address of an external document (if online), file, or folder (if offline) |
| bookmark |
::= |
any bookmark within the document (default: bookmarks 1 11 111 2 21 , etc.) |
| target |
::= |
window or frame at which to target the contents, or _blank , _parent , _self , or _top |
| text |
::= |
any sequence of characters (except ! $ [ ; );
for an empty item a horizontal line (= separator) is generated |
| suffix |
::= |
!action | $subdialog | [submenu] |
| action |
::= |
Any Javascript-code representing the action to be taken when the user clicks this item. Can be single action step or calling a Javascript function combining several steps. |
| submenu |
::= |
[w[,x[,y]];]item; … … …
|
| w |
::= |
Numeric Argument: Menu width (overrides automatic width estimate) |
| x |
::= |
Numeric Argument: horizontal displacement, referring to top-left corner of parent menu. (If omitted, menu or subdialog is launched aligned with the associated item. x is ignored for main menu.) |
| y |
::= |
Numeric Argument: vertical displacement, referring to top-left corner of parent menu. (If omitted, menu or subdialog is launched aligned with the associated item. y is ignored for main menu) |
| subdialog |
::= |
id[,x[,y]]
id = Identifier of DIV to be launched when cursor is moved onto the item. (Formalism: see Javascript naming conventions.) x, y like above.
|