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

Fix a few small issues and switch screen.addEventListener to window.addEventListener because the former doesn't work on (at least) chrome/chromium

Browse source
This commit is contained in:
Kevin MacMartin 2015-07-02 16:26:35 -04:00
parent 5569077384
commit 46380fbaa9
1 changed files with 14 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -76,7 +76,7 @@
<body> <body>
<script> <script>
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>'; 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>';
var demo = function(id, valign, halign) { var demo = function(id, verticalAlign, horizontalAlign) {
var v = document.getElementById('video'); var v = document.getElementById('video');
if (v !== null) v.parentNode.removeChild(v); if (v !== null) v.parentNode.removeChild(v);
document.body.innerHTML += video; document.body.innerHTML += video;
@ -88,14 +88,14 @@
id: 'video', id: 'video',
height: '720', height: '720',
width: '1280', width: '1280',
valign: valign, valign: verticalAlign,
halign, halign, halign, horizontalAlign
}); });
window.onresize = contain.update; window.onresize = contain.update;
screen.addEventListener('orientationchange', contain.update); window.addEventListener('orientationchange', contain.update);
// ----- Relevant code above ----- // // ----- Relevant code above ----- //
} };
window.onload = function() { window.onload = function() {
demo('demo5', 'center', 'center'); demo('demo5', 'center', 'center');
@ -105,21 +105,16 @@
<div class="buttons"> <div class="buttons">
<div class="demo"> <div class="demo">
<h1>Contain Element</h1> <h1>Contain Element</h1>
<p> <p>A JavaScript plugin to contain an element within its parent element.</p>
A JavaScript plugin to contain an element within its parent element.
</p>
<ul> <ul><li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li></ul>
<li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li>
</ul>
<hr> <hr />
<p> <p>
<i> <em>The video in the background is the example.</em>
The video in the background is the example. <br />
<br/>Change the positioning below and resize your browser to compare. <em>Change the positioning below and resize your browser to compare.</em>
</i>
</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>