Question

I have a Magento site using JS (prototype) to display tabbed content on product pages, such as this one: http://persianrose.co.uk/index.php/face/rose-day-cream.html

Its a simple JS changing CSS display property based on the active tab, but the textual content within the tab container does not show for some users. [NB?] some users say they can see the tabs if they refresh the page?

There isn’t a pattern such as all users on a particular version of IE; I have narrowed it down to some people who use IE 7 and IE8. Some not. I haven’t been able to recreate the issue in my versions of those browsers so am relying on feedback from associates who do have it as to whether the things I have tried have worked, which so far they have not.

From these users’ testing, there have been cases where two users have literally identical versions of IE but one views the tab-container content correctly and the other cannot see it.

I’ve tried patching various possible IE CSS quirks. Now I’m questioning my JS? Their browser security settings? I don’t know. I’m stumped…

Of the languages involved I am least competent with JavaScript, so that would be the first place to look for a fail.

Here is a screenshot of the output from an effected user: http://dl.dropbox.com/u/6136148/error.jpg

Thanks in advance for your time and effort.

HTML:

<ul id="tabs">
  <li class="tab"><a href="#how-to-use">How to use</a></li>
  <li class="tab"><a href="#ingredients">Ingredients</a></li>
</ul>
<div class="tab-container">
  <div id="how-to-use">This is a wonderful toner for use after cleansing morning and night.</div>
  <div id="ingredients">Aqua Rosa damascena, Citral, Citronellol, Farnesol, Linalool, Geraniol.</div>
</div>

CSS:

ul#tabs {list-style:none; padding:0}
ul#tabs li {float:left; margin:0 4px 0 0}
ul#tabs a {
  background:#fcfcfc;
  color:#bbb;
  display:block;
  font-family:'ColaborateRegular';
  font-size:13px;
  padding:5px 10px;
  width:80px;
  border:1px solid #eee;
  border-bottom-color:#ddd;
  position:relative;
  text-align:center;
  text-decoration:none;
  z-index:99;
}
ul#tabs a.active-tab {
  background:#fff;
  color:#843549;
  border-color:#ddd;
  border-bottom:1px solid #fff
}
.tab-container {
  padding:10px;
  margin-top:9px;
  width:390px;
  height:1%;
  min-height: 1% ;
  border:1px solid #ddd;
  zoom: 1;
  position: relative;
}

.tab-container div {display:none}
.tab-container div.active-tab-body, 
.tab-container div.active-tab-body div {display:block}

JS (prototype):

var Fabtabs = Class.create({
initialize : function(element,options) {
    var parent = this.element = $(element);
    this.options = Object.extend({
      hover: false,
      remotehover: false,
      anchorpolicy: 'allow-initial' // 'protect', 'allow', 'allow initial', 'disable'
    }, options || {});
    this.menu = this.element.select('a[href*="#"]');
    this.hrefs = this.menu.map(function(elm){
      return elm.href.match(/#(\w.+)/) ? RegExp.$1 : null;
    }).compact();
    this.on(this.getInitialTab());
    var onLocal = function(event) {
      if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var elm = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(elm);
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
      }else {
      document.location = elm.href;
  }
};
var onRemote = function(event) {
  if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var trig = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(this.tabID(trig));
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
    } else {
        document.location = elm.href;
      }
  }
    this.element.observe('click', onLocal.bindAsEventListener(this));
    if(this.options.hover) {
      this.menu.each(function(elm){elm.observe('mouseover', onLocal.bindAsEventListener(this))}.bind(this));
    }
    var triggers = []; 
    this.hrefs.each(function(id){
      $$('a[href="#' + id + '"]').reject(function(elm){
        return elm.descendantOf(parent)
      }).each(function(trig){
        triggers.push(trig);
      });
    })
    triggers.each(function(elm){
      elm.observe('click', onRemote.bindAsEventListener(this));
      if(this.options.remotehover) {
      elm.observe('mouseover', onRemote.bindAsEventListener(this));
    }
    }.bind(this));
},
activate: function(elm) {
  if(typeof elm == 'string') {
    elm = this.element.select('a[href="#'+ elm +'"]')[0];
  }
  this.on(elm);
    this.menu.without(elm).each(this.off.bind(this));
},
off: function(elm) {
    $(elm).removeClassName('active-tab');
    $(this.tabID(elm)).removeClassName('active-tab-body');
},
on: function(elm) {
    $(elm).addClassName('active-tab');
    $(this.tabID(elm)).addClassName('active-tab-body');
},
tabID: function(elm) {
    return elm.href.match(this.re)[1];
},
getInitialTab: function() {
    if(this.options.anchorpolicy !== 'disable' && document.location.href.match(this.re)) {
      var hash = RegExp.$1;
      if(hash.substring(0,1) == "."){
        hash = hash.substring(1);
      }
      return this.element.select('a[href="#'+ hash +'"]')[0];
    } else {
      return this.menu.first();
    }
},
re: /#(\.?\w.+)/
});
document.observe("dom:loaded", function(){ new Fabtabs('tabs'); });

Answer 1

You’ve got quite a clear error there. In line 16 you are trying to access this.element in order to get to your a elements. However, IE tells you this.element is nothing (null). So I would suspect it goes wrong with assigning:

var parent = this.element = $(element);

To check, you could simplify:

var myElement = $(element);

thus assigning a var with the element you passed into the initialize function. Then, you could check if it’s there as far as your browser is concerned:

console.info(myElement);

open your console and check what it says. If it still says null then you have to dig deeper. When it doesn’t pass line 16 it isn’t hooking up to any element, so try if you can get to some other element as a test. If that fails, it may well get stuck traversing the DOM or has some weird javascript/browser configuration issues.