Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:22
Can I use button click to open popup menu?
Poster: codlord
Dated: Monday December 5 2005 - 12:03:53 GMT
I am trying to do something like the menu sample "Using The Popup Menu Function Positioned by Images":
http://www.milonic.com/menusample24.php
But I want to use a html button for my menu rather than text or images. Now this works o.k. with the onmouseover=popup and onmouseout=popout BUT I dont want the menu to work on mouseover, I want the users to press the button to see the popup menu.
If I use onClick=popup then nothing seems to happen.
If I use onMouseDown=popup then the menu does popup but it immediately pops down again when the mousebutton is released (I guess becuase the pointer is not over a menu object) even with no popdown event.
Is there a way to do what I want to do?
Latest menu release (5.736) and same on IE and Firefox.
One button
Poster: Migru
Dated: Monday December 19 2005 - 13:03:32 GMT
Hi,
why does it necessarily have to be an "HTML" Button to start the menu?
I would do it using a one button milonic menu, e.g. with a "bgimage" and an "overbgimage", "text", "openonclick" and "showmenu" property, which opens required or requested submenu items on mouseclick. It has not necessarily to be specified according to the Popup Function (sample24). It could be anyone of the samples, in this case may be one of the image based samples, but having only one item defined as main menu.
Michael
Poster: codlord
Dated: Monday December 19 2005 - 13:24:25 GMT
I want it to be a standard html button becuase we have other buttons on the screen and I want the "menu" button to look exactly the same as the other buttons.
I know I can use a graphic as a button or have a menu that looks a bit like a button but that does not solve the problem - it must be exactly like the other buttons on screen.
Basically this whole idea came about becuase we were using on-screen buttons for options in one of our products, but the number of options is getting too many so we want to now use a button that opens a mini-menu, BUT we still need some buttons to be normal buttons next to this "menu" button (for reasons I won't go into) so we can't just remove all the buttons and use a menu.
Poster: Ruth
Dated: Monday December 19 2005 - 13:24:33 GMT
Hi,
Do you have a link, or can you post the code you have for the popup so we can test?
Ruth
Poster: codlord
Dated: Monday December 19 2005 - 13:26:06 GMT
Ruth wrote:
Hi,
Do you have a link, or can you post the code you have for the popup so we can test?
Ruth
Do you have a link, or can you post the code you have for the popup so we can test?
Ruth
It's internal at the mo, but let me see if I can put a sample up on the web...
Thanks
Poster: codlord
Dated: Monday December 19 2005 - 13:52:02 GMT
Here is a test case so you can see what I am on about:
http://www.bluestar-software.co.uk/test/
Menu used in the sample:
Code:
with(milonic=new menuname("options_menu"))
{
style=vertStyle;
margin=3;
aI("text=Option 1;url=#;");
aI("text=Option 2;url=#;");
aI("text=Option 3;url=#;");
}
drawMenus();
{
style=vertStyle;
margin=3;
aI("text=Option 1;url=#;");
aI("text=Option 2;url=#;");
aI("text=Option 3;url=#;");
}
drawMenus();
Button HTML that is not working right:
Code:
<input
type="button"
value="Options"
id="options_button2"
name="options_button2"
onMouseDown="popup('options_menu', 'options_button2');"
onMouseOut="popdown();"></input>
type="button"
value="Options"
id="options_button2"
name="options_button2"
onMouseDown="popup('options_menu', 'options_button2');"
onMouseOut="popdown();"></input>
menu settings/styles:
Code:
_menuCloseDelay=500;
_menuOpenDelay=50;
_scrollAmount=3;
_scrollDelay=20;
_followSpeed=5;
_followRate=40;
_subOffsetTop=0;
_subOffsetLeft=0;
fixMozillaZIndex=true;
with(vertStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, arial, tahoma";
fontsize="10";
fontstyle="normal";
headerbgcolor="#AFD1B5";
headerborder=1;
headercolor="#000099";
image="/images/menu/18_blank.gif";
imagepadding=3;
menubgimage="/images/menu/menu_background.gif";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#FEFAD2";
onborder="1px solid #999999";
oncolor="#000000";
onsubimage="/images/menu/submenu_on.gif";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
padding=3;
pagebgcolor="#CFE2D1";
pagecolor="#000066";
separatoralign="right";
separatorcolor="#999999";
separatorpadding=1;
separatorwidth="85%";
subimage="/images/menu/submenu_off.gif";
menubgcolor="#F5F5F5";
}
_menuOpenDelay=50;
_scrollAmount=3;
_scrollDelay=20;
_followSpeed=5;
_followRate=40;
_subOffsetTop=0;
_subOffsetLeft=0;
fixMozillaZIndex=true;
with(vertStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, arial, tahoma";
fontsize="10";
fontstyle="normal";
headerbgcolor="#AFD1B5";
headerborder=1;
headercolor="#000099";
image="/images/menu/18_blank.gif";
imagepadding=3;
menubgimage="/images/menu/menu_background.gif";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#FEFAD2";
onborder="1px solid #999999";
oncolor="#000000";
onsubimage="/images/menu/submenu_on.gif";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
padding=3;
pagebgcolor="#CFE2D1";
pagecolor="#000066";
separatoralign="right";
separatorcolor="#999999";
separatorpadding=1;
separatorwidth="85%";
subimage="/images/menu/submenu_off.gif";
menubgcolor="#F5F5F5";
}
Poster: Ruth
Dated: Monday December 19 2005 - 16:04:08 GMT
Hi,
I haven't been able to figure out how to use a click with the popup, however, if you know how to use functions and change things I have two that might work. You'd have to experiment.
Function 1 uses two buttons, and I don't know how to change it so that you can click just one button, click to show and if it is showing, then click the same to hide. The menu will appear, and if the submenu is moused over and mouse moves off it will close without a click, that's built into the menu programming.
Code:
<script type="text/javascript">
function mm_showMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
if (arguments.length > 1) _m[getMenuByName(menuName)][7] = arguments[1];
popup(menuName);
}
function mm_hideMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
var menuNum = getMenuByName(menuName);
if (arguments.length > 1) {
_m[menuNum][7] = arguments[1];
}
menuDisplay(menuNum, 0);
}
function ShowHide(show) {
debugger
if (show) {mm_showMenu("options_menu")}
else {mm_hideMenu("options_menu")}
}
</script>
function mm_showMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
if (arguments.length > 1) _m[getMenuByName(menuName)][7] = arguments[1];
popup(menuName);
}
function mm_hideMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
var menuNum = getMenuByName(menuName);
if (arguments.length > 1) {
_m[menuNum][7] = arguments[1];
}
menuDisplay(menuNum, 0);
}
function ShowHide(show) {
debugger
if (show) {mm_showMenu("options_menu")}
else {mm_hideMenu("options_menu")}
}
</script>
I put that on the page you had right after the call for the menu_data_v5.js file.
From this point you have two choices, you can put that options_menu back in the menu data file, or put it on the page like it is, but you have to put in a position for the menu, either an absolute position, or position="relative";
If position="relative"; is used, it seems to open just above the button.
The button code is:
Code:
<button onclick="ShowHide(true)">Show</button>
<button onclick="ShowHide(false)">Hide</button>
<button onclick="ShowHide(false)">Hide</button>
The other function is one that was used in the menu itself, but I don't see why it wouldn't work using a button. It does only use one 'item' to click it on and off so I think that would allow you to use one button for the purpose.
Code:
var mainVisState = true;
function toggleMainVis()
{
mainVisState = !mainVisState;
mm_displayMenu("mainmenu", mainVisState);
}
function toggleMainVis()
{
mainVisState = !mainVisState;
mm_displayMenu("mainmenu", mainVisState);
}
Since I couldn't figure out how to use this one on the page, I have no idea how you'd set it up. The IE Filters and Transitions Demo has this function working. It is in the menu, but as far as I know you should be able to use it on a page instead.
The function I posted above is in the mm_filters.js file and the call for it in the menu_data.js file is
Code:
aI("text=Main on/off;url=javascript:toggleMainVis();status=Toggle Main on/off;");
Hope this helps.
Ruth
Poster: codlord
Dated: Tuesday December 20 2005 - 15:22:51 GMT
Right, I finally figured out how to roughly do what I want using a some javascript wizzyness gleaned from various posts on these forums, so....
Define a function to toggle visibility and a couple of menus for the buttons (I may want more than one "button" menu on one page):
Code:
<script language="JavaScript" type="text/javascript">
var menuState = new Array();
function toggleObjectMenu(menuName, objectName)
{
var menuNum = getMenuByName(menuName);
// Initialise the menu state if not previously set
if (menuState[menuNum] == null)
{
menuState[menuNum] = false;
}
if(menuState[menuNum])
{
// hide the menu
menuDisplay(menuNum, false);
}
else
{
// show the supplied menu attached to the supplied object
popup(menuName, objectName);
}
// reverse the display state
menuState[menuNum] = !menuState[menuNum];
}
with(milonic=new menuname("options_menu3"))
{
style=vertStyle;
margin=3;
keepalive=1;
aI("text=Option 3-1;url=#;");
aI("text=Option 3-2;url=#;");
aI("text=Option 3-3;url=#;");
}
with(milonic=new menuname("options_menu4"))
{
style=vertStyle;
margin=3;
keepalive=1;
aI("text=Option 4-1;url=#;");
aI("text=Option 4-2;url=#;");
aI("text=Option 4-3;url=#;");
}
drawMenus();
</script>
var menuState = new Array();
function toggleObjectMenu(menuName, objectName)
{
var menuNum = getMenuByName(menuName);
// Initialise the menu state if not previously set
if (menuState[menuNum] == null)
{
menuState[menuNum] = false;
}
if(menuState[menuNum])
{
// hide the menu
menuDisplay(menuNum, false);
}
else
{
// show the supplied menu attached to the supplied object
popup(menuName, objectName);
}
// reverse the display state
menuState[menuNum] = !menuState[menuNum];
}
with(milonic=new menuname("options_menu3"))
{
style=vertStyle;
margin=3;
keepalive=1;
aI("text=Option 3-1;url=#;");
aI("text=Option 3-2;url=#;");
aI("text=Option 3-3;url=#;");
}
with(milonic=new menuname("options_menu4"))
{
style=vertStyle;
margin=3;
keepalive=1;
aI("text=Option 4-1;url=#;");
aI("text=Option 4-2;url=#;");
aI("text=Option 4-3;url=#;");
}
drawMenus();
</script>
NOTE the keepalive=1;
Now the html for the buttons:
Code:
<input type="button" value="Options 3" id="options_button3" name="options_button3" onMouseDown="toggleObjectMenu('options_menu3', 'options_button3');"></input>
<input type="button" value="Options 4" id="options_button4" name="options_button4" onMouseDown="toggleObjectMenu('options_menu4', 'options_button4');"></input>
<input type="button" value="Options 4" id="options_button4" name="options_button4" onMouseDown="toggleObjectMenu('options_menu4', 'options_button4');"></input>
So click a button to display the menu attached to the button and click again to hide it. Moving the mouse off the menu/button will NOT close it - but this is probably o.k. for my use.
I would like to know if it is possible to get the current display state from the milonic javascript (so I don't have to use my own menuState javascript array) - anyone know if this is possible?
Poster: Ruth
Dated: Tuesday December 20 2005 - 15:52:37 GMT
Hi,
I have not a clue.
I don't know how to do functions. However, I found two posts about visibility with functions that Kevin wrote. I know he did his functions based on the menu so maybe they have the info you need.
http://www.milonic.com/forum/viewtopic.php?t=5311
http://www.milonic.com/forum/viewtopic.php?t=5246
Also, there is a function to close a menu with a click on an item. So, you could put that into the open keepalive submenus and people could click to close them.
http://www.milonic.com/forum/viewtopic. ... 6924#27162
If these are what you need for the visibility question you asked, would you post the function back here? I don't know how to make them and I keep links to all the functions I can figure out how to implement to respond to questions asking for some way to do x, y or z
Ruth
Poster: Ruth
Dated: Tuesday December 20 2005 - 15:59:14 GMT
I found one more, which I think also looks to the visible state, though it's not expressly said that way.
http://www.milonic.com/forum/viewtopic.php?t=5447#26314
Ruth
Poster: codlord
Dated: Tuesday December 20 2005 - 16:11:05 GMT
Yes that second link of kevins had the info I was after, so the function can be simplified and now becomes:
Code:
function toggleObjectMenu(menuName, objectName)
{
var menuNum = getMenuByName(menuName);
var visibleState = _m[menuNum][7];
if(visibleState)
{
// hide the menu
menuDisplay(menuNum, false);
}
else
{
// show the supplied menu attached to the supplied object
popup(menuName, objectName);
}
// reverse the display state
_m[menuNum][7] = !visibleState;
}
{
var menuNum = getMenuByName(menuName);
var visibleState = _m[menuNum][7];
if(visibleState)
{
// hide the menu
menuDisplay(menuNum, false);
}
else
{
// show the supplied menu attached to the supplied object
popup(menuName, objectName);
}
// reverse the display state
_m[menuNum][7] = !visibleState;
}
and you don't seem to have to put the keepalive=1 on the menus either.
Poster: Ruth
Dated: Tuesday December 20 2005 - 16:54:30 GMT
Hi,
I want to thank you for posting back the function. That works really nice.
Would you object if I made a demo of it?
Ruth
Poster: codlord
Dated: Tuesday December 20 2005 - 17:06:09 GMT
Ruth wrote:
Would you object if I made a demo of it?
No, not at all, I hope it helps someone else.
Poster: Andy
Dated: Tuesday December 20 2005 - 17:14:23 GMT
Ruth, just thought I'd better step in here before you do anything.
This has actually been fixed in version 5.738 due for release any minute now.
Let me know if this is what you are looking for
Cheers,
Andy
Poster: Ruth
Dated: Tuesday December 20 2005 - 17:49:00 GMT
Andy, it seems to work with the onclick, onmousedown doesn't but I guess those are really the same?
Code:
<INPUT onClick="popup('options_menu', 'options_button2');" id=options_button2 onmouseout=popdown(); type=button value=Options name=options_button2></INPUT>
The only thing not the same is with the function it sets it so a click opens it and a click on the same button closes it which I guess keepalive and a close button in the submenu would be the solution for that?
Thanks
Ruth
Poster: codlord
Dated: Wednesday January 4 2006 - 17:39:54 GMT
Just to update this thread, the latest version (5.739) does indeed seem to sort this issue, so using my initial test case with the popup in the onClick attribute of the button opens up the menu and it stays open until you mouseout of the button or menu.
Thanks