Scriptaculous Effect Additions


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /* patch BlindUp and BlindDown for IE */
  2. Effect.BlindUp = function(element) {
  3. element = $(element);
  4. element.makeClipping();
  5. return new Effect.Scale(element, 0,
  6. Object.extend({ scaleContent: false,
  7. scaleX: false,
  8. restoreAfterFinish: true,
  9. /* Change here: IE will not correctly clip if there are layers inside element! */
  10. afterSetupInternal: function( effect ){
  11. effect.element.makePositioned().makeClipping();
  12. },
  13. afterFinishInternal: function(effect) {
  14. effect.element.hide().undoClipping().undoPositioned();
  15. }
  16. }, arguments[1] || { })
  17. );
  18. };
  19. Effect.BlindDown = function(element) {
  20. element = $(element);
  21. var elementDimensions = element.getDimensions();
  22. return new Effect.Scale(element, 100, Object.extend({
  23. scaleContent: false,
  24. scaleX: false,
  25. scaleFrom: 0,
  26. scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
  27. restoreAfterFinish: true,
  28. afterSetupInternal: function(effect) {
  29. /* Change here: IE will not correctly clip if there are layers inside the element!
  30.   effect.element.makeClipping().setStyle({height: '0px'}).show();*/
  31. effect.element.makePositioned().makeClipping().setStyle({height: '0px'}).show();
  32. },
  33. afterFinishInternal: function(effect) {
  34. /*effect.element.undoClipping();*/
  35. effect.element.undoClipping().undoPositioned();
  36. }
  37. }, arguments[1] || { }));
  38. };
  39.  
  40. Effect.Appear = function(element) {
  41. element = $(element);
  42. var options = Object.extend({
  43. from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
  44. to: 1.0,
  45. // force Safari to render floated elements properly
  46. afterFinishInternal: function(effect) {
  47. effect.element.forceRerendering();
  48. },
  49. beforeSetupInternal: function(effect) {
  50. effect.element.setOpacity(effect.options.from).show();
  51. }}, arguments[1] || { });
  52. return new Effect.Opacity(element,options);
  53. };
  54.  
  55. Effect.Scroll = Class.create( Effect.Base, {
  56. initialize: function( element ){
  57. this.element = $(element);
  58. if (!this.element) throw(Effect._elementDoesNotExistError);
  59. var options = Object.extend({
  60. x: 0,
  61. y: 0,
  62. mode: 'absolute'
  63. }, arguments[1] || {});
  64. this.start(options);
  65. },
  66. setup: function(){
  67. if( this.element === window){
  68. if( !Object.isUndefined(this.element.scrollY)){
  69. this.originalTop = this.element.scrollY;
  70. this.originalLeft = this.element.scrollX;
  71. //console.log('scrollY/X: ' + this.originalTop + ', ' + this.originalLeft);
  72. }else if( !Object.isUndefined(document.documentElement.scrollTop) ){
  73. this.originalTop = document.documentElement.scrollTop;
  74. this.originalLeft = document.documentElement.scrollLeft;
  75. //console.log('documentElement.scrollTop/Left: ' + this.originalTop + ', ' + this.originalLeft);
  76. }else if( !Object.isUndefined(document.scrollTop) ){
  77. this.originalTop = document.scrollTop;
  78. this.originalLeft = document.scrollLeft;
  79. //console.log('scrollTop/Left: ' + this.originalTop + ', ' + this.originalLeft);
  80. }else{
  81. this.orginalTop = this.originalLeft = 0;
  82. }
  83. }else{
  84. this.originalTop = this.element.scrollTop;
  85. this.originalLeft = this.element.scrollLeft;
  86. }
  87.  
  88. if( this.options.mode == 'absolute'){
  89. this.options.x -= this.originalLeft;
  90. this.options.y -= this.originalTop;
  91. }
  92. },
  93. update: function( pos ){
  94. var new_x = this.originalLeft + this.options.x * pos;
  95. var new_y = this.originalTop + this.options.y * pos;
  96. this._setScroll( new_x, new_y);
  97. },
  98. _setScroll: function( x, y){
  99. if( this.element === window){
  100. window.scrollTo(x, y);
  101. }else{
  102. this.element.scrollTop = y;
  103. this.element.scrollLeft = x;
  104. }
  105. }
  106. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.