Difference between revisions of "Team:NUS Singapore/Notebook/Group3"

 
(16 intermediate revisions by one other user not shown)
Line 3: Line 3:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en" class="no-js">
 
<html lang="en" class="no-js">
−
<head>
+
<head>
−
<meta charset="UTF-8" />
+
  <meta charset="UTF-8" />
−
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<title>Interactive Points | Codrops</title>
+
  <title>Interactive Points | Codrops</title>
−
<meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
+
  <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
−
<meta name="author" content="Codrops" />
+
  <meta name="author" content="Codrops" />
−
<link rel="shortcut icon" href="favicon.ico">
+
  <link rel="shortcut icon" href="favicon.ico">
  
  
−
<!-- <script src="js/modernizr.custom.js"></script> -->
+
  <!-- <script src="js/modernizr.custom.js"></script> -->
  
−
<!--[if IE]>
+
        <!--[if IE]>
−
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
−
<![endif]-->
+
        <![endif]-->
−
</head>
+
      </head>
−
<body>
+
      <body>
−
<main>
+
        <main>
−
<div id="st-container" class="st-container">
+
          <div id="st-container" class="st-container">
−
<div class="st-pusher">
+
            <div class="st-pusher">
  
−
                    <!--Sidebar button-->
+
              <!--Sidebar button-->
−
                    <div id="st-trigger-effects">
+
              <div id="st-trigger-effects">
−
                        <button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="left: -83px; font-size: 50px; z-index: 100;">
+
                <button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="left: -83px; font-size: 50px; z-index: 100;">
−
                            <span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span>
+
                  <span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span>
−
                        </button>
+
                </button>
−
                    </div>
+
              </div>
−
                    <!--End of Sidebar button-->
+
              <!--End of Sidebar button-->
  
−
<!--Header-->
+
              <!--Header-->
−
<header id="ha-header" class="ha-header ha-header-large">
+
              <header id="ha-header" class="ha-header ha-header-large">
−
<div class="ha-header-perspective">
+
                <div class="ha-header-perspective">
−
<div id="header1" class="ha-header-front" style="height: 120px">
+
                  <div id="header1" class="ha-header-front" style="height: 120px">
−
<a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
+
                  <a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
−
<a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
+
                  <a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
−
<a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
+
                  <a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
−
<div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
+
                  <div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
−
</div>
+
                </div>
−
<div class="ha-header-bottom" style="text-align: center;">
+
                <div class="ha-header-bottom" style="text-align: center;">
−
<a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
+
                  <a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
−
</div>
+
                </div>
−
</div>
+
              </div>
−
</header>
+
            </header>
−
<!--End of Header-->
+
            <!--End of Header-->
  
−
<!--Side Bar-->
+
            <!--Side Bar-->
−
                    <nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: rgb(179, 179, 179);">
+
<nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: #E59500;">
−
<span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px;">NUS_SINGAPORE</h4></span>
+
<span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px; color: white;">NUS_SINGAPORE</h4></span>
−
                        <ul>
+
<ul>
−
                            <li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
+
<li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
−
                            <li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
+
<li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
−
                                <span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
<span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
−
                                <div class="grow" id="grow-2">
+
<div class="grow" id="grow-2">
−
                                    <div class='measuringWrapper'>
+
<div class='measuringWrapper'>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
+
 
−
                                    </div>
+
<a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
−
                                </div>
+
</div>
−
                            </li>
+
</div>
−
                            <li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
+
</li>
−
                                <span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
+
<li><a class="icon icon-notebook"  id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">RIOT Sensor
−
                                <div class="grow" id="grow-3">
+
<span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
−
                                    <div class='measuringWrapper'>
+
<div class="grow" id="grow-9">
 +
<div class='measuringWrapper'>
 +
  <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Description</a>
 +
<a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
 +
  <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
 +
 +
</div>
 +
</div>
 +
</li>
 +
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTResponder">RIOT Responder</a></li>
 +
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTInvader">RIOT Invader</a></li>
 +
<li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
 +
<span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
 +
<div class="grow" id="grow-3">
 +
<div class='measuringWrapper'>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
−
                                    </div>
+
</div>
−
                                </div>
+
</div>
−
                            </li>
