Onfunction/Offfunction problem

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
simongdawson
Super Advanced
Super Advanced
Posts: 49
Joined: Sun Oct 12, 2003 6:56 am
Location: UK
Contact:

Onfunction/Offfunction problem

Post by simongdawson »

I'm having problems with onfunction/offfunction. This can currently be seen at http://www.the-limes.com/test.html . On that page put your mouse over the flashing MENU in the top left corner and slide down to Contacts. This line and its submenu lines all have mouseover triggered images at the bottom of the page controlled by the onfunction/offfunction. When sliding the mouse up and down over the lines of a specific submenu the pictures behave perfectly. The problem occurs when moving to or fro from one submenu to the next, when it often incorrectly displays the previous picture. Any ideas on how to sort this problem out would be much appreciated.

The menudata file reads:

Code: Select all

_menuCloseDelay=500;
_menuOpenDelay=150;
_scrollAmount=3;
_scrollDelay=20;
_followSpeed=5;
_followRate=50;
_subOffsetTop=5;
_subOffsetLeft=10;

with(menuStyle=new mm_style()){
offcolor="#228B22";
offbgcolor="#FFFFF0";
oncolor="#FF0000";
onbgcolor="#FFFFF0";
fontsize="14";
fontstyle="normal";
fontweight="bold";
fontfamily="Tahoma,Helvetica,Verdana";
padding=2;
}

with(milonic=new menuname("TopMenu")){
top=10;
left=10;
itemwidth=90;
style=menuStyle;
alwaysvisible=1;
followscroll=1;
orientation="horizontal";
aI("image=/images/flashing_menu.gif;showmenu=SubMenu;align=right;status=Mouse over for menu;");
}

with(milonic=new menuname("SubMenu")){
itemwidth=110;
style=menuStyle;
aI("text=Simon's Work;onfunction=swap('images/menu_van.jpg');offfunction=swap('images/menu_limes.jpg');showmenu=WorkMenu;status=Mouse over to see menu for Simon's work;");
aI("text=Genealogy;onfunction=swap('images/menu_tree.jpg');offfunction=swap('images/menu_limes.jpg');showmenu=GenealogyMenu;status=Mouse over for Genealogy menu;");
aI("text=Contacts;showmenu=ContactMenu;onfunction=swap('images/menu_contact.jpg');offfunction=swap('images/menu_limes.jpg');status=Mouse over for Contacts menu;");
aI("text=Links;onfunction=swap('images/menu_links.jpg');offfunction=swap('images/menu_limes.jpg');showmenu=LinksMenu;status=Mouse over to see Links menu;");
aI("text=Guest Book;url=http://www.the-limes.com/guestbook/index.php;status=Click to go to our Guest Book;");
aI("text=Search;url=http://www.the-limes.com/search/search.html;status=Click to search within our web site;");
}

with(milonic=new menuname("EmailMenu")){
itemwidth=60;
style=menuStyle;
aI("text=Thelma;onfunction=swap('images/menu_thelma.jpg');offfunction=swap('images/menu_limes.jpg');url=mailto:tdawson@the-limes.com;status=Click to email Thelma;");
aI("text=Simon;onfunction=swap('images/menu_simon.jpg');offfunction=swap('images/menu_limes.jpg');url=mailto:simon@the-limes.com;status=Click to email Simon;");
}

with(milonic=new menuname("TelephoneMenu")){
itemwidth=95;
style=menuStyle;
aI("text=From UK;onfunction=swap('images/menu_uk.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.the-limes.com/contact/uk_phone.html;status=Click for our home telephone number from within the UK;");
aI("text=From abroad;onfunction=swap('images/menu_world.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.the-limes.com/contact/abroad_phone.html;status=Click for our home telephone number from outside the UK;");
}

with(milonic=new menuname("LinksMenu")){
itemwidth=140;
style=menuStyle;
aI("text=Software;url=http://www.the-limes.com/links/software_links.html;status=Click to see links to software related sites;");
aI("text=Work;url=http://www.the-limes.com/links/work_links.html;status=Click to see links to work related sites;");
aI("text=Genealogy;url=http://www.the-limes.com/links/genealogy_links.html;status=Click to see links to genealogy related sites;");
aI("text=Chalfont St Peter;onfunction=swap('images/menu_csp.jpg');offfunction=swap('images/menu_limes.jpg');showmenu=CSPMenu;status=Mouse over for Chalfont St. Peter links;");
}

with(milonic=new menuname("GenealogyMenu")){
itemwidth=125;
style=menuStyle;
aI("text=Surname List;url=http://www.the-limes.com/genealogy/tng/surnames.php;status=Click to search our Surname list;");
aI("text=Name Search;url=http://www.the-limes.com/genealogy/tng/index.html;status=Click to search for individuals;");
aI("text=Advanced Search;url=http://www.the-limes.com/genealogy/tng/searchform.php;status=Click to search with advanced options for individuals;");
aI("text=Whats New;url=http://www.the-limes.com/genealogy/tng/whatsnew.php;status=Click to see what additions have been made to the database in the last year;");
aI("text=Links;onfunction=swap('images/menu_links.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.the-limes.com/links/links.htm;status=Click to see links to genealogy related sites;");
}

with(milonic=new menuname("ContactMenu")){
itemwidth=90;
style=menuStyle;
aI("text=Email;onfunction=swap('images/menu_email.gif');offfunction=swap('images/menu_limes.jpg');showmenu=EmailMenu;status=Mouse over for email menu;");
aI("text=Mail;onfunction=swap('images/menu_mail.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.the-limes.com/contact/address.html;status=Click for mailing address;");
aI("text=Telephone;onfunction=swap('images/menu_phone.jpg');offfunction=swap('images/menu_limes.jpg');showmenu=TelephoneMenu;status=Mouse over for telephone menu;");
}

with(milonic=new menuname("WorkMenu")){
itemwidth=100;
style=menuStyle;
aI("text=Information;url=http://www.the-limes.com/work/work.html;status=Click to view information about Simon's work;");
aI("text=Photographs;url=http://www.the-limes.com/work/work_photos.html;status=Click to view photographs of some of Simon's work projects;");
aI("text=Links;url=http://www.the-limes.com/links/work_links.html;status=Click for work related links;");
}

with(milonic=new menuname("CSPMenu")){
itemwidth=150;
style=menuStyle;
aI("text=CSP co uk;onfunction=swap('images/menu_csp1.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.chalfontstpeter.co.uk;status=click to go to Chalfont St Peter co uk website;");
aI("text=CSP org uk;onfunction=swap('images/menu_csp2.jpg');offfunction=swap('images/menu_limes.jpg');url=http://www.chalfontstpeter.org.uk;status=click to go to Chalfont St Peter org uk website;");
}

drawMenus();
using the javascript

Code: Select all

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function swap(imgPath){
if (document.images) document.images['menupic'].src=imgPath;
}
User avatar
Hergio
Milonic God
Milonic God
Posts: 1123
Joined: Wed Jun 12, 2002 7:46 pm
Location: Rochester, NY

Post by Hergio »

maybe something with the timing of the firing of the functions...why not try putting a bit of a space between the menus (you wouldnt be able to tell since the menu is the same color as the page) and maybe this will allow the off even to fire and complete for the one sub and then the on function to fire for the new sub.
Dave Hergert
Software Engineer
"Helping to make the menu better, one :?: at a time."
User avatar
simongdawson
Super Advanced
Super Advanced
Posts: 49
Joined: Sun Oct 12, 2003 6:56 am
Location: UK
Contact:

Post by simongdawson »

Hergio wrote:maybe something with the timing of the firing of the functions...why not try putting a bit of a space between the menus (you wouldnt be able to tell since the menu is the same color as the page) and maybe this will allow the off even to fire and complete for the one sub and then the on function to fire for the new sub.
Sounds good to me, but exactly how would I do that? Can you please give me an example?
User avatar
simongdawson
Super Advanced
Super Advanced
Posts: 49
Joined: Sun Oct 12, 2003 6:56 am
Location: UK
Contact:

Is there anybody out there?

Post by simongdawson »

I've tried spacing out the sub menus as suggested above (I think) but the problem persists as before. Please can anyone help sort this one out?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

What is happening...I think..is that when you move the mouse from one menu to the submenu, it doesn't really go 'offmenu' or off item, so you don't get an off function. I do have a suggestion, it will work sometimes...it just depends really how how the person doing the mouseover does it. First I eliminated the left=10 that you have in the submenu, I don't know why that's there and the submenu just kept showing up over the drop down from the blinking menu gif, the submenu position is controlled at the top with the subOffsetleft. Next, in the EmailMenu, the TelephoneMenu and the ContactMenu, I put the following immediately after the style=menustyle

Code: Select all

aI("text=;itemheight=15;");
then in the ContactMenu I inserted the following between the Email / Mail and between the Mail / Telephone and after Telphone

Code: Select all

aI("text=;");
What that is doing is to make it seem that the mouse is going off the item and since it's going on an item that isn't actually there, when you move to the next item the onfucntion works. But, as to the other ones, if the person just slides directly from the Contacts to the word Email, that will continue to do what it's now doing until they mouse over an empty item section. Perhaps there is someone one who would know how to do some kind of javascript function code or something but it is not I.

Ruth
User avatar
simongdawson
Super Advanced
Super Advanced
Posts: 49
Joined: Sun Oct 12, 2003 6:56 am
Location: UK
Contact:

Post by simongdawson »

I've given that a try, Ruth, but it only works in the sense that it is creating a blank line at the top of each sub menu, which, if the mouse cursor is slid across onto it before sliding vertically down the menu list, gives the illusion of having solved the problem. The problem is not, however, solved, and it only appears to work if the cursor is tracked along a specific route. Thanks for your input! Please have you or anyone else any other suggestions?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Yes, that's what I said, it depends on how they move the mouse. Except that as to the actual menu with the Email/mail/telephone in it, that one and the one with the peoples' names does work with the extra blank item inserted between the items since that forces the mouse to go off the item as they scroll down to the next item. Somehow you need to 'force' the mouse to go 'off' item as it moves. Don't know how you would do that going vertically from one menu to the next. Also, I'd think..though I'm not sure on this...that how the mouse itself functions [it's sensitivity in mousing over things] would have something to do with such things, but not sure on that. I just remember someplace about being able to set something with how the mouse functions on the computer.

One other thing you might try....again, don't know if this will do it, but you might try actually coding in the contact submenu the subOffsetleft..set it to 15 or something for that menu, and then set the code for the closingdelay to maybe 1000 so the menu stays open...maybe the mouse would think it had gone off the menu item if it has to move 15pixels to get to the next submenu.
Ruth
Post Reply