2015-07-01 12:30:39 -04:00
<!DOCTYPE html>
< html >
< head >
< title > Contain Element - Examples< / title >
< meta charset = "UTF-8" >
2015-07-02 11:56:56 -04:00
< script src = "https://raw.githubusercontent.com/WilliamsNY/contain-element/master/contain-element.min.js" > < / script >
2015-07-01 12:30:39 -04:00
< style >
html,
body {
height: 100%;
width: 100%;
margin: 0;
color: #f6f6f6;
2015-07-02 09:59:40 -04:00
background-color: #212121;
2015-07-01 12:30:39 -04:00
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
2015-07-01 14:01:45 -04:00
font-size: 13px;
2015-07-01 12:30:39 -04:00
}
a {
color: #f6f6f6;
}
h1 {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
2015-07-01 14:23:58 -04:00
hr {
max-width: 300px;
border: 0;
border-bottom: 1px solid #f6f6f6;
opacity: .5;
}
2015-07-01 12:30:39 -04:00
.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;
2015-07-01 14:01:45 -04:00
padding: 10px;
width: 100px;
margin: 5px;
2015-07-01 12:30:39 -04:00
opacity: .5;
cursor: pointer;
}
.button:hover,
.button.active {
opacity: 1;
}
2015-07-01 13:18:25 -04:00
.video-credit {
2015-07-01 14:36:03 -04:00
display: inline;
2015-07-01 13:18:25 -04:00
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 14:01:45 -04:00
var demo = function(id, valign, halign) {
2015-07-01 12:30:39 -04:00
var v = document.getElementById('video');
if (v !== null) v.parentNode.removeChild(v);
document.body.innerHTML += video;
2015-07-01 14:01:45 -04:00
document.getElementsByClassName('active')[0].className = 'button';
document.getElementById(id).className = 'button active';
2015-07-01 12:30:39 -04:00
2015-07-01 14:23:58 -04:00
// ------ Relevant code below ----- //
2015-07-01 12:30:39 -04:00
var contain = new ContainElement({
id: 'video',
2015-07-01 13:18:25 -04:00
height: '720',
width: '1280',
2015-07-01 14:01:45 -04:00
valign: valign,
halign, halign,
2015-07-01 12:30:39 -04:00
});
window.onresize = contain.update;
screen.addEventListener('orientationchange', contain.update);
2015-07-01 14:23:58 -04:00
// ----- Relevant code above ----- //
2015-07-01 12:30:39 -04:00
}
2015-07-01 14:01:45 -04:00
window.onload = function() {
2015-07-01 14:04:38 -04:00
demo('demo5', 'center', 'center');
2015-07-01 14:01:45 -04:00
};
2015-07-01 12:30:39 -04:00
< / script >
< div class = "buttons" >
< div class = "demo" >
< h1 > Contain Element< / h1 >
< p >
2015-07-01 14:23:58 -04:00
A JavaScript plugin to contain an element within its parent element.
2015-07-01 12:30:39 -04:00
< / p >
2015-07-01 14:23:58 -04:00
2015-07-01 12:30:39 -04:00
< ul >
< li > < a href = "https://github.com/WilliamsNY/contain-element" > Download On GitHub< / a > < / li >
< / ul >
2015-07-01 14:01:45 -04:00
2015-07-01 14:23:58 -04:00
< hr >
< p >
< i >
The video in the background is the example.
< br / > Change the positioning below and resize your browser to compare.
< / i >
< / p >
2015-07-01 14:01:45 -04:00
< div class = "button" id = "demo1" onclick = "demo('demo1', 'top', 'left');" > top left< / div >
2015-07-01 14:04:38 -04:00
< div class = "button" id = "demo2" onclick = "demo('demo2', 'top', 'center');" > top center< / div >
2015-07-01 14:01:45 -04:00
< div class = "button" id = "demo3" onclick = "demo('demo3', 'top', 'right');" > top right< / div >
< br / >
2015-07-01 14:04:38 -04:00
< 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 >
2015-07-01 14:01:45 -04:00
< br / >
< div class = "button" id = "demo7" onclick = "demo('demo7', 'bottom', 'left');" > bottom left< / div >
2015-07-01 14:04:38 -04:00
< div class = "button" id = "demo8" onclick = "demo('demo8', 'bottom', 'center');" > bottom center< / div >
2015-07-01 14:01:45 -04:00
< div class = "button" id = "demo9" onclick = "demo('demo9', 'bottom', 'right');" > bottom right< / div >
2015-07-01 14:36:03 -04:00
< br / >
2015-07-01 14:01:45 -04:00
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 >
