Onfunction/Offfunction problem

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:51

Onfunction/Offfunction problem

Poster: simongdawson
Dated: Wednesday December 24 2003 - 8:20:20 GMT

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:

_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=tdawson __at__ the-limes.com;status=Click to email Thelma;");
aI("text=Simon;onfunction=swap('images/menu_simon.jpg');offfunction=swap('images/menu_limes.jpg');url=simon __at__ 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:

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;
}

Poster: Hergio
Dated: Friday December 26 2003 - 18:32:53 GMT

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.

Poster: simongdawson
Dated: Sunday December 28 2003 - 16:17:58 GMT

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?

Is there anybody out there?

Poster: simongdawson
Dated: Friday January 23 2004 - 19:25:55 GMT

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?

Poster: Ruth
Dated: Saturday January 24 2004 - 0:46:29 GMT

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:

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:

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

Poster: simongdawson
Dated: Saturday January 24 2004 - 10:01:03 GMT

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?

Poster: Ruth
Dated: Saturday January 24 2004 - 18:44:32 GMT

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

Industrial Strength JavaScript and DHTML Menus

Onfunction/Offfunction problem

Is there anybody out there?