+
</li>
−
                            <li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
+
<li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
 
                                                                 <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
 
                                                                 <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
−
                                <div class="grow" id="grow-4">
+
<div class="grow" id="grow-4">
−
                                    <div class='measuringWrapper'>
+
<div class='measuringWrapper'>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Melbourne</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations#MELBOURNE" class="list-group-item" style="color: rgb(179, 179, 179);">MELBOURNE</a>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations#HONG_KONG_HKUST" class="list-group-item" style="color: rgb(179, 179, 179);">HONG_KONG_HKUST</a>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations#HONG_KONG_HKU" class="list-group-item" style="color: rgb(179, 179, 179);">HONG_KONG_HKU</a>
−
                                    </div>
+
</div>
−
                                </div>
+
</div>
−
                            </li>
+
</li>
−
                                                         <li><a class="icon icon-notebook" id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">PARTS
+
                                                         <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Parts">Parts Registry</a></li>
−
                                <span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
<li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
−
                                <div class="grow" id="grow-9">
+
−
                                    <div class='measuringWrapper'>
+
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Parts Registry</a>
+
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
+
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </li>
+
−
                            <li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
+
  
−
                            <li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
+
<li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
−
                            <li><a class="icon icon-notebook"  id="menu-item-7" onclick="growDiv('7')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
+
<li><a class="icon icon-notebook"  id="menu-item-7" onclick="growDiv('7')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
−
                                <span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
<span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
−
                                <div class="grow" id="grow-7">
+
<div class="grow" id="grow-7">
−
                                    <div class='measuringWrapper'>
+
<div class='measuringWrapper'>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
−
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
+
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
−
                                    </div>
+
</div>
−
                                </div>
+
</div>
−
                            </li>
+
</li>
−
                            <li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
+
<li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
−
                        </ul>
+
                            <li><a class="icon icon-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li>
−
                    </nav>
+
</ul>
−
                    <!--End of Side Bar-->
+
</nav>
 +
<!--End of Side Bar-->  
  
  
−
<section class="content content--related">
+
              <div class="demos">
−
<ul class="copyright">
+
                <a class="current-demo" href="index.html">Default Demo</a>
−
<li>&copy; NUS_Singapore iGEM 2016</li>
+
                <a href="index2.html">Perspective Demo (Webkit only)</a>
−
</ul>
+
              </div>
−
</section>
+
              <div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div>
−
</div><!-- /st-pusher -->
+
              <h2 class="ss-subtitle">Wet Lab Notebook: RIOT RESPONDER</h2>
−
</div><!-- /st-container -->
+
              <div id="ss-links" class="ss-links" style="z-index: 99;">
−
</main>
+
                <a href="#st-container">Jun</a>
−
                <script>
+
                <a href="#july">Jul</a>
