We're using the milonic menu to develop a filter system, whereby a user can choose a different filter from the list and the page doesn't change its url. We show which filter is activated by changing the icon from a transparent gif to a tick gif. How can we change this icon on the fly, without reloading the menu
thanks
rich
Update images (menu icons) on the fly
So... basically, you want the checkmark to move to the selected item, and the previously-checked item to revert back to unchecked, right?
You should be able to do this by manipulating the menu item array, changing the image references (codeRef 29) for the item to be checked and the item to be unchecked. You could use the global variable, _itemRef, to track which item was clicked, and keep track of the other item in your own global. Sort of like this:
The call to BDMenu() may not be necessary, but I suspect that it will be. Since your submenu does not close when you make a menu selection (because you're using an iframe), the call to BDMenu() should force the submenu to redraw after a menu selection; the redraw should display the reset menu images. If you want the submenu to close when a user makes a selection, try setting closeAllOnClick=true; in the global menu properties (typically at the top of menu_data.js, where _menuCloseDelay etc. are defined. Note, no underscore at the beginning of closeAllOnClick).
Add the call to mm_changeChecked() to the setTableUrl() function that you're already calling when one of those filter items is clicked.
Cheers,
You should be able to do this by manipulating the menu item array, changing the image references (codeRef 29) for the item to be checked and the item to be unchecked. You could use the global variable, _itemRef, to track which item was clicked, and keep track of the other item in your own global. Sort of like this:
Code: Select all
var mm_checkedItem; // global to track currently checked item
function mm_changeChecked()
{
_mi[mm_checkedItem][29] = "/imagepath/transparent_image.gif";
_mi[_itemRef][29] = "/imagepath/check_image.gif";
mm_checkedItem = _itemRef;
BDMenu(_mi[_itemRef][0]);
}Add the call to mm_changeChecked() to the setTableUrl() function that you're already calling when one of those filter items is clicked.
Cheers,
Hmmm... the error is probably because there's no initial value assigned to mm_checkedItem (assuming you kept that name), so it actually is null the first time the function runs. Two ways to deal with that... the better way will depend on whether you initially have a (default) check mark next to one of the filter options or not. Is one of the options checked by default when the menu is first generated? If so, is it always the same item, or is that stored in a database or cookie, so that the item that's initially checked can varry from user to user and/or visit to visit?
I would recommend against putting any custom code in milonic_src.js; if you do, it'll be lost when you update to the next code release (which is already out BTW). It'd be better to put it in menu_data.js.
Cheers,
Kevin
I would recommend against putting any custom code in milonic_src.js; if you do, it'll be lost when you update to the next code release (which is already out BTW). It'd be better to put it in menu_data.js.
Cheers,
Kevin
Yes we have a default filter initially selected (and stored by a session variable within the asp). I cvan set the variable to hold this, but it means the mm_checkedItem will be held within the asp page not the javascript include file, which is a bit of a drag, but not the end of the world.
what is the syntax for setting the initial value of the mm_checkedItem?
and thanks for the heads up on the code location - i've moved it to menu_data.js
what is the syntax for setting the initial value of the mm_checkedItem?
and thanks for the heads up on the code location - i've moved it to menu_data.js
So... you're generating the menu code dynamically, with asp. It's pretty easy to pass a vaue from asp to js (you probably know how already), but the trick will be which value to pass, and then how to convert that from the asp representation to an index into milonic's _mi[] array.
It'll be easier if the initial filter is always the same when a person comes to your site. Is that the case (always starts with the same filter), or does it use the last one they used on their previous visit to your site (or something else)?
Cheers,
Kevin
It'll be easier if the initial filter is always the same when a person comes to your site. Is that the case (always starts with the same filter), or does it use the last one they used on their previous visit to your site (or something else)?
Cheers,
Kevin
The session variable value "group" will be equal to the text of the filter, we can handle the ASP side
basically if you can tell me how to set the initial check item, and whether its done based on the menu filter name or its item number (vertically down the submenu) and the syntax for that, think i can populate the initial value
basically if you can tell me how to set the initial check item, and whether its done based on the menu filter name or its item number (vertically down the submenu) and the syntax for that, think i can populate the initial value
Ah... but it is part of the issue for mee-spike wrote:...This isn't the issue
in order to do this:
I'm fully confident that you can do the ASP side. But I am concerned with the nature of the value that's available, and its relation to the menu, to see (1) if it could be used in the custom menu code to figure out which item is initially checked and, if so, (2) decide what the most efficient method of doing so would be.e-spike wrote:...if you can tell me how to set the initial check item, and whether its done based on the menu filter name or its item number (vertically down the submenu) and the syntax for that...
And what you just told me makes a difference. You see, if it's just item text we have to work with (or the name of the check image file for that matter), then we'd have to loop through the menu item array -- one long vector containing all menu items in the entire menu -- and perform a conditional test on each item to find which item is checked. Do-able, but not very efficient. Also a potential problem down the road if you ever change the item text or add checked items to other menus. But, if you have a 0 through 3, which is essentuially an index into that particular submenu, then all we have to do is transfer that number into the js code, do a simple little function, and we have the proper index into _mi[].
Got an idea to test... I'll be back. ...
OK... try this:
Add the following funciton to your menu_data.js file:
The groupIndex parameter is the group number (0 - 3) that you mentioned earler (much easier to use than the item text). The function essentially takes that group index and gets a value from the _m[] array; that value is the index in the _mi[] array for the checked menu item, which is assigned as the initial value of mm_checkedItem.
Since the checked item is dynamic, and the _m[] and _mi[] arrays aren't available until after the menus are drawn, you have to call mm_setCheckedItem() after the menus are drawn. So... two obvious choices: call mm_setCheckedItem() in your page's inline js output, after the call to drawMenus(), or call it with the body's onload event.
I think that should do it!
Cheers,
Kevin
Add the following funciton to your menu_data.js file:
Code: Select all
function mm_setCheckedItem(groupIndex)
{
mm_checkedItem = _m[getMenuByName("filters")][0][groupIndex];
}Since the checked item is dynamic, and the _m[] and _mi[] arrays aren't available until after the menus are drawn, you have to call mm_setCheckedItem() after the menus are drawn. So... two obvious choices: call mm_setCheckedItem() in your page's inline js output, after the call to drawMenus(), or call it with the body's onload event.
I think that should do it!
Cheers,
Kevin
