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
Code:
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):
Code:
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:
Code:
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
DD anylink menu works great execpt in IE9
Reply With Quote
Bookmarks