−
                (function($) {
+
                <a href="#august">Aug</a>
 +
                <a href="#september">Sep</a>
 +
                <a href="#october">Oct</a>
 +
              </div>
 +
              <div id="ss-container" class="ss-container" style="background-color: white;">
 +
                <div class="ss-row" style="right: 0%;">
 +
                  <div class="ss-left" style="left: 2%;">
 +
                    <h2 id="may" class="">Jun</h2>
 +
                  </div>
 +
                  <div class="ss-right" style="right: -2%;">
 +
                    <h2>2016</h2>
 +
                  </div>
 +
                </div>
 +
                <div class="ss-row ss-large">
 +
                  <div class="ss-left">
 +
                    <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                    <p>Overall Strategies</p>
 +
 
 +
 
 +
                    <p><img src="https://static.igem.org/mediawiki/2016/1/13/T--NUS_Singapore--log3_1.png" style="width: 100%;"></p>
 +
                    <p><img src="https://static.igem.org/mediawiki/2016/2/25/T--NUS_Singapore--log3_0.png" style="width: 100%;"></p>
 +
                  </div>
 +
                </div>
 +
                <div class="ss-right">
 +
                  <h3>
 +
                    <span>1 June, 2016</span>
 +
                    <a href="http://tympanus.net/Tutorials/TypographyEffects/">Milestone 1 : Overall cloning design</a>
 +
                  </h3>
 +
                </div>
 +
              </div>
 +
 
 +
              <div class="ss-row ss-large">
 +
                <div class="ss-left">
 +
                  <h3>
 +
                    <span>12 June, 2016</span>
 +
                    <a>Milestone 2: Construction of pConst-LuxR-HA</a>
 +
                  </h3>
 +
                </div>
 +
                <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
                  <div class="log-content ss-circle-deco">
 +
                  <span><p>Construct 1: </p><p><img src="https://static.igem.org/mediawiki/2016/9/9f/T--NUS_Singapore--log3_8.png" style="width: 100%;"></p></span>
 +
 
 +
                  <p><img src="https://static.igem.org/mediawiki/2016/e/e7/T--NUS_Singapore--log3_2.png" style="width: 100%;"></p>
 +
                  <p>
 +
                    <span style="font-size: larger;">Fig 1. A.</span> LuxR gene amplified from iGEM distribution 2016 with designed primers GEM002 and GEM005. The expected band size of LuxR with overhang is 795 bp.  <span style="font-size: larger;">B.</span>LuxR stitiched with terminater (BBa_B0015) with overlapping PCR. <span style="font-size: larger;">C.</span> Constructed full-length RBS-pConstitutive-LuxR-HA-Terminator with expected size of 1034 bp.
 +
 
 +
                  </p>
 +
                 
 +
                </div>
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="ss-row">
 +
              <div class="ss-left">
 +
                <h2 id="july" class="offset">July</h2>
 +
              </div>
 +
              <div class="ss-right offset">
 +
                <h2>2016</h2>
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="ss-row ss-large">
 +
              <div class="ss-left">
 +
                <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <span><p>Construct 2: </p><p><img src="https://static.igem.org/mediawiki/2016/6/61/T--NUS_Singapore--log3_9.png" style="width: 100%;"></p></span>
 +
 
 +
                <p><img src="https://static.igem.org/mediawiki/2016/2/22/T--NUS_Singapore--log3_3.png" style="width: 100%;"></p>
 +
                <p>
 +
                  <span style="font-size: larger;">Fig 2. A.</span> LuxI gene is cloned from iGEM2016 distribution kit with primers GEM008 and GEM011. The observed band size of LuxI with overhangs is close to the expected band size of 629 bp. <span style="font-size: larger;">B.</span>Terminator BBa_B0015 is amplified using GEM009 and 012 and stitiched with LuxI. <span style="font-size: larger;">C.</span> Promoter-RBS fragment is synthesized and stitiched to LuxI-terminator by PCR reaction. The observed band size for full LuxI construct is close to the expected band size of 936 bp.
 +
 
 +
                </p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>4 July, 2016</span>
 +
                <a>Milestone 3: : Construction of pLuxR-LuxI-HA </a>
 +
              </h3>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <h3>
 +
                <span>11 July, 2016</span>
 +
                <a>Milestone 4: Screening of pLuxR-invasin constructs </a>
 +
              </h3>
 +
            </div>
 +
            <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
              <div class="log-content ss-circle-deco">
 +
 
 +
                <p><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NUS_Singapore--log3_16.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row">
 +
            <div class="ss-left">
 +
              <h2 id="august" class="offset">Aug</h2>
 +
            </div>
 +
            <div class="ss-right offset">
 +
              <h2>2016</h2>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/0/08/T--NUS_Singapore--log3_17.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>1 Aug, 2016</span>
 +
                <a>Milestone 5: Screening of pLuxR-LLO construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <h3>
 +
                <span>8 Aug, 2016</span>
 +
                <a>Milestone 6: Construction of pLuxR-GFP plasmid</a>
 +
              </h3>
 +
            </div>
 +
            <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
              <div class="log-content ss-circle-deco">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/2/2b/T--NUS_Singapore--log3_18.png" style="width: 100%;"></p>
 +
 
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/a/a3/T--NUS_Singapore--log3_19.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>1 Aug, 2016</span>
 +
                <a>Milestone 7: Testing the assembled pConst-LuxR-pLuxR-LuxI construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row">
 +
            <div class="ss-left">
 +
              <h2 id="september" class="offset">Sep</h2>
 +
            </div>
 +
            <div class="ss-right offset">
 +
              <h2>2016</h2>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <h3>
 +
                <span>19 Sep, 2016</span>
 +
                <a>Milestone 8: Testing the assembled pConst-LuxR-pLuxR-LLO construct</a>
 +
              </h3>
 +
            </div>
 +
            <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
              <div class="log-content ss-circle-deco">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/b/bf/T--NUS_Singapore--log3_20.png" style="width: 100%;"></p>
 +
 
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="ss-row">
 +
            <div class="ss-left">
 +
              <h2 id="october" class="offset">Oct</h2>
 +
            </div>
 +
            <div class="ss-right offset">
 +
              <h2>2016</h2>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/6/64/T--NUS_Singapore--log3_211.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>10 Oct, 2016</span>
 +
                <a>Milestone 9: Testing the assembled pConst-LuxR-pLuxR-GFP construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
 +
 
 +
 
 +
 
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    <section class="content content--related">
 +
      <ul class="copyright">
 +
        <li>&copy; NUS_Singapore iGEM 2016</li>
 +
      </ul>
 +
    </section>
 +
    <a href="#" class="go-top">Go To Top</a>
 +
  </div><!-- /st-pusher -->
 +
</div><!-- /st-container -->
 +
</main>
 +
<script>
 +
  $(function() {
 +
 
 +
    var $sidescroll = (function() {
 +
 
 +
                    // the row elements
 +
                    var $rows          = $('#ss-container > div.ss-row'),
 +
                    // we will cache the inviewport rows and the outside viewport rows
 +
                    $rowsViewport, $rowsOutViewport,
 +
                    // navigation menu links
 +
                    $links          = $('#ss-links > a'),
 +
                    // the window element
 +
                    $win            = $(window),
 +
                    // we will store the window sizes here
 +
                    winSize        = {},
 +
                    // used in the scroll setTimeout function
 +
                    anim            = false,
 +
                    // page scroll speed
 +
                    scollPageSpeed  = 2000 ,
 +
                    // page scroll easing
 +
                    scollPageEasing = 'easeInOutExpo',
 +
                    // perspective?
 +
                    hasPerspective  = false,
 +
                   
 +
                    perspective    = hasPerspective,
 +
                    // initialize function
 +
                    init            = function() {
 +
 
 +
                        // get window sizes
 +
                        getWinSize();
 +
                        // initialize events
 +
                        initEvents();
 +
                        // define the inviewport selector
 +
                        defineViewport();
 +
                        // gets the elements that match the previous selector
 +
                        setViewportRows();
 +
                        // if perspective add css
 +
                        if( perspective ) {
 +
                          $rows.css({
 +
                            '-webkit-perspective'          : 600,
 +
                            '-webkit-perspective-origin'    : '50% 0%'
 +
                          });
 +
                        }
 +
                        // show the pointers for the inviewport rows
 +
                        $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
 +
                        // set positions for each row
 +
                        placeRows();
 +
                       
 +
                      },
 +
                    // defines a selector that gathers the row elems that are initially visible.
 +
                    // the element is visible if its top is less than the window's height.
 +
                    // these elements will not be affected when scrolling the page.
 +
                    defineViewport  = function() {
 +
 
 +
                      $.extend( $.expr[':'], {
 +
 
 +
                        inviewport  : function ( el ) {
 +
                          if ( $(el).offset().top < winSize.height ) {
 +
                            return true;
 +
                          }
 +
                          return false;
 +
                        }
 +
 
 +
                      });
 +
 
 +
                    },
 +
                    // checks which rows are initially visible
 +
                    setViewportRows = function() {
 +
 
 +
                      $rowsViewport      = $rows.filter(':inviewport');
 +
                      $rowsOutViewport    = $rows.not( $rowsViewport )
 +
                     
 +
                    },
 +
                    // get window sizes
 +
                    getWinSize      = function() {
 +
 
 +
                      winSize.width  = $win.width();
 +
                      winSize.height  = $win.height();
 +
 
 +
                    },
 +
                    // initialize some events
 +
                    initEvents      = function() {
 +
 
 +
                        // navigation menu links.
 +
                        // scroll to the respective section.
 +
                        $links.on( 'click.Scrolling', function( event ) {
 +
 
 +
                            // scroll to the element that has id = menu's href
 +
                            $('html, body').stop().animate({
 +
                              scrollTop: $( $(this).attr('href') ).offset().top
 +
                            }, scollPageSpeed, scollPageEasing );
 +
                           
 +
                            return false;
 +
 
 +
                          });
 +
                       
 +
                        $(window).on({
 +
                            // on window resize we need to redefine which rows are initially visible (this ones we will not animate).
 +
                            'resize.Scrolling' : function( event ) {
 +
 
 +
                                // get the window sizes again
 +
                                getWinSize();
 +
                                // redefine which rows are initially visible (:inviewport)
 +
                                setViewportRows();
 +
                                // remove pointers for every row
 +
                                $rows.find('a.ss-circle').removeClass('ss-circle-deco');
 +
                                // show inviewport rows and respective pointers
 +
                                $rowsViewport.each( function() {
 +
 
 +
                                  $(this).find('div.ss-left')
 +
                                  .css({ left  : '0%' })
 +
                                  .end()
 +
                                  .find('div.ss-right')
 +
                                  .css({ right  : '0%' })
 +
                                  .end()
 +
                                  .find('a.ss-circle')
 +
                                  .addClass('ss-circle-deco');
 +
 
 +
                                });
 +
 
 +
                              },
 +
                            // when scrolling the page change the position of each row 
 +
                            'scroll.Scrolling' : function( event ) {
 +
 
 +
                                // set a timeout to avoid that the
 +
                                // placeRows function gets called on every scroll trigger
 +
                                if( anim ) return false;
 +
                                anim = true;
 +
                                setTimeout( function() {
 +
 
 +
                                  placeRows();
 +
                                  anim = false;
 +
                                 
 +
                                }, 10 );
 +
 
 +
                              }
 +
                            });
 +
 
 +
                      },
 +
                    // sets the position of the rows (left and right row elements).
 +
                    // Both of these elements will start with -50% for the left/right (not visible)
 +
                    // and this value should be 0% (final position) when the element is on the
 +
                    // center of the window.
 +
                    placeRows      = function() {
 +
 
 +
                            // how much we scrolled so far
 +
                            var winscroll  = $win.scrollTop(),
 +
                            // the y value for the center of the screen
 +
                            winCenter  = winSize.height / 2 + winscroll;
 +
 
 +
                        // for every row that is not inviewport
 +
                        $rowsOutViewport.each( function(i) {
 +
 
 +
                          var $row    = $(this),
 +
                                // the left side element
 +
                                $rowL  = $row.find('div.ss-left'),
 +
                                // the right side element
 +
                                $rowR  = $row.find('div.ss-right'),
 +
                                // top value
 +
                                rowT    = $row.offset().top;
 +
 
 +
                            // hide the row if it is under the viewport
 +
                            if( rowT > winSize.height + winscroll ) {
 +
 
 +
                              if( perspective ) {
 +
 
 +
                                $rowL.css({
 +
                                  '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
 +
                                  'opacity'          : 0
 +
                                });
 +
                                $rowR.css({
 +
                                  '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
 +
                                  'opacity'          : 0
 +
                                });
 +
 
 +
                              }
 +
                              else {
 +
 
 +
                                $rowL.css({ left        : '-50%' });
 +
                                $rowR.css({ right      : '-50%' });
 +
 
 +
                              }
 +
                             
 +
                            }
 +
                            // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
 +
                            else {
 +
 
 +
                                    // row's height
 +
                                    var rowH    = $row.height(),
 +
                                    // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height
 +
                                    factor  = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
 +
                                    // value for the left / right of each side of the row.
 +
                                    // 0% is the limit
 +
                                    val    = Math.max( factor * 50, 0 );
 +
                                   
 +
                                    if( val <= 0 ) {
 +
 
 +
                                    // when 0% is reached show the pointer for that row
 +
                                    if( !$row.data('pointer') ) {
 +
 
 +
                                      $row.data( 'pointer', true );
 +
                                      $row.find('.ss-circle').addClass('ss-circle-deco');
 +
 
 +
                                    }
 +
 
 +
                                  }
 +
                                  else {
 +
 
 +
                                    // the pointer should not be shown
 +
                                    if( $row.data('pointer') ) {
 +
 
 +
                                      $row.data( 'pointer', false );
 +
                                      $row.find('.ss-circle').removeClass('ss-circle-deco');
 +
 
 +
                                    }
 +
                                   
 +
                                  }
 +
                                 
 +
                                // set calculated values
 +
                                if( perspective ) {
 +
 
 +
                                  var t      = Math.max( factor * 75, 0 ),
 +
                                  r      = Math.max( factor * 90, 0 ),
 +
                                  o      = Math.min( Math.abs( factor - 1 ), 1 );
 +
                                 
 +
                                  $rowL.css({
 +
                                    '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
 +
                                    'opacity'          : o
 +
                                  });
 +
                                  $rowR.css({
 +
                                    '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
 +
                                    'opacity'          : o
 +
                                  });
 +
 
 +
                                }
 +
                                else {
 +
 
 +
                                  $rowL.css({ left    : - val + '%' });
 +
                                  $rowR.css({ right  : - val + '%' });
 +
                                 
 +
                                }
 +
                               
 +
                              } 
 +
 
 +
                            });
 +
 
 +
};
 +
 
 +
return { init : init };
 +
 
 +
})();
 +
 
 +
$sidescroll.init();
 +
 
 +
});
 +
 
  
−
var setCss = function() {
 
−
if($(window).width() <= 900) {
 
−
$('#nus_logo').css('left', "10%");
 
−
$('#sci_logo').css('display', "none");
 
−
$('#sps_logo').css('display', "none");
 
−
}else{
 
−
$('#nus_logo').css('left', "0%");
 
−
$('#sci_logo').css('display', "block");
 
−
$('#sps_logo').css('display', "block");
 
−
}
 
−
};
 
  
−
$(document).ready(function() {
 
−
setCss();
 
−
$(window).resize(setCss);
 
−
});
 
  
−
})(jQuery);
+
</script>
−
</script>
+
</body>
−
</body>
+
 
