kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-11-24 14:41:26 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use center instead of middle everywhere.

Browse source 
With CSS background positioning, the word `center` is generally used.
This is pretty much that, but for any element.
This commit is contained in:
Luke Evers 2015-07-01 14:05:48 -04:00
parent c2cce79529
commit 5226ead17d
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -4,7 +4,7 @@ A JavaScript plugin to contain an element within its parent element.
## Description ## 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`). 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/) [Demo](http://williamsny.github.io/contain-element/)
@ -23,8 +23,8 @@ window.onload = function() {
id: 'element', // the id of the element to be contained id: 'element', // the id of the element to be contained
width: '100', // (optional) element width in pixels (unset: element width) width: '100', // (optional) element width in pixels (unset: element width)
height: '100', // (optional) element height in pixels (unset: element height) height: '100', // (optional) element height in pixels (unset: element height)
valign: 'top', // (optional) vertical alignment: top|bottom (unset: middle) valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
halign: 'left' // (optional) horizontal alignment: left|right (unset: middle) halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
}); });
// (example) update the size and positioning on window resize // (example) update the size and positioning on window resize

4
contain-element.js
View file

@ -40,7 +40,7 @@ function ContainElement(options) {
element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px'; element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px';
break; break;
default: default:
// anchor horizontally to the middle of the parent element // anchor horizontally to the center of the parent element
element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2 )) + 'px'; element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2 )) + 'px';
} }
} else { } else {
@ -59,7 +59,7 @@ function ContainElement(options) {
element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px'; element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px';
break; break;
default: default:
// anchor vertically to the middle of the parent element // anchor vertically to the center of the parent element
element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2 )) + 'px'; element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2 )) + 'px';
} }
} else { } else {