views:

20

answers:

1

I'm trying to diagnose a problem with an older site than I'm supporting. The problem is that in IE8, a SELECT tag is being hidden. Turns out it is due to an older version of a calendar.js which is applying visibility:hidden style to not only SELECT Tags, but also applets and iframes.

I'm rusty on my javascript and details of older browser quirks, but the thing I find odd is that it's hiding these tags when they are unrelated to the calendar. In the page with the problem, this select tag that's being hidden is in a div above the calendar objects, although they are in the same form.

Is this a problem with an earlier version of IE? Would it be 'safe' to put in an if to check the version of IE, and not apply these styles for version 8 and later?

Here's the function from calendar.js:

Calendar.prototype.hideShowCovered = function () {
  if (!Calendar.is_ie && !Calendar.is_opera)
    return;
  function getVisib(obj){
    var value = obj.style.visibility;
    if (!value) {
      if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
        if (!Calendar.is_khtml)
          value = document.defaultView.
            getComputedStyle(obj, "").getPropertyValue("visibility");
        else
          value = '';
      } else if (obj.currentStyle) { // IE
        value = obj.currentStyle.visibility;
      } else
        value = '';
    }
    return value;
  };

  var tags = new Array("applet", "iframe", "select");
  var el = this.element;

  var p = Calendar.getAbsolutePos(el);
  var EX1 = p.x;
  var EX2 = el.offsetWidth + EX1;
  var EY1 = p.y;
  var EY2 = el.offsetHeight + EY1;

  for (var k = tags.length; k > 0; ) {
    var ar = document.getElementsByTagName(tags[--k]);
    var cc = null;

    for (var i = ar.length; i > 0;) {
      cc = ar[--i];

      p = Calendar.getAbsolutePos(cc);
      var CX1 = p.x;
      var CX2 = cc.offsetWidth + CX1;
      var CY1 = p.y;
      var CY2 = cc.offsetHeight + CY1;

      if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
        if (!cc.__msh_save_visibility) {
          cc.__msh_save_visibility = getVisib(cc);
        }
        cc.style.visibility = cc.__msh_save_visibility;
      } else {
        if (!cc.__msh_save_visibility) {
          cc.__msh_save_visibility = getVisib(cc);
        }
        cc.style.visibility = "hidden";
      }
    }
  }
};
+1  A: 

Those objects are/were always at the top of the Z order, meaning that they would show up on top of your calendar if it tried to appear on top of them.

It's no longer true for select in any modern browser, and (you'd need to test it but) I suspect the same thing is true for iframe. They certainly don't have this problem in IE8.

applet, on the other hand, almost certainly still has the problem, being a heavyweight window embedded into the page. Flash in heavyweight-window mode will have the same problem too.

RichieHindle