</html>
 
</html>
 
{{Team:NUS_Singapore/JS}}
 
{{Team:NUS_Singapore/JS}}

Latest revision as of 17:44, 19 October 2016

<!DOCTYPE html> Interactive Points | Codrops

iGEM 2016         NUS SINGAPORE

Default Demo Perspective Demo (Webkit only)

Wet Lab Notebook: RIOT RESPONDER

Jun

2016

Overall Strategies

1 June, 2016 Milestone 1 : Overall cloning design

12 June, 2016 Milestone 2: Construction of pConst-LuxR-HA

Construct 1:

Fig 1. A. LuxR gene amplified from iGEM distribution 2016 with designed primers GEM002 and GEM005. The expected band size of LuxR with overhang is 795 bp. B.LuxR stitiched with terminater (BBa_B0015) with overlapping PCR. C. Constructed full-length RBS-pConstitutive-LuxR-HA-Terminator with expected size of 1034 bp.

July

2016

Construct 2:

Fig 2. A. LuxI gene is cloned from iGEM2016 distribution kit with primers GEM008 and GEM011. The observed band size of LuxI with overhangs is close to the expected band size of 629 bp. B.Terminator BBa_B0015 is amplified using GEM009 and 012 and stitiched with LuxI. C. Promoter-RBS fragment is synthesized and stitiched to LuxI-terminator by PCR reaction. The observed band size for full LuxI construct is close to the expected band size of 936 bp.

4 July, 2016 Milestone 3: : Construction of pLuxR-LuxI-HA

11 July, 2016 Milestone 4: Screening of pLuxR-invasin constructs

Aug

2016

1 Aug, 2016 Milestone 5: Screening of pLuxR-LLO construct

8 Aug, 2016 Milestone 6: Construction of pLuxR-GFP plasmid

1 Aug, 2016 Milestone 7: Testing the assembled pConst-LuxR-pLuxR-LuxI construct

Sep

2016

19 Sep, 2016 Milestone 8: Testing the assembled pConst-LuxR-pLuxR-LLO construct

Oct

2016

10 Oct, 2016 Milestone 9: Testing the assembled pConst-LuxR-pLuxR-GFP construct

  • © NUS_Singapore iGEM 2016
Go To Top