У меня есть сайт Magento, использующий JS (прототип) для отображения содержимого с вкладками на страницах продукта, например, такого: http://persianrose.co.uk/index.php/face/rose-day-cream.html
Это простое JS изменяющее свойство отображения CSS, основанное на активной вкладке, но текстовое содержимое в контейнере вкладок не отображается для некоторых пользователей. [NB?] Некоторые пользователи говорят, что могут видеть вкладки, если обновляют страницу?
Не существует шаблона, подобного всем пользователям в конкретной версии IE; Я сузил его до некоторых людей, которые используют IE 7 и IE8. Некоторые нет. Мне не удалось воссоздать проблему в моих версиях этих браузеров, поэтому я полагаюсь на отзывы от партнеров, у которых есть информация о том, сработали ли те вещи, которые я пробовал, чего у них пока нет.
В результате тестирования этих пользователей были случаи, когда два пользователя имели буквально идентичные версии IE, но один правильно просматривал содержимое контейнера вкладок, а другой не мог его видеть.
Я пробовал исправлять различные возможные причуды IE CSS. Теперь я ставлю под сомнение мой JS? Их настройки безопасности браузера? Я не знаю. Я в тупике ...
Из задействованных языков я менее всего разбираюсь в JavaScript, так что это будет первое место, где нужно искать ошибку.
Вот снимок экрана с выводом от пользователя: http://dl.dropbox.com/u/6136148/error.jpg
Заранее спасибо за ваше время и усилия.
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 (прототип):
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'); });