A JavaScript plugin to contain an element within its parent element
Find a file
2015-06-30 17:47:55 -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
LICENSE Initial commit 2015-06-30 16:09:53 -04:00
package.json Adding gulp to minify with uglyjs 2015-06-30 16:50:22 -04:00
README.md Set filetype of the code to javascript 2015-06-30 17:47:55 -04:00

Contain Element

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

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 = function(event) { contain.update(); };

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

Credits

Written by Williams New York

Authors

LICENSE

Licensed under the MIT license.