Update images (menu icons) on the fly

Poster: e-spike
Dated: Tuesday August 23 2005 - 12:34:31 BST

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

Poster: Andy
Dated: Wednesday August 24 2005 - 10:17:37 BST

Hi,

This will depend on a number of factors.

If we can see the website or something that can show how and what you are trying to acheive, we should be able to advise further.

Regards
Andy

Poster: e-spike
Dated: Wednesday August 24 2005 - 14:03:45 BST

Take a look at newcom.serran.net login as sserra tester then look at the menu under group

SP!KE

Poster: e-spike
Dated: Thursday August 25 2005 - 18:22:09 BST

any closer to a solution?

Poster: kevin3442
Dated: Monday August 29 2005 - 21:32:06 BST

If I understand correctly, you just want a way to change menu item images programatically... correct?

Kevin

Poster: e-spike
Dated: Monday August 29 2005 - 21:37:01 BST

Correct, we wish to use the filter box to show the filter currently applied to the page. On change it will update an iframe, but it should also move the tick to the correct location on the menu list WITHOUT reloading the page itself.

Poster: kevin3442
Dated: Monday August 29 2005 - 22:22:14 BST

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,

Poster: e-spike
Dated: Monday August 29 2005 - 22:44:30 BST

Unfortunatly I get the error:

'_mi[...]' is null or not an object

i put the code in the end of milonic_src.js
Rich

Poster: kevin3442
Dated: Monday August 29 2005 - 23:01:33 BST

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

Poster: e-spike
Dated: Monday August 29 2005 - 23:12:55 BST

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

Poster: kevin3442
Dated: Monday August 29 2005 - 23:47:15 BST

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

Poster: e-spike
Dated: Monday August 29 2005 - 23:51:36 BST

Unfortunatly it is a session variable so could be different for every load of the application.asp page (and thus every load of the milonic menu)

Poster: kevin3442
Dated: Monday August 29 2005 - 23:57:29 BST

OK... I'll think about it.

What would the possible values of the session variable be (and, if it's not obvious, how do they relate to building the filters submenu)?

Cheers,

Kevin

Poster: e-spike
Dated: Tuesday August 30 2005 - 0:09:23 BST

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

Poster: kevin3442
Dated: Tuesday August 30 2005 - 0:12:56 BST

So... just to be sure I got it... the name of the asp variable is group, and it's value is the text property of the checked item?

Poster: e-spike
Dated: Tuesday August 30 2005 - 0:26:22 BST

for the purposes of this you can assume as much, yes
session("group") = either "Entire Community" "All Mine" "Personal" "Public Group"

Each group also has an associated number (0 to 3 in this case) which we can also pull. This isn't the issue

Poster: kevin3442
Dated: Tuesday August 30 2005 - 0:45:01 BST


Ah... but it is part of the issue for me 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.

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. ...

Poster: kevin3442
Dated: Tuesday August 30 2005 - 1:06:26 BST

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

Poster: e-spike
Dated: Tuesday August 30 2005 - 11:17:48 BST

That did it! What an amazing fix. I'm very impressed. Thank you ever so much you've saved me hours

Rich

Poster: kevin3442
Dated: Tuesday August 30 2005 - 16:41:35 BST

Hi Rich,

Glad it worked!

Cheers,

Kevin