Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:30
Problem with Menu Highlighting
Poster: Sandy Rogers
Dated: Saturday October 1 2005 - 18:55:32 BST
I've beeen working on this all day, my brain now hurts and I'm starting to disapper up a certain orifice that I'd prefer not to!
I am changing from a 'three frames' site to a 'non-frames' site and I now have two problems which I cannot solve (I am 'playing' with the files under a different domain until all the files are up and running - please don't select Visitor's Page, Notice Board, Newsletter page [these are .asp pages that I am struggling with on an unrelated matter] or the 'Contact Us' link as they each one will take you away from the domain I'm working on and may confuse the issue).
1. When a visitor first accesses the index page at :
http://www.cumbwestmasons.wanadoo.co.uk
The Top menu is off to the right. If you RMB for the context menu the top menu then centres - it is then fine from then on.
2. If the following link is selected:
http://www.cumbwestmasons.wanadoo.co.uk ... .shtml#feb
The Events page is displayed and goes to the month of February - the menu highlighting for the Top Menu and the Floating Menu are correct. However, click on another month and although you are directed to the correct month the highlighting remains the same. Click on page refresh and the highlighting is corrected!
Any one any idea where I'm going wrong?
If you do find the problem please don't be too technical - I'm not a coder I just 'play' with this site in my spare time. If something doesn't work I basically just keep changing all sorts of things (brute force) until I get what I want - I recognise this is not the best way to build a site but it's the only way I know!
Poster: Ruth
Dated: Saturday October 1 2005 - 21:55:55 BST
Hi Sandy,
It's because it is an anchor link. There is a function that will allow the link to match even though it's an anchor. Below see your menu_data_events.js new file
Code:
// EDIT THESE TWO VARIABLES AS PREFERRED //
var mm_closeBcMenus = false;
var mm_highlightParentItems = true;
///////////////////////////////////////////
var mm_breadCrumbAnchor = -1;
function mm_breadCrumbs()
{
var selectedItem = _itemRef;
var i = mm_breadCrumbAnchor;
if (mm_closeBcMenus) $Z();
if (i > -1) {
do {
_mi[i][7] = _m[_mi[i][0]][6].offbgcolor;
_mi[i][8] = _m[_mi[i][0]][6].offcolor;
BDMenu(_mi[i][0]);
i = getParentItemByItem(i);
} while (!isNaN(i) && mm_highlightParentItems);
}
i = mm_breadCrumbAnchor = selectedItem;
do {
_mi[i][7] = _mi[i][19];
_mi[i][8] = _mi[i][18];
BDMenu(_mi[i][0]);
i = getParentItemByItem(i);
} while (!isNaN(i) && mm_highlightParentItems);
}
/// EXAMPLE MENU ///
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;
/// Style Definitions ///
// *** Secondary Menus ***
with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="9px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="navy";
onbgcolor="#ddffdd";
oncolor="blue";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=2;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="relarrow-red.gif";
subimagepadding=2;
}
// Main
with(pglwebsite=new menuname("Events Floating Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
screenposition="center";
left="offset=+100";
top=21;
followscroll=1;
aI("text= Jan ;url=functions.htm#jan;clickfunction=mm_breadCrumbs();");
aI("text= Feb ;url=functions.shtml#feb;clickfunction=mm_breadCrumbs();");
aI("text= Mar ;url=functions.shtml#mar;clickfunction=mm_breadCrumbs();");
aI("text= Apr ;url=functions.shtml#apr;clickfunction=mm_breadCrumbs();");
aI("text= May ;url=functions.shtml#may;clickfunction=mm_breadCrumbs();");
aI("text= Jun ;url=functions.shtml#jun;");
aI("text= Jul ;url=functions.shtml#jul;");
aI("text= Aug ;url=functions.shtml#aug;");
aI("text= Sep ;url=functions.shtml#sep;");
aI("text= Oct ;url=functions.shtml#oct;");
aI("text= Nov ;url=functions.shtml#nov;");
aI("text= Dec ;url=functions.shtml#dec;");
}
drawMenus(); // Then draw the first main menu.
var mm_closeBcMenus = false;
var mm_highlightParentItems = true;
///////////////////////////////////////////
var mm_breadCrumbAnchor = -1;
function mm_breadCrumbs()
{
var selectedItem = _itemRef;
var i = mm_breadCrumbAnchor;
if (mm_closeBcMenus) $Z();
if (i > -1) {
do {
_mi[i][7] = _m[_mi[i][0]][6].offbgcolor;
_mi[i][8] = _m[_mi[i][0]][6].offcolor;
BDMenu(_mi[i][0]);
i = getParentItemByItem(i);
} while (!isNaN(i) && mm_highlightParentItems);
}
i = mm_breadCrumbAnchor = selectedItem;
do {
_mi[i][7] = _mi[i][19];
_mi[i][8] = _mi[i][18];
BDMenu(_mi[i][0]);
i = getParentItemByItem(i);
} while (!isNaN(i) && mm_highlightParentItems);
}
/// EXAMPLE MENU ///
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;
/// Style Definitions ///
// *** Secondary Menus ***
with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="9px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="navy";
onbgcolor="#ddffdd";
oncolor="blue";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=2;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="relarrow-red.gif";
subimagepadding=2;
}
// Main
with(pglwebsite=new menuname("Events Floating Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
screenposition="center";
left="offset=+100";
top=21;
followscroll=1;
aI("text= Jan ;url=functions.htm#jan;clickfunction=mm_breadCrumbs();");
aI("text= Feb ;url=functions.shtml#feb;clickfunction=mm_breadCrumbs();");
aI("text= Mar ;url=functions.shtml#mar;clickfunction=mm_breadCrumbs();");
aI("text= Apr ;url=functions.shtml#apr;clickfunction=mm_breadCrumbs();");
aI("text= May ;url=functions.shtml#may;clickfunction=mm_breadCrumbs();");
aI("text= Jun ;url=functions.shtml#jun;");
aI("text= Jul ;url=functions.shtml#jul;");
aI("text= Aug ;url=functions.shtml#aug;");
aI("text= Sep ;url=functions.shtml#sep;");
aI("text= Oct ;url=functions.shtml#oct;");
aI("text= Nov ;url=functions.shtml#nov;");
aI("text= Dec ;url=functions.shtml#dec;");
}
drawMenus(); // Then draw the first main menu.
You'll notice I only have the clickfunction in a couple of them. You'll have to add that to the other aI strings.
Next: you need to download the contextmenu.js file again. Don't put anything in it. Just leave it as it is. You can find it at http://www.milonic.com/menumodules.php I think it's about the 3rd one.
It took me awhile to find the problem, but I kept getting an error message and on eliminating one file at a time, it came from your contextmenu.js file.
There is a demo of this function which was really designed to keep highlighting when using iframes but it does seem to work for anchor links also. Breadcrumb Demo
Hope that helps.
Ruth
Poster: Sandy Rogers
Dated: Saturday October 1 2005 - 22:58:37 BST
Ruth, thanks for the quick response - I did what you said, however.....
The Floating Menu updates but the Top Menu remains the same. When you click on the page refresh it then shows the correct highlighting. Any idea why it is still not updating?
Just out of curiousity what is the difference between an 'Anchor Link' and an 'ordinary link'?
Any idea why the index menu page isn't lining up initially?
Poster: Ruth
Dated: Sunday October 2 2005 - 1:24:36 BST
Hi Sandy,
I don't know why you are seeing the problem on the index. What browser because it is lining up fine on IE5.5, Netscape7.1, FF 1.0.2. You might try changing that left="offset=+100"; to left="offset=100px"; and see what that does.
The top menu uses the same type links, anchors, so it's not going to match. Perhaps you need to put the function in that data file, also, but I don't know if that will work, as I don't do functions. I also notice they don't seem to go away once clicked. They do clear in the demo, so I don't know what is doing that. Sorry, I can't be more helpful on that. It might be better to use visited color? You could put that into each aI and then the color would change once the link was 'visited'. There is also a page highlighter module. I don't know if that would do what you want. You'd have to experiment and see if that would work. It will highlight based on either showmenu, text or clickfunction. If the menus could be made to match as to text, then I'd think it would work in both menus no matter which menu was clicked. But, I am not sure, it would have to be tested.
mmpagehighlighter.js demo
Hmm, actually they are both links, the term anchor just tells someone that the link includes the address and also a place to go when you get to that address. Like giving someone directions, go to 324 fifth, apt B, the kitchen. The kitchen would be the anchor part. More or less.
It gives the idea.
Ruth
Problem with Menu Highlighting
Poster: Sandy Rogers
Dated: Sunday October 2 2005 - 14:39:19 BST
Ruth,
I played around with the settings as you mentioned and couldn't get the highlighting to match on both menus. I've decided to change the links path to :
aI("text= Jan ;url=../main/functions.shtml#jan;");
in the menu_data_events.js this stops the highlighting of the Floating Menu. The Top Menu shows the correct highlighting but leaves the month sub-menu clear. I couldn't find a way to make the previous highlighting clear (previous and current kept showing on the Floating Menu unless your clicked page refresh).
The other problem: Tried what you said - no change. The strange thing about the Top Menu is when you access the other pages direct (without going any where near the Index page) the Top Menu immediately lines up correctly.
Thanks again for your response - it is greatly appreciated.
Problem with Menu Highlighting
Poster: Sandy Rogers
Dated: Sunday October 2 2005 - 15:04:02 BST
Ruth,
Solved the problem of the Index menu lining up.
Just out of curiousity I placed drawMenus(); after the Contextmenu script (and before the Top Menu script started) in the menu_data_index.js file. The menu now lines up immediately.
Does this mean it is mandatory to have drawMenus(); after each diiferent menu if they are contained within the same data file?
Could this also be the reason for the highlighting not working correctly?
Poster: Ruth
Dated: Sunday October 2 2005 - 15:13:34 BST
Hi Sandy,
Sorry, I have no idea about that. I don't know anything about the programming. I know if you have a menu placed in a table you have a menu placed inside a table, because of the requirement to put only the main menu in the table, you need a drawmenus at the end of that menu and the original one in the data file that contains the rest of the menus.
Ruth