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

Adding an index.html file for gh-pages

Browse source
This commit is contained in:
Luke Evers 2015-07-01 12:30:39 -04:00
parent 7e9fa72a31
commit 72405347c6
1 changed files with 114 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
index.html Normal file
View file

@ -0,0 +1,114 @@
<!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;
}
</style>
</head>
<body>
<script>
var video = '<video id="video" autoplay loop><source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></video>';
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',
height: '400',
width: '960',
});
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',
height: '400',
width: '960',
});
}
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>
</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>