diff --git a/README.md b/README.md index d6802bf..ed4be4a 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,3 @@ -# 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](http://williamsny.github.io/contain-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 - -```javascript -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: 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 - screen.addEventListener('orientationchange', contain.update); -}; -``` - -## Credits - -Written by [Williams New York](http://williamsnewyork.com) - -### Authors - -* [Kevin MacMartin](https://github.com/prurigro/) -* [Luke Evers](https://github.com/lukevers/) - -## LICENSE - -Licensed under the [MIT license](http://opensource.org/licenses/MIT). +# Contain Element GH-Pages +View the master branch to view the actual code! diff --git a/bower.json b/bower.json deleted file mode 100644 index f6f512d..0000000 --- a/bower.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "contain-element", - "description": "A JavaScript plugin to contain an element within its parent element", - "authors": [ - "Kevin MacMartin", - "Luke Evers" - ], - "license": "MIT", - "main": "./contain-element.min.js", - "ignore": [ - "**/.*" - ], - "repository": { - "type": "git", - "url": "git://github.com/WilliamsNY/contain-element.git" - } -} diff --git a/contain-element.js b/contain-element.js deleted file mode 100644 index 30df6fe..0000000 --- a/contain-element.js +++ /dev/null @@ -1,80 +0,0 @@ -function ContainElement(options) { - var scaleFactor = 1; - var element = document.getElementById(options.id); - var elementWidth = options.width || element.offsetWidth; - var elementHeight = options.height || element.offsetHeight; - - // Apply required attributes to the element and its parents if they aren't already set - if (element.style.position != 'absolute') - element.style.position = 'absolute'; - if (element.parentElement.style.overflow != 'hidden') - element.parentElement.style.overflow = 'hidden'; - if (element.parentElement.style.position != 'relative' && element.parentElement.style.position != 'absolute' && element.parentElement.style.position != 'fixed') - element.parentElement.style.position = 'relative'; - - function updateContain() { - var parentWidth = element.parentElement.offsetWidth; - var parentHeight = element.parentElement.offsetHeight; - - // Run the scale/position functionality if able to determine the document width and height - if ((parentWidth) && (parentHeight)) { - // Calculate the scale factor - if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor))) - scaleFactor = (parentWidth / elementWidth); - else - scaleFactor = (parentHeight / elementHeight); - - // Scale the element using the scale factor - element.style.width = (elementWidth * scaleFactor) + 'px'; - element.style.height = (elementHeight * scaleFactor) + 'px'; - - // Anchor the element horizontally to the left/middle/right - if (parentWidth < (elementWidth * scaleFactor)) { - switch(options.halign) { - case 'left': - // anchor horizontally to the left of the parent element - element.style.left = 0 + 'px'; - break; - case 'right': - // anchor horizontally to the right of the parent element - element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px'; - break; - default: - // anchor horizontally to the center of the parent element - element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2 )) + 'px'; - } - } else { - element.style.left = 0 + 'px'; - } - - // Anchor the element vertically to the top/middle/bottom - if ((elementHeight * scaleFactor) > parentHeight) { - switch(options.valign) { - case 'top': - // anchor vertically to the top of the parent element - element.style.top = 0 + 'px'; - break; - case 'bottom': - // anchor veritcally to the bottom of the parent element - element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px'; - break; - default: - // anchor vertically to the center of the parent element - element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2 )) + 'px'; - } - } else { - element.style.top = 0 + 'px'; - } - } else { - // Try again in 30ms if the document didn't load enough to determine its width and height yet - window.setTimeout(updateContain, 30); - } - } - - // Run the scale function and bind it to various window-size-changing events - updateContain(); - - // Add scale function to the library - this.update = updateContain; -} - diff --git a/contain-element.min.js b/contain-element.min.js deleted file mode 100644 index 5ed52f3..0000000 --- a/contain-element.min.js +++ /dev/null @@ -1 +0,0 @@ -function ContainElement(e){function t(){var o=s.parentElement.offsetWidth,p=s.parentElement.offsetHeight;if(o&&p){if(l=o>p/(n*l)*i*l?o/i:p/n,s.style.width=i*l+"px",s.style.height=n*l+"px",i*l>o)switch(e.halign){case"left":s.style.left="0px";break;case"right":s.style.left=0-(i*l-o)+"px";break;default:s.style.left=0-(i*l-o)/2+"px"}else s.style.left="0px";if(n*l>p)switch(e.valign){case"top":s.style.top="0px";break;case"bottom":s.style.top=0-(n*l-p)+"px";break;default:s.style.top=0-(n*l-p)/2+"px"}else s.style.top="0px"}else window.setTimeout(t,30)}var l=1,s=document.getElementById(e.id),i=e.width||s.offsetWidth,n=e.height||s.offsetHeight;"absolute"!=s.style.position&&(s.style.position="absolute"),"hidden"!=s.parentElement.style.overflow&&(s.parentElement.style.overflow="hidden"),"relative"!=s.parentElement.style.position&&"absolute"!=s.parentElement.style.position&&"fixed"!=s.parentElement.style.position&&(s.parentElement.style.position="relative"),t(),this.update=t} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 600da95..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,12 +0,0 @@ -var gulp = require('gulp'); -var ugly = require('gulp-uglify'); -var concat = require('gulp-concat'); - -gulp.task('min', function() { - return gulp.src('contain-element.js') - .pipe(ugly()) - .pipe(concat('contain-element.min.js')) - .pipe(gulp.dest('./')); -}); - -gulp.task('default', ['min']); diff --git a/index.html b/index.html index 1f30179..3b33e4c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@