Difference between revisions of "Team:Exeter"

 
(89 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
  
−
<link href='http://fonts.googleapis.com/css?family=Ek+Mukta' rel='stylesheet' type='text/css'>
+
<script src="https://2015.igem.org/Team:Exeter/bpopup/assets/jquery-bpopup-0-11-0-min-js?action=raw&amp;ctype=text/javascript"></script>
 +
<!--<script src="assets/jquery.easing.1.3.js"></script>
 +
<script src="assets/scripting.min.js"></script>-->
  
−
<!-- FACEBOOK SDK-->
+
<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();
 +
 
 +
            });
  
−
    <script>
 
−
      window.fbAsyncInit = function() {
 
−
        FB.init({
 
−
          appId      : 'your-app-id',
 
−
          xfbml      : true,
 
−
          version    : 'v2.3'
 
 
         });
 
         });
−
      };
 
  
−
      (function(d, s, id){
+
    })(jQuery);
−
        var js, fjs = d.getElementsByTagName(s)[0];
+
</script>
−
        if (d.getElementById(id)) {return;}
+
−
        js = d.createElement(s); js.id = id;
+
−
        js.src = "//connect.facebook.net/en_US/sdk.js";
+
−
        fjs.parentNode.insertBefore(js, fjs);
+
−
      }(document, 'script', 'facebook-jssdk'));
+
−
    </script>
+
  
−
<!-- FACEBOOK thing 1 -->
+
<script>  
 +
var myVideo = document.getElementById("video1");
  
−
<div id="fb-root"></div>
+
function playPause() {  
−
<script>(function(d, s, id) {
+
    if (myVideo.paused)  
−
  var js, fjs = d.getElementsByTagName(s)[0];
+
        myVideo.play();  
−
  if (d.getElementById(id)) return;
+
    else
−
  js = d.createElement(s); js.id = id;
+
        myVideo.pause();  
−
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
+
}  
−
  fjs.parentNode.insertBefore(js, fjs);
+
−
}(document, 'script', 'facebook-jssdk'));</script>
+
  
−
<div class="container">
+
function makeBig() {
 +
    myVideo.width = 560;
 +
}
  
−
<div class="row">
+
function makeSmall() {
−
                <div class="col-md-8">
+
    myVideo.width = 320;
−
<section>
+
}
−
                    <h1> Welcome to Exeter iGEM 2015! </h1>
+
−
+
  
−
<div id="carouselcontainer" class="panel panel-default">
+
function makeNormal() {
−
<!-- Half Page Image Background Carousel Header -->
+
     myVideo.width = 420;
−
<header id="myCarousel" class="carousel slide">
+
}
−
     <!-- Indicators -->
+
</script>  
−
    <ol class="carousel-indicators">
+
−
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
−
        <li data-target="#myCarousel" data-slide-to="1"></li>
+
−
        <li data-target="#myCarousel" data-slide-to="2"></li>
+
−
        <li data-target="#myCarousel" data-slide-to="3"></li>
+
−
        <li data-target="#myCarousel" data-slide-to="4"></li>
+
−
    </ol>
+
  
−
    <!-- Wrapper for Slides -->
 
−
    <div class="carousel-inner">
 
−
        <div class="item active">
 
−
            <!-- Set the first background image using inline CSS below. -->
 
−
            <a href="https://2015.igem.org/Team:Exeter/Team">
 
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/2/21/Team_carousel_ex.JPG"/>
 
−
            <div class="carousel-caption">
 
−
                <h2 style="color:#FFFFFF;"></h2>
 
−
            </div>
 
−
            </a>
 
−
        </div>
 
−
        <div class="item">
 
−
            <!-- Set the second background image using inline CSS below. -->
 
−
            <a href="https://2015.igem.org/Team:Exeter/Practices">
 
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/9/95/Exeter_Joe_carousel_1.png"/>
 
−
            <div class="carousel-caption">
 
−
                <h2 style="color:#FFFFFF;"></h2>
 
−
            </div>
 
−
            </a>
 
