kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-11-23 06:14:09 -05:00
Code Issues Projects Releases Packages Wiki Activity
A JavaScript plugin to contain an element within its parent element
21 commits 7 branches 21 tags 282 KiB
JavaScript 100%
Find a file
Luke Evers 72405347c6 Adding an index.html file for gh-pages
2015-07-01 12:30:39 -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 Remove scale/position events and add 'update' function that will run this functionality as needed, and update the README to reflect this change 2015-06-30 17:40:10 -04:00
contain-element.min.js Update the minified version of the file 2015-06-30 17:41:13 -04:00
gulpfile.js Adding gulp to minify with uglyjs 2015-06-30 16:50:22 -04:00
index.html Adding an index.html file for gh-pages 2015-07-01 12:30:39 -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 Remove callbacks in examples. 2015-07-01 11:30:28 -04:00

README.md

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: middle).

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
  • Includes function to update the size and position

Usage

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

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

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

Credits

Written by Williams New York

Authors

LICENSE

Licensed under the MIT license.