diff --git a/contain-element.min.js b/contain-element.min.js index c9073f6..99fbf70 100644 --- a/contain-element.min.js +++ b/contain-element.min.js @@ -1 +1 @@ -function ContainElement(e){function t(){var n=i.parentElement.offsetWidth,a=i.parentElement.offsetHeight;if(n&&a){if(l=n>a/(o*l)*s*l?n/s:a/o,i.style.width=s*l+"px",i.style.height=o*l+"px",s*l>n)switch(e.halign){case"left":i.style.left="0px";break;case"right":i.style.left=0-(s*l-n)+"px";break;default:i.style.left=0-(s*l-n)/2+"px"}else i.style.left="0px";if(o*l>a)switch(e.valign){case"top":i.style.top="0px";break;case"bottom":i.style.top=0-(o*l-a)+"px";break;default:i.style.top=0-(o*l-a)/2+"px"}else i.style.top="0px"}else window.setTimeout(t,30)}var l=1,i=document.getElementById(e.id),s=e.width||i.offsetWidth,o=e.height||i.offsetHeight;i.style.position="absolute",i.parentElement.style.overflow="hidden",-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(i.parentElement,null).getPropertyValue("position"))&&(i.parentElement.style.position="relative"),t(),this.update=t} \ No newline at end of file +function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,a=n.parentElement.offsetHeight;if(t&&a){if(i=t>a/(s*i)*l*i?t/l:a/s,n.style.width=l*i+"px",n.style.height=s*i+"px",l*i>t)switch(f){case"left":n.style.left="0px";break;case"right":n.style.left=0-(l*i-t)+"px";break;default:n.style.left=0-(l*i-t)/2+"px"}else n.style.left="0px";if(s*i>a)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(s*i-a)+"px";break;default:n.style.top=0-(s*i-a)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=document.getElementById(t.id),l=t.width||n.offsetWidth,s=t.height||n.offsetHeight,o=t.valign||"center",f=t.halign||"center";n.style.position="absolute",n.parentElement.style.overflow="hidden",-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(n.parentElement,null).getPropertyValue("position"))&&(n.parentElement.style.position="relative"),e(),this.update=e,this.setWidth=function(t){l=t},this.setHeight=function(t){s=t},this.setValign=function(t){o=t},this.setHalign=function(t){f=t},this.getWidth=function(){return l},this.getHeight=function(){return s},this.getValign=function(){return o},this.getHalign=function(){return f},this.getScale=function(){return i}} \ No newline at end of file diff --git a/index.html b/index.html index f6ec3af..6ab2098 100644 --- a/index.html +++ b/index.html @@ -1,143 +1,149 @@ - - - Contain Element - Examples - - - - - + demo = function(id, valign, halign) { + document.getElementsByClassName('active')[0].className = 'button'; + document.getElementById(id).className = 'button active'; + contain.setValign(valign); + contain.setHalign(halign); + contain.update(); + }; -
-
-

Contain Element

-

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

+ window.onresize = contain.update; + window.addEventListener('orientationchange', contain.update); + }; + - +
+
+

Contain Element

+

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

+ -
+
-

- The video in the background is the example. -
- Change the positioning below and resize your browser to compare. -

+

+ The video in the background is the example. +
+ Change the positioning below and resize your browser to compare. +

-
top left
-
top center
-
top right
+
top left
+
top center
+
top right
+
+
center left
+
center center
+
center right
+
+
bottom left
+
bottom center
+
bottom right
-
+
-
center left
-
center center
-
center right
+ Video Credit ESO +
+
-
+ + Fork me on GitHub + -
bottom left
-
bottom center
-
bottom right
- -
- - Video Credit ESO -
-
- - Fork me on GitHub - + +