Difference between revisions of "Team:Exeter"
| (17 intermediate revisions by 2 users not shown) | |||
| Line 15: | Line 15: | ||
#infographic { | #infographic { | ||
margin-top:35px; | margin-top:35px; | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
} | } | ||
| Line 34: | Line 36: | ||
#my-button { | #my-button { | ||
z-index: 10; | z-index: 10; | ||
| − | position: | + | position: absolute; |
| − | + | top: 53px; | |
| + | left: 30px; | ||
border-radius: 25px; | border-radius: 25px; | ||
border: 1px solid #274e13; | border: 1px solid #274e13; | ||
| Line 52: | Line 55: | ||
// DOM Ready | // DOM Ready | ||
$(function() { | $(function() { | ||
| − | + | $(document).ready(function() { | |
| + | $('#element_to_pop_up').bPopup(); | ||
| + | }); | ||
// Binding a click event | // Binding a click event | ||
// From jQuery v.1.7.0 use .on() instead of .bind() | // From jQuery v.1.7.0 use .on() instead of .bind() | ||
| Line 70: | Line 75: | ||
</script> | </script> | ||
| + | <script> | ||
| + | var myVideo = document.getElementById("video1"); | ||
| + | |||
| + | function playPause() { | ||
| + | if (myVideo.paused) | ||
| + | myVideo.play(); | ||
| + | else | ||
| + | myVideo.pause(); | ||
| + | } | ||
| + | |||
| + | function makeBig() { | ||
| + | myVideo.width = 560; | ||
| + | } | ||
| + | |||
| + | function makeSmall() { | ||
| + | myVideo.width = 320; | ||
| + | } | ||
| + | |||
| + | function makeNormal() { | ||
| + | myVideo.width = 420; | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | |||
| + | <div id="infographic" onload="$('#element_to_pop_up').bPopup();"> | ||
| − | |||
<!-- Button that triggers the popup --> | <!-- Button that triggers the popup --> | ||
<button id="my-button">Watch Our Video</button> | <button id="my-button">Watch Our Video</button> | ||
| − | <!-- Element to pop up | + | <!-- Element to pop up --> |
<div id="element_to_pop_up"> | <div id="element_to_pop_up"> | ||
| − | <video width="320" height="240" autoplay> | + | <center> |
| − | <source src=" | + | <button onclick="playPause()">Play/Pause</button> |
| + | <video id="video1" width="320" height="240" autoplay> | ||
| + | <source src="https://static.igem.org/mediawiki/2015/5/5c/Bovine_TB_1_.mp4" type="video/mp4"> | ||
Your browser does not support the video tag. | Your browser does not support the video tag. | ||
</video> | </video> | ||
| − | </ | + | <p style="font-size:1em">Click outside window to close</p> <a href="https://youtu.be/HTQQr_W3q2s"> Click to see our Video </a> |
| + | </center> | ||
| + | </div> | ||
| + | |||
<img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home1.png"/> | <img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home1.png"/> | ||
<img class="block" src="https://static.igem.org/mediawiki/2015/0/0b/Exeter_home2.png"/> | <img class="block" src="https://static.igem.org/mediawiki/2015/0/0b/Exeter_home2.png"/> | ||
| Line 90: | Line 124: | ||
<img class="block" src="https://static.igem.org/mediawiki/2015/a/ab/Exeter_home8.png"/> | <img class="block" src="https://static.igem.org/mediawiki/2015/a/ab/Exeter_home8.png"/> | ||
</div> | </div> | ||
| + | |||
| + | |||
<div style="background:#274e13; width:100%" class="container"> | <div style="background:#274e13; width:100%" class="container"> | ||
<!-- This is where my buttons are --> | <!-- This is where my buttons are --> | ||
| − | <center style="background:#274e13; font-size:1. | + | <center style="background:#274e13; font-size:1.6em;"><a href="https://static.igem.org/mediawiki/2015/3/37/Exeter_home_infographic.png">Click here for the full infographic</a></center> |
<nav> | <nav> | ||
<ul style="background:#274e13; margin:0; padding:100px;" class="pager"> | <ul style="background:#274e13; margin:0; padding:100px;" class="pager"> | ||
| Line 103: | Line 139: | ||
<!-- Buttons stop --> | <!-- Buttons stop --> | ||
</div> | </div> | ||
| + | |||
</html> | </html> | ||
{{Exeterfooter}} | {{Exeterfooter}} | ||
Latest revision as of 03:54, 19 September 2015
