JS menu doesn't work in IE 8

Previous versions of IE work fine

[deathbycheese]

Please help. I am not very acquainted with JS and inherited the responsibility of this site. The main menu is javascript and now doesn't work in IE 8, though it works fine in older versions and all other browsers - including FF, Chrome, Opera, Safari (Mac & PC).

Here is a link to the site:

<snipped link>

This is urgent as I am getting people contacting me wondering what's wrong with the site. I have confirmed that it is when they upgrade their IE and try to urge them to switch to FF, but that's not a good "fix".

I am working on a CSS version of the menu - along with a whole new site design - but I need this issue resolved as soon as possible in the interim.

Anything anyone can do to help find the problem would be greatly appreciated.

Regards,
dbc

[edited by: coopster at 8:05 pm (utc) on July 27, 2009]
[edit reason] no personal urls please TOS [webmasterworld.com] [/edit]

[SuzyUK]

but I need this issue resolved as soon as possible in the interim.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

add the above tag to the header of all your pages, and IE8 should render your pages the same as IE7. That's the interim solution, and works well for CSS too

Afraid I can't help with the JS, and your link will be removed per TOS [webmasterworld.com] anyway, however if you're already working on a change to the site perhaps the above solution will do meantime.. PS making sure your pages all have valid Doctypes going forward to IE8

[deathbycheese]

Thanks SuzyUK. However, your solution doesn't seem to work. I even tried "EmulateIE6" just to check. It is now hanging up my IE when I test it (with both EmulateIE7 and ..IE6) and I have to force-quit the app.

I have read the TOS and my link is not for any purpose other than to get help. In fact, the organization wouldn't even be pertinent to most people on this forum.

Also, I tried running a debug and here's the function it doesn't like:

function initMenu()
{
var mainNavObj = document.getElementById('mainNav');
var mainSubNavObj = document.getElementById('mainSubNav');
mainNavObj.style.visibility=mainSubNavObj.style.visibility="visible"
var menuItems = mainNavObj.getElementsByTagName('A');
if(document.all){
mainNavObj.style.visibility = 'hidden';
document.getElementById('mainSubNav').style.visibility='hidden';
}

The debug notification for "mainnavObj..." line, on line 5 above, states "Object required".

Since I don't know JS, I don't even know where to start fixing this.
thanks again,
dbc

[edited by: coopster at 8:13 pm (utc) on July 27, 2009]
[edit reason] no urls please [/edit]

[whoisgregg]

Welcome to WebmasterWorld, deathbycheese!

The debug notification for "mainnavObj..." line, on line 5 above, states "Object required".

This typically means that there isn't any element on the page with an ID assigned of "mainNav". Basically, somewhere in your HTML, you need to have something that has this specifically assigned:

<div id="mainNav">
...your navigation links...
</div>

Whatever is wrapped around your main navigation links should have that ID assigned.

[deathbycheese]

It does. I have a div with id="mainNav" and the CSS linking to it works fine in IE8 and the JS works in FF, etc.

I am also getting this:

'offsetLeft' is null or not an object

referring to the following code which occurs later in the document:

...
else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';
}
...

I would hate to have to post the whole entire JS code here, but just can't figure out how to get everyone on the same page so that you can fully see what's going on. Any ideas?

dbc

[whoisgregg]

Regarding the offsetLeft error, you can test if that value is set:

 var leftPos = (mainMenuLinks[subCounter-1].offsetLeft != 'undefined') ? mainMenuLinks[subCounter-1].offsetLeft : 0; 

It may actually be that the problem is with the object handle... You could add an alert to test what that handle is trying to get an .offsetLeft of:

 alert(mainMenuLinks[subCounter-1]);

[deathbycheese]

Ok, I'll try your idea, whoisgregg.

Do I write it like this? :

...
else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft != 'undefined') ?
mainMenuLinks[subCounter-1].offsetLeft : 0;
alert(mainMenuLinks[subCounter-1]);
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';
}
...

thanks all for your patience,
dbc

[deathbycheese]

well, the above-formatted code froze IE again, though it works the same as before in FF.

[whoisgregg]

Actually, there's a couple minor formatting issues. There is a missing opening parentheses "(" and it must all be on one line.

Another longer way of writing the same code is below, but it should be easier to retype and less susceptible to copy and paste errors.

if( mainMenuLinks[subCounter-1].offsetLeft != 'undefined' ){
var leftPos = mainMenuLinks[subCounter-1].offsetLeft; 
} else {
var leftPos = 0; 
}

The alert line will be helpful if the other code doesn't fix the problem. If it fixes the error, then you can safely delete the alert(...); line. If the error persists (or a new error crops up) then just post back with what the alert says.

Thank you for your patience. :)

[deathbycheese]

Thanks whoisgregg,
The actual if statement is empty with a comment stating "no action", so maybe your code will fix it.
Stay tuned!

[deathbycheese]

No luck - if I positioned your code correctly...
I still got "Error: 'offsetLeft' is null or not an object"

However, here is what I did with the code. Maybe I placed everything incorrectly? :

...
if(leftAlignSubItems){
// No action
} else {
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';

if( mainMenuLinks[subCounter-1].offsetLeft != 'undefined' ){
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
} else {
var leftPos = 0;
}

I sure wish I knew this stuff! You outta see my mad html/css skilz. :)

[whoisgregg]

Where you have this code:

} else { 
var leftPos = mainMenuLinks[subCounter-1].offsetLeft; 

Is where you should place that "if...else" block:

} else { 
if( mainMenuLinks[subCounter-1].offsetLeft != 'undefined' ){ 
var leftPos = mainMenuLinks[subCounter-1].offsetLeft; 
} else { 
var leftPos = 0; 
}

Then it should work (or at least fix that one issue). :)

[deathbycheese]

It still says 'offsetLeft' is null or not an object.
Can i just change it to offset something else? I inherited this code, so I really don't care if it even offsets or not if that makes sense. If it helps, here are the variables and the while statement that come just before the if statement we've been dealing with:

...
var mainMenuLinks = mainMenuObj.getElementsByTagName('A');

var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;

while(document.getElementById('submenu_' + subCounter)){
var subItem = document.getElementById('submenu_' + subCounter);

if(leftAlignSubItems){....

...

thanks again.
dbc

[whoisgregg]

All that block of code does is slide over the list of links to be underneath the tab above it. If you set the "leftAlignSubItems" variable to be true (somewhere higher in the script) then it won't even attempt to execute that block at all. :)

[deathbycheese]

voila! I can't believe it was that simple.

I just set the "leftAlignSubItems" variable to be true and it not only works great, but looks fine too.

Thanks SO much whoisgregg. Your diligence on this is very appreciated and has saved me lots of stress. I just hope that someday I can help someone on the forums as well as you helped me.

a loyal fan,
dbc

[whoisgregg]

Happy I could help. :)