Tab behaviour works in IE < 9, Safari and Chrome, but not in FF and IE9

Question

I wonder whether anyone could possibly give me a clue here. There's some tab switching content on this page http://www.brt.org.uk/donate

That works in Safari, Chrome and IE up to version 8 I believe, but NOT in Firefox and IE 9. It's a mystery to me as it used to work nicely in all browsers.

I would be grateful for any ideas.

There is this script that does it, and it used Mootools http://www.brt.org.uk/plugins/tabcontrol/tabcontrol.js

Many thanks for any help!

Answer 1

you are using mootools 1.2.1 - which is 3+ yrs old. There are two issues that will affect it.

1. firefox 18.0.1 introduced String.prototype.contains which differs in implementation from the version shipped with mootools. until version 1.3, that method was not 'protected' and rewritten by mootools so the change breaks the selector engine.

2. 1.2.1 can be incompatible with IE9 due to changes to do with bind implementation. this was fixed in 1.2.4 (or 5), it also has to do with certain browser sniffing methods used in older mootools. see release notes for 1.2.5 - http://mootools.net/blog/2010/09/15/mootools-core-1-2-5/ - these may not affect every site/usecase, but when they do, you need to upgrade.

on the whole, you need to upgrade - i suggest 1.4.5 with compatibility from the mootools site.

this tab class is written wrong:

TabControl = new Class();
// ..
TabControl.prototype = {
    // stuff
}

this totally circumvents the mootools Class constructor function that does a lot in setting up the prototype for inheritance and dereferencing constructor objects.

rewrite to

var tabControl = new Class({
    // 'methods' and properties... 
});