SELECT boxes show through menu.

Search engine friendly UL list type menu for Actinic V8 and V9. Styled by CSS and animated by a small JavaScript.
Post Reply
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

SELECT boxes show through menu.

Post by norman »

This is a well known IE6 bug whereby certain type of page content are always treated as being above everything else. More modern browsers are OK.

The fix is to conditionally hide such content when the menu is active.

To implement this edit listmenuactivate.js (in your Site folder) and look for the line:

Code: Select all

// Finally, on page load you have to activate the menu by calling its 'activateMenu()' method.
Append the following above it.

Code: Select all

// Fix IE6 bug.  Hide SELECT fields and IFRAMES when Menu Active.
FSMenu.prototype.toggleElements = function(show)
{
 // CONFIGURATION: Here's a list of tags that will be hidden by menus. Modify to fit your site.
 var tags = ['select', 'iframe'];

 if (!isDOM) return;
// Norman commented out Angus's line below as patch failed to hide boxes with it in!
//  if (!show) for (var m in this.menus) if (this.menus[m].visible) return;
 for (var t in tags)
 {
  var elms = document.getElementsByTagName(tags[t]);
  for (var e = 0; e < elms.length; e++) elms[e].style.visibility = show ? 'visible' : 'hidden';
 }
};
if ( navigator.appVersion.indexOf('MSIE 6') > -1 )
  {
  addEvent(listMenu, 'show', function() { this.toggleElements(0) }, 1);
  addEvent(listMenu, 'hide', function() { this.toggleElements(1) }, 1);
  }
Technical note:

The above is a variation of Twinhelix's suggested tweak (documented in fsmenu_extra.js), with the addition of code to only do this if IE6 detected. Also one line has been commented out as this seemed to prevent this tweak from working.
Norman
Post Reply