/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* patch BlindUp and BlindDown for IE */ Effect.BlindUp = function(element) { element = $(element); element.makeClipping(); return new Effect.Scale(element, 0, Object.extend({ scaleContent: false, scaleX: false, restoreAfterFinish: true, /* Change here: IE will not correctly clip if there are layers inside element! */ afterSetupInternal: function( effect ){ effect.element.makePositioned().makeClipping(); }, afterFinishInternal: function(effect) { effect.element.hide().undoClipping().undoPositioned(); } }, arguments[1] || { }) ); }; Effect.BlindDown = function(element) { element = $(element); var elementDimensions = element.getDimensions(); return new Effect.Scale(element, 100, Object.extend({ scaleContent: false, scaleX: false, scaleFrom: 0, scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, afterSetupInternal: function(effect) { /* Change here: IE will not correctly clip if there are layers inside the element! effect.element.makeClipping().setStyle({height: '0px'}).show();*/ effect.element.makePositioned().makeClipping().setStyle({height: '0px'}).show(); }, afterFinishInternal: function(effect) { /*effect.element.undoClipping();*/ effect.element.undoClipping().undoPositioned(); } }, arguments[1] || { })); }; Effect.Appear = function(element) { element = $(element); var options = Object.extend({ from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0), to: 1.0, // force Safari to render floated elements properly afterFinishInternal: function(effect) { effect.element.forceRerendering(); }, beforeSetupInternal: function(effect) { effect.element.setOpacity(effect.options.from).show(); }}, arguments[1] || { }); return new Effect.Opacity(element,options); }; Effect.Scroll = Class.create( Effect.Base, { initialize: function( element ){ this.element = $(element); if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ x: 0, y: 0, mode: 'absolute' }, arguments[1] || {}); this.start(options); }, setup: function(){ if( this.element === window){ if( !Object.isUndefined(this.element.scrollY)){ this.originalTop = this.element.scrollY; this.originalLeft = this.element.scrollX; //console.log('scrollY/X: ' + this.originalTop + ', ' + this.originalLeft); }else if( !Object.isUndefined(document.documentElement.scrollTop) ){ this.originalTop = document.documentElement.scrollTop; this.originalLeft = document.documentElement.scrollLeft; //console.log('documentElement.scrollTop/Left: ' + this.originalTop + ', ' + this.originalLeft); }else if( !Object.isUndefined(document.scrollTop) ){ this.originalTop = document.scrollTop; this.originalLeft = document.scrollLeft; //console.log('scrollTop/Left: ' + this.originalTop + ', ' + this.originalLeft); }else{ this.orginalTop = this.originalLeft = 0; } }else{ this.originalTop = this.element.scrollTop; this.originalLeft = this.element.scrollLeft; } if( this.options.mode == 'absolute'){ this.options.x -= this.originalLeft; this.options.y -= this.originalTop; } }, update: function( pos ){ var new_x = this.originalLeft + this.options.x * pos; var new_y = this.originalTop + this.options.y * pos; this._setScroll( new_x, new_y); }, _setScroll: function( x, y){ if( this.element === window){ window.scrollTo(x, y); }else{ this.element.scrollTop = y; this.element.scrollLeft = x; } } });