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

Update the version of contain-element included and tweak the index page to match

Browse source
This commit is contained in:
Kevin MacMartin 2015-09-08 00:25:19 -04:00
parent a3f6c028ed
commit f5ef27b187
2 changed files with 126 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
contain-element.min.js vendored
View file

@ -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} 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}}

56
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Contain Element - Examples</title> <title>Contain Element - Examples</title>
<script type="text/javascript" src="contain-element.min.js"></script> <script type="text/javascript" src="contain-element.js"></script>
<style> <style>
html, html,
body { body {
@ -33,6 +33,7 @@
max-width: 300px; max-width: 300px;
border: 0; border: 0;
border-bottom: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;
height: 10px;
opacity: .5; opacity: .5;
} }
@ -66,38 +67,41 @@
} }
.video-credit { .video-credit {
display: inline; display: inline-block;
margin: 10px; margin: 10px;
font-size: 10px; font-size: 10px;
} }
.fork-me {
position: absolute;
top: 0;
right: 0;
border: 0;
z-index: 4;
}
</style> </style>
</head> </head>
<body> <body>
<script> <script>
var video = '<video id="video" autoplay muted loop poster="TheenclosureoftheNextGenerationTransitSurvey.jpg"><source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.webm" type="video/webm"><source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.mp4" type="video/mp4"></video>'; var contain, demo;
var demo = function(id, valign, halign) {
var v = document.getElementById('video');
if (v !== null) v.parentNode.removeChild(v);
document.body.innerHTML += video;
document.getElementsByClassName('active')[0].className = 'button';
document.getElementById(id).className = 'button active';
// ------ Relevant code below ----- // window.onload = function() {
var contain = new ContainElement({ contain = new ContainElement({
id: 'video', id: 'video',
height: '720', height: '720',
width: '1280', width: '1280'
valign: valign,
halign: halign
}); });
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();
};
window.onresize = contain.update; window.onresize = contain.update;
window.addEventListener('orientationchange', contain.update); window.addEventListener('orientationchange', contain.update);
// ----- Relevant code above ----- //
};
window.onload = function() {
demo('demo5', 'center', 'center');
}; };
</script> </script>
@ -105,7 +109,6 @@
<div class="demo"> <div class="demo">
<h1>Contain Element</h1> <h1>Contain Element</h1>
<p>A JavaScript plugin to contain an element within its parent element.</p> <p>A JavaScript plugin to contain an element within its parent element.</p>
<ul><li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li></ul> <ul><li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li></ul>
<hr /> <hr />
@ -119,15 +122,11 @@
<div class="button" id="demo1" onclick="demo('demo1', 'top', 'left');">top left</div> <div class="button" id="demo1" onclick="demo('demo1', 'top', 'left');">top left</div>
<div class="button" id="demo2" onclick="demo('demo2', 'top', 'center');">top center</div> <div class="button" id="demo2" onclick="demo('demo2', 'top', 'center');">top center</div>
<div class="button" id="demo3" onclick="demo('demo3', 'top', 'right');">top right</div> <div class="button" id="demo3" onclick="demo('demo3', 'top', 'right');">top right</div>
<br /> <br />
<div class="button" id="demo4" onclick="demo('demo4', 'center', 'left');">center left</div> <div class="button" id="demo4" onclick="demo('demo4', 'center', 'left');">center left</div>
<div class="button active" id="demo5" onclick="demo('demo5', 'center', 'center');">center center</div> <div class="button active" id="demo5" onclick="demo('demo5', 'center', 'center');">center center</div>
<div class="button" id="demo6" onclick="demo('demo6', 'center', 'right');">center right</div> <div class="button" id="demo6" onclick="demo('demo6', 'center', 'right');">center right</div>
<br /> <br />
<div class="button" id="demo7" onclick="demo('demo7', 'bottom', 'left');">bottom left</div> <div class="button" id="demo7" onclick="demo('demo7', 'bottom', 'left');">bottom left</div>
<div class="button" id="demo8" onclick="demo('demo8', 'bottom', 'center');">bottom center</div> <div class="button" id="demo8" onclick="demo('demo8', 'bottom', 'center');">bottom center</div>
<div class="button" id="demo9" onclick="demo('demo9', 'bottom', 'right');">bottom right</div> <div class="button" id="demo9" onclick="demo('demo9', 'bottom', 'right');">bottom right</div>
@ -138,6 +137,13 @@
</div> </div>
</div> </div>
<a href="https://github.com/WilliamsNY/contain-element"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 4;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" /></a> <a href="https://github.com/WilliamsNY/contain-element">
<img class="fork-me" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
</a>
<video id="video" autoplay muted loop poster="TheenclosureoftheNextGenerationTransitSurvey.jpg">
<source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.webm" type="video/webm">
<source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.mp4" type="video/mp4">
</video>
</body> </body>
</html> </html>