scripty2

namespace Element

Description

A collection of shortcut methods that are added to all DOM elements.

Methods

Class methods

  • cumulativeOffset #

    Element.cumulativeOffset(@element) -> Element.Offset

    Returns the offsets of element from the top left corner of the document.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • cumulativeScrollOffset #

    Element.cumulativeScrollOffset(@element) -> Element.Offset

    Calculates the cumulative scroll offset of an element in nested scrolling containers.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • effect #

    Element.effect(@element, effect[, options]) -> element

    Initialize and play the specified effect on the element.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • getLayout #

    Element.getLayout(@element) -> Element.Layout

    Returns an instance of Element.Layout for measuring an element's dimensions.

    Note that this method returns a new Element.Layout object each time it's called. If you want to take advantage of measurement caching, retain a reference to one Element.Layout object, rather than calling Element.getLayout whenever you need a measurement. You should call Element.getLayout again only when the values in an existing Element.Layout object have become outdated.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • getStyles #

    Element.getStyles(@element) -> Object
    • element (String | Object) – DOM object or element ID

    Returns an object with all currently applied style attributes for a given DOM object. This includes all styles from stylesheets, properties set with style attributes and CSS properties set with the DOM API.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • measure #

    Element.measure(@element, property) -> Number

    Gives the pixel value of element's dimension specified by property.

    Useful for one-off measurements of elements. If you find yourself calling this method frequently over short spans of code, you might want to call Element.getLayout and operate on the Element.Layout object itself (thereby taking advantage of measurement caching).

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • positionedOffset #

    Element.positionedOffset(@element) -> Element.Offset

    Returns element's offset relative to its closest positioned ancestor (the element that would be returned by Element.getOffsetParent).

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • viewportOffset #

    Element.viewportOffset(@element) -> Array

    Returns the X/Y coordinates of element relative to the viewport.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

Instance methods

  • appear #

    Element#appear([, options]) -> element
Element.appear(element[, options]) -> element

    Make an element appear by fading it in from 0% opacity.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • cloneWithoutIDs #

    Element#cloneWithoutIDs() -> element
Element.cloneWithoutIDs(element) -> element

    Returns a clone of the element with all id attributed removed.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • fade #

    Element#fade([, options]) -> element
Element.fade(element[, options]) -> element

    Fade out an element from its current opacity setting (or 100%).

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • morph #

    Element#morph(style[, options]) -> element
Element.morph(element, style[, options]) -> element

    Dynamically adjust an element's CSS styles to the CSS properties given in the style argument.

    This method is the preferred way to invoke CSS-based effects:

    $('element_id').morph('width:500px');
$('element_id').morph('width:500px', 'slow');
$('element_id').morph('width:500px', function(){ alert('finished!'); });
$('element_id').morph('width:500px', 2); // duration 2 seconds
    Complex options can be specified with an Object literal:
    $('element_id').morph('width:500px;height:500px', {
  duration: 4,
  transition: 'linear',
  delay: .5,
  propertyTransitions: {
    width: 'mirror', height: 'easeInOutCirc'
  },
  after: function(){ alert('finished');  }
});
    Morphs can be chained:
    // the height morph will be executed immediately following
// the width morph
$('element_id').morph('width:500px').morph('height:500px');
    By default, morph will create a new S2.FX.Queue for the element if there isn't on already, and use this queue for queueing up chained morphs. To prevent a morph from queuing at the end, use the position: 'parallel' option.
    // the height morph will be executed at the same time as the width morph
$('element_id').morph('width:500px').morph('height:500px',{ position: 'parallel' });
    See also S2.FX.Morph.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • scrollTo #

    Element#scrollTo([, to[, options]]) -> element
Element.scrollTo(element[, to[, options]]) -> element
    • to (Number) – vertical scroll position in pixels
    • options (Object) – effect options

    This method augments Prototype's Element.scrollTo method.

    With just the @element parameter given, it will revert to Prototype's default implementation: the viewport will be scrolled (without animation) to contain the element.

    If given the to parameter, the elements contents will be smoothly scrolled to the specified scrollTop position.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • transform #

    Element#transform(transforms) -> element
Element.transform(element, transforms) -> element
    • transforms (Object) – rotation angle and scale factor

    Rotate and scale an element. transforms is an object containing:

    • rotation: Rotation angle in radians
    • scale: Scale factor

    Example:

    // rotate by 1.5 radians, scale by 200%
$('element_id').transform({ rotation: 1.5, scale: 2 });
    [[manipulate:update]] event memos can be directly fed into Element#transform:
    $('element_id').observe('manipulate:update', function(event){
   $('element_id').transform(event.memo);
});
    To convert degrees to radians, use:
    radians = degrees * (Math.PI/180);

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.