PDA

View Full Version : DD anylink menu works great execpt in IE9



JohnFry
05-06-2011, 04:45 PM
1) Script Title: Anylink menu

2) Script URL (on DD):

(http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm/)http://www.all-brands.biz/12and20weeks.co.uk/

3) Describe problem: I have a click to open DD anylink menu on the website above that I am building which works brilliantly in every browser i have tried Google,Safari, FF, IE 6,7 and 8 but not IE9 I have puzzled over it for days now reading through these forums, the menu "drop to the right" works on the DD website when viewed in IE9 on this machine so it is in my coding somewhere but I am at a loss to know where.
It kind of works if changed to rollover but not properly
Any help greatly received

John

ddadmin
05-06-2011, 05:53 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Hmm checking your page using IE9, the menu seems to be working fine. Can you elaborate on the issue/behavior?

JohnFry
05-19-2011, 09:17 PM
Hi sorry for the slow reply and thanks for your very prompt one, As you say it is working fine if you follow the link I left you which was;

http://www.all-brands.biz/12and20weeks.co.uk/

I should have checked it myself sorry - the problem then seems to be in the domain forwarding service I have set up via my domain registration group 123-reg.com that forwards domain name

"www12and20weeks.co.uk"
to
http://www.all-brands.biz/12and20weeks.co.uk/

If you follow the domain name
"http://www.12and20weeks.co.uk/"

to its host

http://www.all-brands.biz/12and20weeks.co.uk/

the drop down no longer appears with "onclick" and when i tried to change it to a "rollover" function it sort of worked but the drop down menu would disappear as soon as the mouse left the title/link making it useless- oddly though the rollover would start to work properly if you refreshed the page???!!

I would prefer to leave it "onclick" if possible

if you look at the source for http://www.12and20weeks.co.uk/ you get only the forwarding info below;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head><title>12 & 20 Weeks Magazines - Covering Prenatal & Maternity Services In Your Area </title>
<meta name="Keywords" content="12 & 20 Weeks is a series of local guides to NHS care services and local suppliers of goods targeted to the prenatal, maternity and new born baby market created in partnership with local NHS trusts"><meta name="Author" content="12 & 20 Weeks are guides to NHS services and local suppliers of prenatal and new baby products"><meta name="Description" content="NHS Maternity Care, Prenatal Care,Pregnancy Care, Pregnancy Choices, Ultrasound Scan, Obstetric & Gynecology, Dating Scan, Anomaly Scan,Mother and baby,Mother and baby products,Mother and baby service"><link rel="shortcut icon" href="http://www.all-brands.biz/favicon.ico"></head>
<frameset rows="100%">
<frame title="http://www.all-brands.biz/12and20weeks.co.uk/" src="http://www.all-brands.biz/12and20weeks.co.uk/" name="mainframe" frameborder="0" noresize="noresize" scrolling="auto">
<noframes>Sorry, you don"t appear to have frame support.
Go here instead - <a href="http://www.all-brands.biz/12and20weeks.co.uk/">12 & 20 Weeks Magazines - Covering Prenatal & Maternity Services In Your Area </a></noframes>
</frameset>

Thanks for your help
John

ndrs
03-09-2012, 12:08 PM
I know it's a very late answer to this post. But we are using the latest version of AnyLink CSS Menu (currently 2.3) within a frameset and we had the same issues: Internet Explorer 9 still does not work with menus opened upon a click. Finally I found a solution that works for us, does not affect other browser, and can be used for both, anylinkmenu as well as anylinkcssmenu (code shown below is for anylinkcssmenu. For those who like to try it out but are too lazy to write: I also attached a complete sample with anylinkmenu).

The problem is caused by IE9s event bubbling after the click within a frameset. The click event that is opening the menu is consumed twice (Once per frame? Iím not a JavaScript guru so I didn't actually figure that out! Maybe the bug is even caused by design of method addEvent!?). Due to the second consumption of the event the popup is closed at the same moment it was opened. That's because the comparison

menu.dropmenu.style.visibility=="visible"
is positive then.
Therefore I added a simple check of the events state to the anonymous function used by the event listener (the code shown is the call of addEvent for click event in anylinkcssmenu.setupmenu with a small extension at the beginning):


this.addEvent(observed, function(e){ //CLICK event for anchor, dropmenu
var menu=anylinkcssmenu.menusmap[this._internalID]
// START CODE EXTENSION: Ensure event has not been consumed yet (IE9 and frameset!)
if (e === menu.lastClickEvent ) {
return false;
}
menu.lastClickEvent=e
// END CODE EXTENSION

if ( this._isanchor && menu.revealtype=="click"){
if (menu.dropmenu.style.visibility=="visible")
anylinkcssmenu.hidemenu(menu.id)
else{
anylinkcssmenu.addState(this, "add")
anylinkcssmenu.showmenu(menu.id)
}
if (e.preventDefault)
e.preventDefault()
return false
}
else
menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
}, "click")

Now the popup gets opened as expected after a click on the corresponding link. But there is still the second problem described above: the menu disappears as soon as the mouse left the title/link. The mouseout is consumed twice, too. In the second event execution the return value of anylinkcssmenu.isContained is no longer true although this._internalID in both calls has the same value. Again I did not really get the reason for this behavior. Is it because the event is processed for the second frame? If an IE9 whisperer out there is able to explain it to me I would appreciate that ;-)
So I made an analogous second extension in anylinkcssmenu.setupmenu, now to the addEvent call for the mouseout event:

this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
// START CODE EXTENSION: Ensure event has not been consumed yet (IE9 and frameset!)
var menu=anylinkcssmenu.menusmap[this._internalID]
if (e === menu.lastMouseoutEvent ) {
return false;
}
// END CODE EXTENSION
menu.lastMouseoutEvent=e
if (!anylinkcssmenu.isContained(this, e)){
// VAR MENU NOW ALREADY SET AHEAD var menu=anylinkcssmenu.menusmap[this._internalID]
menu.hidetimer=setTimeout(function(){
anylinkcssmenu.addState(menu.anchorobj, "remove")
anylinkcssmenu.hidemenu(menu.id)
}, anylinkcssmenu.effects.delayhide)
}
}, "mouseout")

Maybe there are some more nostalgic people like us using framesets for structuring their page and this is a small help for them.
Andreas