Can I use button click to open popup menu?
Can I use button click to open popup menu?
I am trying to do something like the menu sample "Using The Popup Menu Function Positioned by Images":
http://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.
http://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
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
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
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.
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.
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:
Button HTML that is not working right:
menu settings/styles:
http://www.bluestar-software.co.uk/test/
Menu used in the sample:
Code: Select all
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();
Code: Select all
<input
type="button"
value="Options"
id="options_button2"
name="options_button2"
onMouseDown="popup('options_menu', 'options_button2');"
onMouseOut="popdown();"></input>
Code: Select all
_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";
}
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.
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:
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.
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
Hope this helps.
Ruth
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: Select all
<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>
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: Select all
<button onclick="ShowHide(true)">Show</button>
<button onclick="ShowHide(false)">Hide</button>
Code: Select all
var mainVisState = true;
function toggleMainVis()
{
mainVisState = !mainVisState;
mm_displayMenu("mainmenu", mainVisState);
}
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: Select all
aI("text=Main on/off;url=javascript:toggleMainVis();status=Toggle Main on/off;");
Ruth
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):
NOTE the keepalive=1;
Now the html for the buttons:
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?
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: Select all
<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>
Now the html for the buttons:
Code: Select all
<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>
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?
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.
viewtopic.php?t=5311
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.
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
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.
viewtopic.php?t=5311
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.
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
I found one more, which I think also looks to the visible state, though it's not expressly said that way.
viewtopic.php?t=5447#26314
Ruth
viewtopic.php?t=5447#26314
Ruth
Yes that second link of kevins had the info I was after, so the function can be simplified and now becomes:
and you don't seem to have to put the keepalive=1 on the menus either.
Code: Select all
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;
}
Andy, it seems to work with the onclick, onmousedown doesn't but I guess those are really the same?
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
Code: Select all
<INPUT onClick="popup('options_menu', 'options_button2');" id=options_button2 onmouseout=popdown(); type=button value=Options name=options_button2></INPUT>
Thanks
Ruth