mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-23 14:14:10 -05:00
Fix a few small issues and switch screen.addEventListener to window.addEventListener because the former doesn't work on (at least) chrome/chromium
This commit is contained in:
parent
5569077384
commit
46380fbaa9
1 changed files with 14 additions and 19 deletions
27
index.html
27
index.html
|
@ -76,7 +76,7 @@
|
|||
<body>
|
||||
<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 demo = function(id, valign, halign) {
|
||||
var demo = function(id, verticalAlign, horizontalAlign) {
|
||||
var v = document.getElementById('video');
|
||||
if (v !== null) v.parentNode.removeChild(v);
|
||||
document.body.innerHTML += video;
|
||||
|
@ -88,14 +88,14 @@
|
|||
id: 'video',
|
||||
height: '720',
|
||||
width: '1280',
|
||||
valign: valign,
|
||||
halign, halign,
|
||||
valign: verticalAlign,
|
||||
halign, horizontalAlign
|
||||
});
|
||||
|
||||
window.onresize = contain.update;
|
||||
screen.addEventListener('orientationchange', contain.update);
|
||||
window.addEventListener('orientationchange', contain.update);
|
||||
// ----- Relevant code above ----- //
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
demo('demo5', 'center', 'center');
|
||||
|
@ -105,21 +105,16 @@
|
|||
<div class="buttons">
|
||||
<div class="demo">
|
||||
<h1>Contain Element</h1>
|
||||
<p>
|
||||
A JavaScript plugin to contain an element within its parent element.
|
||||
</p>
|
||||
<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>
|
||||
<ul><li><a href="https://github.com/WilliamsNY/contain-element">Download On GitHub</a></li></ul>
|
||||
|
||||
<hr>
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
<i>
|
||||
The video in the background is the example.
|
||||
<br/>Change the positioning below and resize your browser to compare.
|
||||
</i>
|
||||
<em>The video in the background is the example.</em>
|
||||
<br />
|
||||
<em>Change the positioning below and resize your browser to compare.</em>
|
||||
</p>
|
||||
|
||||
<div class="button" id="demo1" onclick="demo('demo1', 'top', 'left');">top left</div>
|
||||
|
|
Loading…
Reference in a new issue