CODEWITHSUNDEEP
javascriptinternet-explorer-8

Reputation:

Javascript menu not working in IE8

Website is available at http://danrowley.net/backstop_sandbox/

The drop-down menu doesn't stay open when you go to mouse over it.

Javascript is:

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}

// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  if(d>0) c.style.display='block';
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh + (dist * d))<10 && d<0) c.style.display='none';

  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}

Upvotes: 0

Views: 2899

Answers (2)

Jon
Jon

Reputation:

One thing that you could try is changing the compatibility. Go to Tools (drop down menu) - click on Compatibility View.

This fixed my issues and no need to change any settings.

Good Luck

Upvotes: 0

annakata
annakata

Reputation: 75844

Quite possibly (don't have IE8 handy I'm afraid) this is because you're triggering onmouseout on the header after onmouseover on the content, probably due to layout but, hey, it's IE.

To be honest though, it is inadvisable to reinvent the wheel here - I strongly advise you to just get a mature menu widget from jQuery or similar.

Upvotes: 1

Related Questions