この mooTools スライダー スクリプト -- SlideItMoo -- を IE8 で動作させるのに問題があります。他のすべてのブラウザーでは問題なく動作しますが、IE8 では、以下に示す 3 行目で「オブジェクトはこのプロパティまたはメソッドをサポートしていません」というエラーが表示されます。洞察や助けをいただければ幸いです。
initialize: function(options){
this.setOptions(options);
ERROR>> this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements <= this.options.itemsVisible ) return;
// width of thumbsContainer children
this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
this.currentElement = 0;
this.direction = this.options.direction;
this.autoSlideTotal = this.options.autoSlide + this.options.duration;
this.begin();
},
参照用の完全なスクリプトは次のとおりです。
var SlideItMoo = new Class({
Implements: [Options],
options: {
overallContainer: null,
elementScrolled: null,
thumbsContainer: null,
itemsVisible:5,
elemsSlide: null,
itemsSelector: null,
itemWidth: null,
showControls:1,
transition: Fx.Transitions.linear,
duration: 800,
direction: 1,
autoSlide: false,
mouseWheelNav: false
},
initialize: function(options){
this.setOptions(options);
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements <= this.options.itemsVisible ) return;
this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
this.currentElement = 0;
this.direction = this.options.direction;
this.autoSlideTotal = this.options.autoSlide + this.options.duration;
this.begin();
},
begin: function(){
this.setContainersSize();
this.myFx = new Fx.Morph(this.options.thumbsContainer, {
wait: true,
transition: this.options.transition,
duration: this.options.duration
});
this.addControls();
if( this.options.mouseWheelNav && !this.options.autoSlide ){
$(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
new Event(ev).stop();
this.slide(-ev.wheel);
}.bind(this));
}
if( this.options.autoSlide )
this.startAutoSlide();
},
setContainersSize: function(){
$(this.options.overallContainer).set({
styles:{
'width': this.options.itemsVisible * this.elementWidth + 50 * this.options.showControls
}
});
$(this.options.elementScrolled).set({
styles:{
'width': this.options.itemsVisible * this.elementWidth
}
});
$(this.options.thumbsContainer).set({
styles:{
'width': this.totalElements * (this.elementWidth + 10)
}
});
},
addControls: function(){
if( !this.options.showControls ) return;
this.fwd = new Element('div', {
'class': 'SlideItMoo_forward',
'events':{
'click':this.slide.pass(1, this)
}
});
this.bkwd = new Element('div', {
'class': 'SlideItMoo_back',
'events':{
'click': this.slide.pass(-1, this)
}
});
$(this.options.overallContainer).adopt(this.fwd, this.bkwd);
},
slide: function( direction ){
if(this.started) return;
this.direction = direction;
var currentIndex = this.currentIndex();
if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
this.endingElem = this.currentElement;
for(var i = 0; i < this.options.elemsSlide; i++ ){
this.endingElem += direction;
if( this.endingElem >= this.totalElements ) this.endingElem = 0;
if( this.endingElem < 0 ) this.endingElem = this.totalElements-1;
}
}
if( this.direction == -1 ){
this.rearange();
$(this.options.thumbsContainer).setStyle('margin-left', -this.elementWidth);
}
this.started = true;
this.myFx.start({
'margin-left': this.direction == 1 ? -this.elementWidth : 0
}).chain( function(){
this.rearange(true);
if(this.options.elemsSlide){
if( this.endingElem !== this.currentElement ) this.slide(this.direction);
else this.endingElem=null;
}
}.bind(this) );
},
rearange: function( rerun ){
if(rerun) this.started = false;
if( rerun && this.direction == -1 ) {
return;
}
this.currentElement = this.currentIndex( this.direction );
//$('debug').innerHTML+= this.currentElement+'<br>';
$(this.options.thumbsContainer).setStyle('margin-left',0);
if( this.currentElement == 1 && this.direction == 1 ){
this.elements[0].injectAfter(this.elements[this.totalElements-1]);
return;
}
if( (this.currentElement == 0 && this.direction ==1) || (this.direction==-1 && this.currentElement == this.totalElements-1) ){
this.rearrangeElement( this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements-2] : this.elements[0]);
return;
}
if( this.direction == 1 ){
this.rearrangeElement( this.elements[this.currentElement-1], this.elements[this.currentElement-2]);
}
else{
this.rearrangeElement( this.elements[this.currentElement], this.elements[this.currentElement+1]);
}
},
rearrangeElement: function( element , indicator ){
this.direction == 1 ? element.injectAfter(indicator) : element.injectBefore(indicator);
},
currentIndex: function(){
var elemIndex = null;
switch( this.direction ){
case 1:
elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.direction;
break;
case -1:
elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction;
break;
}
return elemIndex;
},
startAutoSlide: function(){
this.startIt = this.slide.bind(this).pass(this.direction||1);
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.elements.addEvents({
'mouseover':function(){
$clear(this.autoSlide);
}.bind(this),
'mouseout':function(){
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
}.bind(this)
})
}
}))