May 2016. wSurvey javascipt functions for creating dropdown menus (changed function names on May 2020)
wsurveyDropdown.js support two different functions for creating dropdown menus.
a) ws_dropDownMenu. Single level menus. Fairly quick and easier to specify.
b) ws_dropDownMenu_multiple. Multiple level menus. A bit more trouble to specify.
See wsurveyDropDownText.htm for working examples
Warning: ws_dropDownMenu created menus don't seem to work properly when placed after ws_dropDownMenu_multiple menus (screen placement problems)
1) Installation
This requires jQuery. So, in your docmuent specify something like:
---------------------------
2) ws_dropDownMenu: Quickly create 1-level dropdown menus.
The ws_dropDownMenu function can be used to quickly create a simple, but not too simple, drop down menu
Description:
A dropdown menu has two compontents;
1) the "button" : clicking, or mouseOvering, the button causes the dropdown menu to appear
Example: input type="button" value="options..." id="ddButton"
2) the "menu" : a list, or table, or whatever that is displayed; typically it contains links or action buttons
Example:
You must identify the button, and the menu
You can also specify a number of display options : defaults are used otherwise.
Useage:
Call, say in an onLoad function or document.ready():
astat= ws_dropDownMenu(buttonId,menuId,options)
and specify
a "button" with an id of buttonId (such as an ), and
the menu in a container with id of menuId (such as
Syntax:
astat= ws_dropDownMenu(buttonId,menuId,options)
where:
buttonId: the id of an element to be used as the "button".
menuid: the id of an element that contains the menu to display
Note: the "menu" need not contain any choices : you can put purely descriptive content in this "menu" container
options: an object containing options, structured as {'opt1':val1,'opt2':val2,...}
astat: return code. If success, will be '1'. Otherwise, an error message (such as "No matching id for button")
The code for the menu container can be written anywhere (i.e.; at the bottom of the html file). It will be respositioned to be
next to the button (see the rightOffset and topOffset options below).
The supported options:
menuClass : A CSS class to assign the menu.
If not specified, a default of ws_dropdownMenuClass is used (a CSS stylesheet of this name will be added to the document).
This default assumes that the menu is specified using a
list. It will display this list
using small boxes (with no preceding bullets) that are outlined as the mouse goes over them.
Notes:
* to NOT add a class to the menu container (i.e.; you specified one explitily), use: 'menuClass':''
* if you do not specify a menuClass, or the menuClass=ws_dropdownMenuClass, then the menu's position will be set to absolute.
* if you do not use the default, you will have to specify mouseover behavior (when the default is used, appropriate events are added
to the
elements in the
under the container with an id of menuid)
buttonClickOn : clicking on the button will cause the menu to open until further notice.
buttonClickOn:0
the menu is open while the mouse is over the button, and for a few seconds after the mouse goes off of it.
buttonClickOn:1 (the default)
Clicking the button toggles display, even when the mouse is off of the button. That is, click once to display,
and click again (at a later time) to hide (once the mouse is no longer over the button)
buttonClickOn:2
Toggle display, but do NOT display on mouseOver.
delayOnEnter : how long the mouse has to hover over the button before opening the menu (in milliseconds).
This is used to avoid nuisance openings (say, while the user is moving the mouse and just happens to go over the opener button).
Default is 500 (1/2 second).
leftOffset and topOffset
Determines location of the upper right corner of the menu, relative to the button.
Measurments are in pixels (might add em option later)
If not specified, values of leftOffset:10 and topOffset:25 are used (so the top of the menu container is 25 pixels below the
top of the button)
To suppress repositioning, use leftOffset:'' or topOffset:'' (either one will suppress both)
useFixed: If 1, then the positon (as modified by leftOffset and topOffset is "fixed" -- it is at a fixed location on the screen
And, it will have a z-index of 10.
This can be useful to make sure the menu appears on top, even if the menu-invocation button is an small container
That is: in this case (button in small container) the menu will appear in the container (you would have to scroll down to
view the menu options)
timeWait :
Number of seconds to keep menu open once the mouse leaves the button. The default is 3000 (3 seconds).
Notes:
* once the mouse leaves the button, the menu will "fade" (so the timeWait is the duration of the fadeOut).
* when the button is over the menu, any fadeout is reversed (full visibility is restored)
* once the mouse leaves the menu, the menu fades quickly (in a half second). That is not subject to change via an option!
closer:
id of a button within the menu (typically, a button)
An onClick event is added that will close the menu.
Thus: when the button (with an id equal to the value of the options.closer) is clicked, the menu is
fades away quickly.
This can be useful as an alternate way of closing (in addition to moving the mouse off the menu, or
re-clicking the buttonid "opener" button)
---------------------------
3) ws_dropDownMenu_multiple: Create multiple-level dropdown menus.
Description:
This will create dropdown menus from a set of (nested)
lists
Useage:
Call, say in an onLoad function or document.ready():
ws_dropDownMenu_multiple()
and
assign a wsDropDown class to
lists you wish to display as multi-level dropdown menus
Details:
1) Create a
list that may contain other
lists (as many levels deep as you wish)
2) In the "top level"
, include a wsDropDown class (i.e.; class="wsDropDown")
3) Each