2015-07-01 12:30:39 -04:00
<!DOCTYPE html>
< html >
< head >
< title > Contain Element - Examples< / title >
< meta charset = "UTF-8" >
< script src = "contain-element.min.js" > < / script >
< style >
html,
body {
height: 100%;
width: 100%;
margin: 0;
color: #f6f6f6;
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
}
a {
color: #f6f6f6;
}
h1 {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
.buttons {
position: fixed;
display: table;
width: 100%;
height: 100%;
z-index: 2;
}
.buttons .demo {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.button {
display: inline-block;
background: #212121;
padding: 10px 30px;
opacity: .5;
cursor: pointer;
}
.button:hover,
.button.active {
opacity: 1;
}
2015-07-01 13:18:25 -04:00
.video-credit {
display: block;
margin: 10px;
font-size: 10px;
}
2015-07-01 12:30:39 -04:00
< / style >
< / head >
< body >
< script >
2015-07-01 13:18:25 -04:00
var video = '< video id = "video" autoplay muted loop > < 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 > ';
2015-07-01 12:30:39 -04:00
var demo1 = function() {
var v = document.getElementById('video');
if (v !== null) v.parentNode.removeChild(v);
document.body.innerHTML += video;
document.getElementById('demo1').className = 'button active';
document.getElementById('demo2').className = 'button';
var contain = new ContainElement({
id: 'video',
2015-07-01 13:18:25 -04:00
height: '720',
width: '1280',
2015-07-01 12:30:39 -04:00
});
window.onresize = contain.update;
screen.addEventListener('orientationchange', contain.update);
}
var demo2 = function() {
var v = document.getElementById('video');
if (v !== null) v.parentNode.removeChild(v);
document.body.innerHTML += video;
document.getElementById('demo1').className = 'button';
document.getElementById('demo2').className = 'button active';
var contain = new ContainElement({
id: 'video',
2015-07-01 13:18:25 -04:00
height: '720',
width: '1280',
2015-07-01 12:30:39 -04:00
});
}
window.onload = demo1;
< / script >
< 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 >
< div class = "button" id = "demo1" onclick = "demo1();" > With Resize< / div >
< div class = "button" id = "demo2" onclick = "demo2();" > Without Resize< / div >
2015-07-01 13:18:25 -04:00
< a class = "video-credit" href = "http://www.eso.org/public/" > Video Credit ESO< / a >
2015-07-01 12:30:39 -04:00
< / 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 >
