mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-23 06:14:09 -05:00
Update the version of contain-element included and tweak the index page to match
This commit is contained in:
Kevin MacMartin
parent
a3f6c028ed
commit
f5ef27b187
2 changed files with 126 additions and 120 deletions
2
contain-element.min.js
vendored
2
contain-element.min.js
vendored
|
|
@ -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}}
|
||||||
244
index.html
244
index.html
|
|
@ -1,143 +1,149 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<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 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #f6f6f6;
|
color: #f6f6f6;
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
|
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #f6f6f6;
|
color: #f6f6f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid #f6f6f6;
|
border-bottom: 1px solid #f6f6f6;
|
||||||
opacity: .5;
|
height: 10px;
|
||||||
}
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: table;
|
display: table;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons .demo {
|
.buttons .demo {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: #212121;
|
background: #212121;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover,
|
.button:hover,
|
||||||
.button.active {
|
.button.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-credit {
|
.video-credit {
|
||||||
display: inline;
|
display: inline-block;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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 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 ----- //
|
.fork-me {
|
||||||
var contain = new ContainElement({
|
position: absolute;
|
||||||
id: 'video',
|
top: 0;
|
||||||
height: '720',
|
right: 0;
|
||||||
width: '1280',
|
border: 0;
|
||||||
valign: valign,
|
z-index: 4;
|
||||||
halign: halign
|
}
|
||||||
});
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
var contain, demo;
|
||||||
|
|
||||||
window.onresize = contain.update;
|
window.onload = function() {
|
||||||
window.addEventListener('orientationchange', contain.update);
|
contain = new ContainElement({
|
||||||
// ----- Relevant code above ----- //
|
id: 'video',
|
||||||
};
|
height: '720',
|
||||||
|
width: '1280'
|
||||||
|
});
|
||||||
|
|
||||||
window.onload = function() {
|
demo = function(id, valign, halign) {
|
||||||
demo('demo5', 'center', 'center');
|
document.getElementsByClassName('active')[0].className = 'button';
|
||||||
};
|
document.getElementById(id).className = 'button active';
|
||||||
</script>
|
contain.setValign(valign);
|
||||||
|
contain.setHalign(halign);
|
||||||
|
contain.update();
|
||||||
|
};
|
||||||
|
|
||||||
<div class="buttons">
|
window.onresize = contain.update;
|
||||||
<div class="demo">
|
window.addEventListener('orientationchange', contain.update);
|
||||||
<h1>Contain Element</h1>
|
};
|
||||||
<p>A JavaScript plugin to contain an element within its parent element.</p>
|
</script>
|
||||||
|
|
||||||
<ul><li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li></ul>
|
<div class="buttons">
|
||||||
|
<div class="demo">
|
||||||
|
<h1>Contain Element</h1>
|
||||||
|
<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>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<em>The video in the background is the example.</em>
|
<em>The video in the background is the example.</em>
|
||||||
<br />
|
<br />
|
||||||
<em>Change the positioning below and resize your browser to compare.</em>
|
<em>Change the positioning below and resize your browser to compare.</em>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<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 />
|
||||||
|
<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" id="demo6" onclick="demo('demo6', 'center', 'right');">center right</div>
|
||||||
|
<br />
|
||||||
|
<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="demo9" onclick="demo('demo9', 'bottom', 'right');">bottom right</div>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<div class="button" id="demo4" onclick="demo('demo4', 'center', 'left');">center left</div>
|
<a class="video-credit" href="http://www.eso.org/public/">Video Credit ESO</a>
|
||||||
<div class="button active" id="demo5" onclick="demo('demo5', 'center', 'center');">center center</div>
|
</div>
|
||||||
<div class="button" id="demo6" onclick="demo('demo6', 'center', 'right');">center right</div>
|
</div>
|
||||||
|
|
||||||
<br />
|
<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>
|
||||||
|
|
||||||
<div class="button" id="demo7" onclick="demo('demo7', 'bottom', 'left');">bottom left</div>
|
<video id="video" autoplay muted loop poster="TheenclosureoftheNextGenerationTransitSurvey.jpg">
|
||||||
<div class="button" id="demo8" onclick="demo('demo8', 'bottom', 'center');">bottom center</div>
|
<source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.webm" type="video/webm">
|
||||||
<div class="button" id="demo9" onclick="demo('demo9', 'bottom', 'right');">bottom right</div>
|
<source src="http://wny.s3.amazonaws.com/videos/TheenclosureoftheNextGenerationTransitSurvey.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
<br />
|
</body>
|
||||||
|
|
||||||
<a class="video-credit" href="http://www.eso.org/public/">Video Credit ESO</a>
|
|
||||||
</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>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue