Difference between revisions of "Team:Exeter"

 
(25 intermediate revisions by 2 users not shown)
Line 15: Line 15:
 
#infographic {
 
#infographic {
 
     margin-top:35px;
 
     margin-top:35px;
 +
    position: relative;
 +
    display: inline-block;
 
}
 
}
  
#element_to_pop_up { display:none; }
+
#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>
 
</style>
 
<!-- VIDEO
 
<video width="320" height="240" autoplay>
 
  <source src="movie.mp4" type="video/mp4">
 
Your browser does not support the video tag.
 
</video>
 
-->
 
<!-- Button that triggers the popup -->
 
<button id="my-button">POP IT UP</button>
 
<!-- Element to pop up -->
 
<div id="element_to_pop_up">Content of popup</div>
 
  
 
<script>
 
<script>
Line 39: 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 57: 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 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 id="infographic">
 
 
<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 68: 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.8em;"><a href="https://static.igem.org/mediawiki/2015/3/37/Exeter_home_infographic.png">Click here for the full infographic</a></center>
+
<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 81: Line 139:
 
         <!-- Buttons stop -->
 
         <!-- Buttons stop -->
 
</div>
 
</div>
 +
  
 
</html>
 
</html>
 
{{Exeterfooter}}
 
{{Exeterfooter}}

Latest revision as of 03:54, 19 September 2015

Click outside window to close

Click to see our Video
  • Contact us:
    exeterigem@gmail.com