AnyLink Dropdown menu "half works" in IE8

[evets90]

1) Script Title: AnyLink JS Drop Down Menu v2.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

This script works perfectly in Firefox, Safari, and Chrome, however it only "half works" in IE8. Only the first link in my set of links will show the dropdown menu in IE8.

Site in question: http://www.unhmub.com/involvement/
(Two of the links in the navbar intentionally do not have hover menus)

Is this a code problem or an IE8 problem?

[ddadmin]

There may be other issues, but you're registering too many anylinkmenu.init() too many times on your page, including calls to non existing menu anchor classes:

anylinkmenu.init("menuanchorclass")
anylinkmenu.init("menuanchorclass2")
anylinkmenu.init("menuanchorclass3")
anylinkmenu.init("menuanchorclass4")
anylinkmenu.init("menuanchorclass5")
anylinkmenu.init("menuanchorclass6")
anylinkmenu.init("menuanchorclass7")
anylinkmenu.init("menuanchorclass8")

All of the lines in red can be removed in fact. Then, modify your menu markup so the menu headers all just use the same menu class:

    		<!-- Begin Navigation -->
            <div class="topnavbar" style="text-align:center;">
            <a href="http://www.unhmub.com/involvement/mission.html" class="menuanchorclass" rel="anylinkmenu1">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.unhmub.com/off-campus/" class="menuanchorclass">Commuter Services</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.unhmub.com/greek/" class="menuanchorclass">Greek Life</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.unhmub.com/involvement/leadership.html" class="menuanchorclass" rel="anylinkmenu4">Leadership</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.unhmub.com/involvement/studentorgs.html" class="menuanchorclass" rel="anylinkmenu5">Student Organizations</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br>
            <br>
            </div>
            <!-- End Navigation -->

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[evets90]

Yeah, I left the init methods in the site because I want to be able to call them if I need them, but would they be interfering with IE8's rendering?

Just a question about the notice, it is in the code but I changed the comment format to HTML for validation purposes. It can be found here in the head tag:

<!--* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code-->
<script type="text/javascript" src="javascript/menucontents.js"></script>

The reason I changed the originally Javascript-based comment notice to HTML-styled comments is because the normal comment Dynamic Drive provided does not validate under the W3C's HTML5 conventions (I'm going for near-100% validation on the site, and the old comment format made the validator unhappy) I can change it back to the old version if you want when I get into the office tomorrow (it's really no problem). Feel free to PM me about it too, I didn't mean to cause any alarm about that.

Here's the validation issues that the original comment caused:

The validation errors with the notice as-is (slash-star comment method) (ignore the "keyword is not registered" error, as that can be disregarded):


And the validation errors with the comment converted to html (again, ignore the "keyword is not registered" error, as that can be disregarded):

[jscheuer1]

The way the validator is currently set up, if you want the page to validate in HTML 5, you cannot use rel like that. You could use a data dash (data-id might be good) attribute instead. But then you would have to change all references to rel in the script to data-id. And make sure it's always referenced as an attribute. The rel attribute is so ubiquitous that it often can be referenced as a property of the element. I'm not sure if this script does so or not. But the data dash attributes (new in HTML 5), though valid, almost always need to be referenced in javascript as attributes, not as properties.

As it turns out, there is only one reference and it is as an attribute, around line #259 in the script:

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("rel")
	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var dropmenuvar=window[dropmenuid]
	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
	var menu=this.menusmap[targetclas . . .

Make that:

var relattr=anchorobj.getAttribute("data-id")

Do yourself a favor and add a line after that as well so you have:

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("data-id")
	if(!relattr){return;}
	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var dropmenuvar=window[dropmenuid]
	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
	var menu=this.menusmap[targetclas . . .

That will avoid an error on menuanchorclass links that have no drop downs.

Then change this and similiar:

<a href="mission.html" class="menuanchorclass" rel="anylinkmenu1">About Us</a>

to:

<a href="mission.html" class="menuanchorclass" data-id="anylinkmenu1">About Us</a>

About the script comment. I'm sure DD doesn't mind as long as it appears in the page's source code. I have run into problems validating javascript comments that contain link text (highlighted in the below) in HTML 5:

<script type="text/javascript" src="anylinkmenu.js">

/***********************************************
* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

None were as severe as what you're describing. I found that all I had to do was change the multi-line comment to single line comments:

<script type="text/javascript" src="anylinkmenu.js">

//***********************************************
//* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
//***********************************************/

</script>

It looks as though this will work for your page as well.

I think this is a glitch in the validator though, as a multi-line comment is supposed to be just as good as several single line ones. But who knows what those people who make up the standards are thinking.

In any case, after doing things as described here and in ddadmin's post, the page worked and and the only validation error left was on the frameborder attribute for the iframe.

That can be fixed by changing the socialmedia division to:

    <div id="socialmedia" style="text-align:center"><!--[if lt IE 9]>
<iframe id="iframefacebook" frameborder=0 src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FUNH-MUB%2F120926084616822&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true&amp;height=62" style="border-width:0; overflow:hidden; width:292px; height:62px;" ></iframe>
<![endif]--><iframe class="standard" id="iframefacebook"  src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FUNH-MUB%2F120926084616822&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true&amp;height=62" style="border-width:0; overflow:hidden; width:292px; height:62px;" ></iframe></div>

And adding this to the head:

<!--[if lt IE 9]>
<style type="text/css">
.standard {display: none;}
</style>
<![endif]-->

[evets90]

Thanks a lot! I will be heading into the office in about an hour and will check out your suggestions. Thanks again!