−
        </div>
 
−
        <div class="item">
 
−
            <!-- Set the third background image using inline CSS below. -->
 
−
            <a href="https://2015.igem.org/Team:Exeter/Modeling">
 
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/3/3b/Model_carousel_ex.gif"/>
 
−
            <div class="carousel-caption">
 
−
                <h2></h2>
 
−
            </div>
 
−
            </a>
 
−
        </div>
 
−
      <div class="item">
 
−
            <!-- Set the third background image using inline CSS below. -->
 
−
            <a href="https://2015.igem.org/Team:Exeter/Experiments">
 
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/2/21/Exeter_lab_carousel.png"/>
 
−
            <div class="carousel-caption">
 
−
                <h2></h2>
 
−
            </div>
 
−
            </a>
 
−
        </div>
 
−
    <div class="item">
 
−
            <!-- Set the third background image using inline CSS below. -->
 
−
            <a href="https://2015.igem.org/Team:Exeter/Timeline">
 
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/1/1b/Exeter_ribonostics_logo.png"/>
 
−
            <div class="carousel-caption">
 
−
                <h2 style="color:#FFFFFF;"></h2>
 
−
            </div>
 
−
            </a>
 
−
        </div>
 
−
    </div>
 
  
−
    <!-- Controls -->
+
<div id="infographic" onload="$('#element_to_pop_up').bPopup();">
−
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+
−
        <span class="icon-prev"></span>
+
−
    </a>
+
−
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
+
−
        <span class="icon-next"></span>
+
−
    </a>
+
  
−
</header> <!-- End of  carousel-->
+
<!-- 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>
  
−
</section>
+
<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>
  
−
<!-- This is where my buttons are -->
 
  
−
<nav>
 
−
  <ul class="pager">
 
−
    <li class="previous"><a href="https://2015.igem.org/Team:Exeter/Medal_Requirements"><span aria-hidden="true">&larr;</span>Medals</a></li>
 
−
    <li class="next"><a href="https://2015.igem.org/Team:Exeter/Description">Project<span aria-hidden="true">&rarr;</span></a></li>
 
−
  </ul>
 
−
</nav>
 
  
−
<!-- Buttons stop -->
+
<div style="background:#274e13; width:100%" class="container">
−
 
+
<!-- This is where my buttons are -->
−
                </div>
+
<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>
−
                <!-- /.col-md-8 -->
+
        <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">&larr;</span>Medals</a></li>
−
               
+
            <li style="color:#b6d7a8; font-size:2em">Use these buttons to see more</li>
−
                <div class="col-md-4">
+
            <li class="next"><a href="https://2015.igem.org/Team:Exeter/Description">Project<span aria-hidden="true">&rarr;</span></a></li>
−
                    <section class="panel panel-default" id="twitterfeed">
+
          </ul>
−
                    <!-- TWITTER thing-->
+
        </nav>
−
<a class="twitter-timeline" href="https://twitter.com/ExeteriGEM2015" width="500px" height="355px" data-widget-id="616553862611271680">Tweets by @ExeteriGEM2015 </a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
        <!-- Buttons stop -->
−
                    </section>
+
−
                    <!-- /.panel -->
+
−
                    <div class="panel panel-default">
+
−
                    <!-- FACEBOOK thing 2 -->
+
−
<div class="fb-page" data-href="https://www.facebook.com/exeterigem2015?fref=ts" data-width="500" data-height="355" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/exeterigem2015?fref=ts"><a href="https://www.facebook.com/exeterigem2015?fref=ts">Exeter iGEM 2015</a></blockquote></div></div>
+
−
                    </div>
+
−
                    <!-- /.panel -->
+
−
                    <center>
+
−
                    <a href="#wrapper" class="btn btn-default">TOP ^</a>
+
−
                    </center>
+
−
                </div>
+
−
                <!-- /.col-md-4 -->
+
−
            </div>
+
−
            <!-- /.row -->
+
 
</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
Click here for the full infographic
  • Contact us:
    exeterigem@gmail.com