Difference between revisions of "Team:Exeter"
(95 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <script src="https://2015.igem.org/Team:Exeter/bpopup/assets/jquery-bpopup-0-11-0-min-js?action=raw&ctype=text/javascript"></script> |
+ | <!--<script src="assets/jquery.easing.1.3.js"></script> | ||
+ | <script src="assets/scripting.min.js"></script>--> | ||
− | < | + | <style type="text/css"> |
+ | #wrapper, #infographic, .block { | ||
+ | width:100%; | ||
+ | } | ||
+ | #wrapper { | ||
+ | margin:0; | ||
+ | } | ||
+ | #infographic { | ||
+ | margin-top:35px; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #element_to_pop_up { | ||
+ | background-color:#fff; | ||
+ | border-radius:15px; | ||
+ | color:#000; | ||
+ | display:none; | ||
+ | padding:20px; | ||
+ | min-width:400px; | ||
+ | min-height: 180px; | ||
+ | } | ||
+ | .b-close{ | ||
+ | cursor:pointer; | ||
+ | position:absolute; | ||
+ | right:10px; | ||
+ | top:5px; | ||
+ | } | ||
+ | #my-button { | ||
+ | z-index: 10; | ||
+ | position: absolute; | ||
+ | top: 53px; | ||
+ | left: 30px; | ||
+ | border-radius: 25px; | ||
+ | border: 1px solid #274e13; | ||
+ | background: #b6d7a8; | ||
+ | padding: 15px; | ||
+ | box-shadow: 0px 0px 25px #888888; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script> | ||
+ | // Semicolon (;) to ensure closing of earlier scripting | ||
+ | // Encapsulation | ||
+ | // $ is assigned to jQuery | ||
+ | ;(function($) { | ||
+ | |||
+ | // DOM Ready | ||
+ | $(function() { | ||
+ | $(document).ready(function() { | ||
+ | $('#element_to_pop_up').bPopup(); | ||
+ | }); | ||
+ | // Binding a click event | ||
+ | // From jQuery v.1.7.0 use .on() instead of .bind() | ||
+ | $('#my-button').bind('click', function(e) { | ||
+ | |||
+ | // Prevents the default action to be triggered. | ||
+ | e.preventDefault(); | ||
+ | |||
+ | // Triggering bPopup when click event is fired | ||
+ | $('#element_to_pop_up').bPopup(); | ||
+ | |||
+ | }); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}); | }); | ||
− | |||
− | + | })(jQuery); | |
− | + | </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 id="my-button">Watch Our Video</button> | ||
+ | <!-- Element to pop up --> | ||
+ | <div id="element_to_pop_up"> | ||
+ | <center> | ||
+ | <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. | ||
+ | </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> | </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/0/0b/Exeter_home2.png"/> | |
− | + | <img class="block" src="https://static.igem.org/mediawiki/2015/4/4f/Exeter_home3.png"/> | |
+ | <img class="block" src="https://static.igem.org/mediawiki/2015/a/a5/Exeter_home4.png"/> | ||
+ | <img class="block" src="https://static.igem.org/mediawiki/2015/8/88/Exeter_home5.png"/> | ||
+ | <img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home6.png"/> | ||
+ | <img class="block" src="https://static.igem.org/mediawiki/2015/2/23/Exeter_home7.png"/> | ||
+ | <img class="block" src="https://static.igem.org/mediawiki/2015/a/ab/Exeter_home8.png"/> | ||
+ | </div> | ||
− | + | ||
− | + | ||
− | + | <div style="background:#274e13; width:100%" class="container"> | |
− | + | <!-- This is where my buttons are --> | |
− | + | <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> | |
− | + | <ul style="background:#274e13; margin:0; padding:100px;" class="pager"> | |
− | + | <li class="previous"><a href="https://2015.igem.org/Team:Exeter/Medal_Requirements"><span aria-hidden="true">←</span>Medals</a></li> | |
− | + | <li style="color:#b6d7a8; font-size:2em">Use these buttons to see more</li> | |
− | + | <li class="next"><a href="https://2015.igem.org/Team:Exeter/Description">Project<span aria-hidden="true">→</span></a></li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | <!-- Buttons stop --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | |||
+ | |||
</html> | </html> | ||
{{Exeterfooter}} | {{Exeterfooter}} |
Latest revision as of 03:54, 19 September 2015