A JavaScript plugin to contain an element within its parent element
Find a file
2015-09-08 00:24:22 -04:00
.gitignore Adding gulp to minify with uglyjs 2015-06-30 16:50:22 -04:00
bower.json Adding myself to bower.json authors 2015-06-30 16:36:12 -04:00
contain-element.js Tweak the wording in the comments 2015-09-08 00:24:22 -04:00
contain-element.min.js Add setters and getters for the width and alignment properties 2015-09-08 00:23:16 -04:00
gulpfile.js Adding gulp to minify with uglyjs 2015-06-30 16:50:22 -04:00
LICENSE Change WilliamsNY to Wiliams New York 2015-07-01 11:17:20 -04:00
package.json Adding gulp to minify with uglyjs 2015-06-30 16:50:22 -04:00
README.md Add setters and getters for the width and alignment properties 2015-09-08 00:23:16 -04:00

Contain Element

A JavaScript plugin to contain an element within its parent element.

Description

The plugin scales an element to the minimum size required for it to be completely contained within its parent, and retains its original aspect ratio by cropping portions that don't fit based on its vertical and horizontal alignment (by default both are set to: center).

Demo

Features

  • Pure JavaScript with no dependencies
  • Configures the horizontal and vertical alignment of the contained element
  • Can detect the native size or have it specified at runtime

Usage

window.onload = function() {
    var contain = new ContainElement({
        id: 'element', // the id of the element to be contained
        width: '100', // (optional) native element width in pixels (unset: detected element width)
        height: '100', // (optional) native element height in pixels (unset: detected element height)
        valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
        halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
    });

    // (example) update the size and positioning on window resize
    window.onresize = contain.update;

    // (example) update the size and positioning on orientation change
    window.addEventListener('orientationchange', contain.update);
};

Functions

  • update(): Update the size and position of the contained element.
  • setWidth(width): Set the width (run update() to apply).
  • setHeight(height): Set the height (run update() to apply).
  • setValign(valign): Set the vertical alignment (run update() to apply).
  • setHalign(halign): Set the horizontal alignment (run update() to apply).
  • getWidth(): Return the current width.
  • getHeight(): Return the current height.
  • getValign(): Return the current vertical alignment.
  • getHalign(): Return the current horizontal alignment.
  • getScale(): Return the current scale factor being applied to the contained element.

Credits

Written by Williams New York

Authors

LICENSE

Licensed under the MIT license.