Can I use button click to open popup menu?

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Can I use button click to open popup menu?

Post by codlord »

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.
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

One button

Post by Migru »

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
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

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.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

Do you have a link, or can you post the code you have for the popup so we can test?

Ruth
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

Ruth wrote:Hi,

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
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

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: 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();
Button HTML that is not working right:

Code: Select all

<input 
type="button" 
value="Options" 
id="options_button2" 
name="options_button2"
onMouseDown="popup('options_menu', 'options_button2');" 
onMouseOut="popdown();"></input>
menu settings/styles:

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";
}
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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: 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> 
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: Select all

<button onclick="ShowHide(true)">Show</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: Select all

var mainVisState   = true;

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: Select all

aI("text=Main on/off;url=javascript:toggleMainVis();status=Toggle Main on/off;");
Hope this helps.

Ruth
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

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: 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>
NOTE the keepalive=1;

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>
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?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

Yes that second link of kevins had the info I was after, so the function can be simplified and now becomes:

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;
}
and you don't seem to have to put the keepalive=1 on the menus either.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

Ruth wrote: Would you object if I made a demo of it?
No, not at all, I hope it helps someone else.
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by Andy »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Andy, it seems to work with the onclick, onmousedown doesn't but I guess those are really the same?

Code: Select all

<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
codlord
Advanced
Advanced
Posts: 20
Joined: Thu Sep 05, 2002 10:20 am
Location: UK

Post by codlord »

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
Post Reply