Return to Snippet

Revision: 17543
at September 9, 2009 11:00 by pdswan


Initial Code
/* 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;
		}
	}
});

Initial URL


Initial Description


Initial Title
Scriptaculous Effect Additions

Initial Tags
animation, extension

Initial Language
JavaScript