Hi Dave,
darkcircuituk wrote:I have the standard menu_data.js file, do I need to just create another menu_data.js file with a different name and then place the dynamic menu in there? Then call this other menu using moveover?
No. One menu_data.js file will suffice.
Any milonic menu can act as a context menu. What makes a menu a context menu is simply that the menu's name is assigned to a global variable called
contextMenu. The
contextMenu variable is defined in contextmenu.js, and is initially set to a value of "contextMenu", which, in the
downloadable example, is the name of a menu defined in menu_data.js, along with all of the other menus. So, unless you change the value of the
contextMenu variable, the menu that appears when you rght click will be the one named "contextMenu". Making different menus appear is therefore a matter of defining the various menus that will serve as context menus, then changing the value of the
contextMenu variable to the name of the menu you want to display, according to the events that you have in mind.
Take the following two menus, defined in menu_data.js:
Code: Select all
with(milonic=new menuname("contextMenu")){
top="offset=2"
style = contextStyle;
margin=3
aI("text=Milonic Home Page;url=/;image=home.gif");
aI("text=Print;url=javascript:window.print();separatorsize=1;image=print.gif");
aI("text=Back;url=javascript:history.go(-1);image=back.gif");
aI("text=Forward;url=javascript:history.go(1);image=forward.gif");
aI("text=Refresh;url=javascript:history.go(0);image=browser.gif");
aI("text=View Page Source;url=javascript:Vsrc();separatorsize=1;");
aI("text=Menu Samples;showmenu=Context Milonic DHTML menu samples;");
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`");
}
with(milonic=new menuname("contextLink")){
top="offset=2"
style = contextStyle;
margin=3
aI("text=Open;onfunction=mm_setUrlToOpen();");
aI("text=Open in a New Window;target='new';separatorsize=1;onfunction=mm_setUrlToOpen();");
aI("text=Milonic Home Page;url=/;image=home.gif;");
aI("text=Print;url=javascript:window.print();separatorsize=1;image=print.gif");
aI("text=Back;url=javascript:history.go(-1);image=back.gif");
aI("text=Forward;url=javascript:history.go(1);image=forward.gif");
aI("text=Refresh;url=javascript:history.go(0);image=browser.gif");
aI("text=View Page Source;url=javascript:Vsrc();separatorsize=1;");
aI("text=Menu Samples;showmenu=Context Milonic DHTML menu samples;");
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`");
}
The first menu is the standard "contextMenu" used in
sample27. The menu named "contextMenu" will be used when the pointer is not on a link. The menu named "contextLink" will be used when the pointer is on a link. The "contextLink" menu is a copy of the first, with two more menu items added to the top: "Open" and "Open in a New Window". The aI() defnitions of the two additional items are general, and are meant to serve for any link.
Now we need two more things: First, as Andy mentioned earlier in this thread, we need mouseover event handlers to switch between the two context menus depending on whether the pointer is on a link or not. Second, we need a function that will change the actual url for the "Open" and "Open in a New Window" menu items based on the link that the menu was opened from; we can use the contextObject that
Andy mentioned in the other thread you started on this topic. These thing can be accomplished by the followig steps:
(1) Insert the following code at the top of your menu_data.js file:
Code: Select all
var contextMenus = new Array();
contextMenus[true] = "contextLink";
contextMenus[false] = contextMenu;
contextState = false;
function mm_toggleContextMenu()
{
contextState = !contextState;
contextMenu = contextMenus[contextState];
}
function mm_setUrlToOpen()
{
_mi[_itemRef][2] = contextObject.href;
itemOff(_itemRef);
itemOn(_itemRef);
}
Note that for this code to work, I will assume that your second context menu -- the one that appears when the pointer is on a link -- is named "contextLink".
(2) Make sure that you load contextmenu.js into the page
before menu_data.js (this is opposite of the way the downloadable sample shows, but to help automate some of this process, contextmenu.js should be loaded before menu_data.js).
(3) On any link, set
onmouseover and
onmouseout as follows:
Code: Select all
<a href="http://websites.milonic.com/google.com/" onmouseover="javascript:mm_toggleContextMenu()" onmouseout="javascript:mm_toggleContextMenu()">Google</a>
Of course, you'd set the href and link text as befits your goal, but
onmouseover and
onmouseout should both be set as shown in the example above.
This approach works, is fairly automated, and requires a minimum of coding. Describing how and why it works would take a few more paragraphs, so I'll skip that for now. If you're interested in the "how and why" part (or if anyone else is), we can do that later, after you get it working.
Cheers,
Kevin
EDIT: You can see a working example of the above
here.
