mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-09 09:36:39 -05:00
Add a working implementation of the library and a README
This commit is contained in:
parent
35ea40dd17
commit
37288bbf11
2 changed files with 116 additions and 0 deletions
36
README.md
Normal file
36
README.md
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
# 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
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```
|
||||||
|
window.onload = function() {
|
||||||
|
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)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
Written by [Williams New York](http://williamsnewyork.com)
|
||||||
|
|
||||||
|
### Authors
|
||||||
|
|
||||||
|
* Kevin MacMartin
|
||||||
|
|
||||||
|
## LICENSE
|
||||||
|
|
||||||
|
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
||||||
|
|
80
contain-element.js
Normal file
80
contain-element.js
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
function containElement(options) {
|
||||||
|
var scaleFactor = 1;
|
||||||
|
var element = document.getElementById(options.id);
|
||||||
|
var elementWidth = options.width ? options.width : element.offsetWidth;
|
||||||
|
var elementHeight = options.height ? 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 scaleElement() {
|
||||||
|
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 middle 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 middle 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(scaleElement, 30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run the scale function and bind it to various window-size-changing events
|
||||||
|
scaleElement();
|
||||||
|
window.onload = function(event) { scaleElement(); };
|
||||||
|
window.onresize = function(event) { scaleElement(); };
|
||||||
|
screen.addEventListener('orientationchange', function() { scaleElement(); });
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue