madrobby / scriptaculous

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.

Home | Edit | New

Effect.BlindDown

Combination Effects > Effect.BlindDown

This effect simulates a window blind, where the contents of the affected elements stay in place.

Examples


Effect.BlindDown('id_of_element');
Effect.BlindDown('id_of_element', { duration: 3.0 });

Options

Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0

Notes

Works safely with most Block Elements, except table rows, table bodies and table heads.

Also, if you would like the block hidden when someone first lands on your page, you must use the display: none property within the style attribute of the div/block tag, and not in the CSS class for the div.
Example:

<div style="display: none" id = "id_of_element">
Blind content

The opposite of Effect.BlindDown is Effect.BlindUp.

If the element you’re blinding has top or bottom padding, the padding isn’t applied unless the element is full size. This will make an odd jumping motion right after the end of a blinddown or right before the start of a blindup. To fix it, wrap your padded element in another element, and do the blind on the outer one.

Demo

Source code of this demo

<div id="blinddown_demo" style="display:none; width:80px; height:80px; background:#ccc;">
  This is some test content. This is some test content.

Effect.BlindRight

For horizontal action try this snippet:


Effect.BlindRight = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleY: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({
        width: '0px',
        height: effect.dims[0] + 'px'
      }).show();
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || { }));
};



Pages feed

Last edited by randrews, Wed Jun 24 14:15:09 -0700 2009
Home | Edit | New
Versions: