|
|
| (93 intermediate revisions by 3 users not shown) |
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | | | |
| − | <script type="text/javascript"> | + | <script src="https://2015.igem.org/Team:Exeter/bpopup/assets/jquery-bpopup-0-11-0-min-js?action=raw&ctype=text/javascript"></script> |
| − | // Hide Header on on scroll down | + | <!--<script src="assets/jquery.easing.1.3.js"></script> |
| − | var didScroll;
| + | <script src="assets/scripting.min.js"></script>--> |
| − | var lastScrollTop = 0;
| + | |
| − | var delta = 5;
| + | |
| − | var navbarHeight = $('nav').outerHeight();
| + | |
| | | | |
| − | $(window).scroll(function(event){
| + | <style type="text/css"> |
| − | didScroll = true; | + | #wrapper, #infographic, .block { |
| − | }); | + | width:100%; |
| − | | + | } |
| − | setInterval(function() {
| + | #wrapper { |
| − | if (didScroll) { | + | margin:0; |
| − | hasScrolled();
| + | } |
| − | didScroll = false;
| + | #infographic { |
| − | } | + | margin-top:35px; |
| − | }, 250); | + | position: relative; |
| | + | display: inline-block; |
| | + | } |
| | | | |
| − | function hasScrolled() {
| + | #element_to_pop_up { |
| − | var st = $(this).scrollTop(); | + | background-color:#fff; |
| − | | + | border-radius:15px; |
| − | // Make sure they scroll more than delta
| + | color:#000; |
| − | if(Math.abs(lastScrollTop - st) <= delta)
| + | display:none; |
| − | return;
| + | padding:20px; |
| − | | + | min-width:400px; |
| − | // If they scrolled down and are past the navbar, add class .nav-up. | + | min-height: 180px; |
| − | // This is necessary so you never see what is "behind" the navbar. | + | |
| − | if (st > lastScrollTop && st > navbarHeight){ | + | |
| − | // Scroll Down
| + | |
| − | $('.navbar-collapse').addClass('nav-up');
| + | |
| − | } else { | + | |
| − | // Scroll Up
| + | |
| − | if(st + $(window).height() < $(document).height()) {
| + | |
| − | $('.navbar-collapse').removeClass('nav-up');
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | lastScrollTop = st;
| + | |
| | } | | } |
| − | </script> | + | .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> | | <script> |
| − | $(document).ready(function() {
| + | // Semicolon (;) to ensure closing of earlier scripting |
| − |
| + | // Encapsulation |
| − | $(window).scroll(function () {
| + | // $ is assigned to jQuery |
| − | //if you hard code, then use console
| + | ;(function($) { |
| − | //.log to determine when you want the
| + | |
| − | //nav bar to stick.
| + | |
| − | console.log($(window).scrollTop())
| + | |
| − | if ($(window).scrollTop() > 182) { | + | |
| − | $('.navbar-collapse').addClass('navbar-fixed-top');
| + | |
| − | }
| + | |
| − | if ($(window).scrollTop() < 183) {
| + | |
| − | $('.navbar-collapse').removeClass('navbar-fixed-top');
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| | | | |
| − | <link href='http://fonts.googleapis.com/css?family=Ek+Mukta' rel='stylesheet' type='text/css'>
| + | // 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) { |
| | | | |
| − | <!-- FACEBOOK SDK-->
| + | // 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> |
| − | <h2> Project Description </h2>
| |
| | | | |
| − | <p> The primary aim of our project is to design a toehold switch (a type of riboregulator) with the potential to detect any given RNA sequence, and to standardise it into a BioBrick for the future use by other iGEM teams. </p>
| + | <img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home1.png"/> |
| − | <p> Tuberculosis in cattle is a problem local to our region, Devon, causing devastating economic and personal losses to farmers in the dairy and beef industries. Therefore, the immediate application of our project is the detection of <i>Mycobacterium bovis</i>, the causative agent of tuberculosis in cattle, in a safe, low-tech and cost-effective manner. </p>
| + | <img class="block" src="https://static.igem.org/mediawiki/2015/0/0b/Exeter_home2.png"/> |
| − | <p> In order to make this a simple test which can be used in the field, we are aiming to express it as a cell-free system. We hope to use a chromoprotein as an indicator, and subsequently characterise it for use in cell-free systems. </p>
| + | <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> |
| | | | |
| − | <p style="font-size:1.2em;">Keep updated on our progress on our <a href="https://2015.igem.org/Team:Exeter/diary">diary</a></p>
| + | |
| − | < p style="font-size:1. 2em;"> Contact us at <a href=" mailto: exeterigem@gmail. com?body=Hello Exeter,">exeterigem@gmail. com</ a></ p> | + | |
| − | </section>
| + | <div style="background:#274e13; width:100%" class="container"> |
| − | </div>
| + | <!-- This is where my buttons are --> |
| − | <!-- /.col-md-8 -->
| + | < 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> |
| − | <div class="col-md-4">
| + | <li style="color:#b6d7a8; font-size:2em">Use these buttons to see more</li> |
| − | <section class="panel panel-default" id="twitterfeed">
| + | < li class=" next"><a href="https:// 2015. igem. org/ Team:Exeter/ Description"> Project< span aria- hidden=" true"> →</ span></ a></ li> |
| − | <!-- TWITTER thing-->
| + | </ul> |
| − | <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> | + | </nav> |
| − | </section>
| + | <!-- Buttons stop --> |
| − | <!-- /.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}} |
