Difference between revisions of "Team:NUS Singapore/Notebook/Group3"
Chloroplast (Talk | contribs) |
Chloroplast (Talk | contribs) |
||
| Line 3: | Line 3: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="en" class="no-js"> | <html lang="en" class="no-js"> | ||
| − | + | <head> | |
| − | + | <meta charset="UTF-8" /> | |
| − | + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| − | + | <title>Interactive Points | Codrops</title> | |
| − | + | <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" /> | |
| − | + | <meta name="author" content="Codrops" /> | |
| − | + | <link rel="shortcut icon" href="favicon.ico"> | |
| − | + | <!-- <script src="js/modernizr.custom.js"></script> --> | |
| − | + | <!--[if IE]> | |
| − | + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| − | + | <![endif]--> | |
| − | + | </head> | |
| − | + | <body> | |
| − | + | <main> | |
| − | + | <div id="st-container" class="st-container"> | |
| − | + | <div class="st-pusher"> | |
<!--Sidebar button--> | <!--Sidebar button--> | ||
| Line 32: | Line 32: | ||
<!--End of Sidebar button--> | <!--End of Sidebar button--> | ||
| − | + | <!--Header--> | |
| − | + | <header id="ha-header" class="ha-header ha-header-large"> | |
| − | + | <div class="ha-header-perspective"> | |
| − | + | <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="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> | |
| − | + | <div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div> | |
| − | + | </div> | |
| − | + | <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 NUS SINGAPORE</a></h1></a> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </header> | |
| − | + | <!--End of Header--> | |
| − | + | <!--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);"> | |
| − | <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;">NUS_SINGAPORE</h4></span> |
| − | + | <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-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> | |
| − | + | <div class="grow" id="grow-2"> | |
| − | + | <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/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</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-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/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> | |
| − | + | </li> | |
| − | + | <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> | |
| − | + | <div class="grow" id="grow-4"> | |
| − | + | <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" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a> | |
| − | + | <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </li> | |
| − | + | <li><a class="icon icon-notebook" id="menu-item-9" onclick="growDiv('9')" href="https://2016.igem.org/Team:NUS_Singapore/Notebook">PARTS | |
| − | + | <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="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> | |
| − | + | </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-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> | |
| − | + | <div class="grow" id="grow-7"> | |
| − | + | <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/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> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </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-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li> | |
| − | + | </ul> | |
| − | + | </nav> | |
| − | + | <!--End of Side Bar--> | |
| − | + | <div class="demos"> | |
| − | + | <a class="current-demo" href="index.html">Default Demo</a> | |
| − | + | <a href="index2.html">Perspective Demo (Webkit only)</a> | |
| − | + | </div> | |
| − | + | <div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div> | |
| + | <h2 class="ss-subtitle">Wet Lab Notebook: RIOT RESPONDER</h2> | ||
| + | <div id="ss-links" class="ss-links" style="z-index: 99;"> | ||
| + | <a href="#st-container">Jun</a> | ||
| + | <a href="#july">Jul</a> | ||
| + | <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"> | ||
| + | <div class="ss-left"> | ||
| + | <h2 id="may" class="">Jun</h2> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <h2>2016</h2> | ||
| + | </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;"> | ||
| + | <p>7 June: Immunostaining of MDA-468 cells with Anti-CD44v6</p> | ||
| + | |||
| + | <p><img src="https://static.igem.org/mediawiki/2016/8/84/T--NUS_Singapore--log2_1.png" style="width: 100%;"></p> | ||
| + | <p> | ||
| + | 27 June: lysed hela cells (followed cell lysis protocol)</br> | ||
| + | 30 June: lysed HepG2 cells (followed cell lysis protocol)</br> | ||
| + | 29 June: lysed MDA-468 cells (followed cell lysis protocol)</br> | ||
| + | 5 July: lysed MDA-231 cells (followed cell lysis protocol)</br> | ||
| + | 5 July: Did SDS-page and Western blot (follow SDS-PAGE and Western blot protocol)</br> | ||
| + | 22 July: SDS PAGE and Western Blot of lysed cells</br> | ||
| + | 26 July: Completed Western Blot of CD44v6 on Hela, MDA-231, MDA-468 and HepG2</br> | ||
| + | </p> | ||
| + | <p><img src="https://static.igem.org/mediawiki/2016/4/4d/T--NUS_Singapore--log2_2.png" style="width: 100%;"></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <h3> | ||
| + | <span>26 July, 2016</span> | ||
| + | <a href="http://tympanus.net/Tutorials/TypographyEffects/">Milestone 1: Probing for CD44v6 on Cancer cell lines</a> | ||
| + | </h3> | ||
| + | </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"> | ||
| + | <h3> | ||
| + | <span>1 Aug, 2016</span> | ||
| + | <a>Milestone 2: Construct HasA expression 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>26 June: | ||
| + | RE digested promoter BBa_K525998 plasmid with SpeI and PstI-HF and hasA with XbaI and PstI-HF. Ligated the two fragments overnight at room temperature | ||
| + | </br> | ||
| + | 27 June: | ||
| + | Transform biobrick promoter + hasA ligation into DH5 alpha | ||
| + | </br> | ||
| + | 28 July: Colony PCR using VF2 and VR primers</p> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/3/3b/T--NUS_Singapore--log2_3.png" style="width: 55%;"></p> | ||
| + | <p>29 July: | ||
| + | RE digest promoter +hasA with SpeI and PstI-HF and terminator BBa_B0015 with XbaI and PstI-HF. Ligated the two fragments overnight at room temperature. | ||
| + | </br> | ||
| + | 30 July: | ||
| + | Transformed hasA+pro and terminator ligation into DH5 alpha | ||
| + | </br> | ||
| + | 31 July: | ||
| + | Colony screening of complete hasA construct using VF2 and VR | ||
| + | </br> | ||
| + | Picked colonies 2 and 6 for overnight culture | ||
| + | </br> | ||
| + | 1 Aug: | ||
| + | Miniprepped the overnight culture and sent colony 2 plasmid for sequencing. </p> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/c/c3/T--NUS_Singapore--log2_4.png" style="width: 55%;"></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="ss-row ss-large"> | ||
| + | <div class="ss-left"> | ||
| + | <div class="log-content ss-circle-deco"> | ||
| + | <p> | ||
| + | 28 July: RIOT responder circuit custom synthesised in three plasmids (Seq1, Seq 2, Seq3). PCR of fragments successfully carried out</br> | ||
| + | 29 July: Seq3 fragment inserted into Biobrick plasmid pSCB13 via RE digest and ligation</br> | ||
| + | 30 July: Seq3 in pSCB13 transformed into E.coli</br> | ||
| + | 2 Aug: Colony screening for Seq3 yielded one positive colony</br> | ||
| + | 3 Aug: Seq3 pSCB13 extracted and inserted with Seq2 via RE digest and ligation</br> | ||
| + | 4 Aug: Seq2+Seq3 in pSCB13 transformed into E.coli</br> | ||
| + | 5 Aug: Colony screening for Seq2+Seq3 yielded several positive colonies</br> | ||
| + | 9 Aug: Seq2+Seq3 pSCB13 extracted and inserted with Seq1 via RE digest and ligation</br> | ||
| + | 10 Aug: Seq1+Seq2+Seq3 in pSCB13 transformed into E.coli</br> | ||
| + | 11 Aug: Colonies were picked for overnight culture and Miniprepped</br> | ||
| + | 12 Aug: RE digest of extracted Seq1+Seq2+Seq3 pSCB13 yielded several positive colonies</br> | ||
| + | |||
| + | </p> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/a/a3/T--NUS_Singapore--log2_5.png" style="width: 60%;"></p> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <h3> | ||
| + | <span>12 Aug, 2016</span> | ||
| + | <a >Milestone 3: Construct full RIOT Responder operon circuit </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>22 September, 2016</span> | ||
| + | <a >Milestone 4: Induction and Western blot of HasA</a> | ||
| + | </h3> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <div class="log-content ss-circle-deco"> | ||
| + | <p> | ||
| + | 14 Sep: Mass liquid culture of HasA bacteria and induction of expression by IPTG</br> | ||
| + | 15 Sep: Lysis of HasA culture</br> | ||
| + | 17 Sep: Purification of HasA by nickel column</br> | ||
| + | 22 Sep: Completed Western blot of HasA</br> | ||
| + | </p> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/b/bc/T--NUS_Singapore--log2_6.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"> | ||
| + | <p>19 Sep: RIOT responder bacteria induced with HasA protein at 10-4 M and 10-5 M. Fluorescence microscopy pictures taken at hourly intervals</br> | ||
| + | 20 Sep: Overnight HasA induced RIOT responder bacteria observed under fluorescent microscope</p> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/4/4d/T--NUS_Singapore--log2_8.png" style="width: 60%;"></p> | ||
| + | <p style="text-align: center;">HasA induction of RIOT responder bacteria (overnight) Top: red fluorescence microscopy pictures of (from left to right) negative control, and 10-5 M HasA. Bottom: bright field microscopy pictures of (from left to right) negative control, and 10-5 M HasA. | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <h3> | ||
| + | <span>20 September, 2016</span> | ||
| + | <a>Milestone 6: Induction of RIOT Responder circuit</a> | ||
| + | </h3> | ||
| + | </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"> | ||
| + | <h3> | ||
| + | <span>13 October, 2016</span> | ||
| + | <a>Milestone 5: Western blot of Has operon construct</a> | ||
| + | </h3> | ||
| + | </div> | ||
| + | <div class="ss-right"> | ||
| + | <div class="log-content ss-circle-deco"> | ||
| + | <p>6 Oct: 500mL liquid culture of RIOT Responder bacteria</br> | ||
| + | 7 Oct: Lysis of liquid culture</br> | ||
| + | 11 Oct: Nickel column purification of HasR, HasS, and HasI proteins</br> | ||
| + | 12 Oct: SDS PAGE of purification fractions and electrotransfer to PVDF membrane</br> | ||
| + | 13 Oct: Western Blot and chemiluminescent visualisation of HasR, HasS, and HasI bands</br> | ||
| + | <p style="text-align: center;"><img src="https://static.igem.org/mediawiki/2016/a/ac/T--NUS_Singapore--log2_7.png" style="width: 60%;"></p> | ||
| + | |||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <section class="content content--related"> | ||
| + | <ul class="copyright"> | ||
| + | <li>© NUS_Singapore iGEM 2016</li> | ||
| + | </ul> | ||
| + | </section> | ||
<a href="#" class="go-top">Go To Top</a> | <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 && Modernizr.csstransforms3d, | ||
| + | // 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(); | ||
| + | |||
| + | }); | ||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | </script> | |
| − | + | </body> | |
| − | + | ||
</html> | </html> | ||
{{Team:NUS_Singapore/JS}} | {{Team:NUS_Singapore/JS}} | ||
Revision as of 12:07, 17 October 2016
<!DOCTYPE html>
Wet Lab Notebook: RIOT RESPONDER
Jun
2016
July
2016
7 June: Immunostaining of MDA-468 cells with Anti-CD44v6
27 June: lysed hela cells (followed cell lysis protocol) 30 June: lysed HepG2 cells (followed cell lysis protocol) 29 June: lysed MDA-468 cells (followed cell lysis protocol) 5 July: lysed MDA-231 cells (followed cell lysis protocol) 5 July: Did SDS-page and Western blot (follow SDS-PAGE and Western blot protocol) 22 July: SDS PAGE and Western Blot of lysed cells 26 July: Completed Western Blot of CD44v6 on Hela, MDA-231, MDA-468 and HepG2
26 July, 2016 Milestone 1: Probing for CD44v6 on Cancer cell lines
Aug
2016
1 Aug, 2016 Milestone 2: Construct HasA expression plasmid
26 June: RE digested promoter BBa_K525998 plasmid with SpeI and PstI-HF and hasA with XbaI and PstI-HF. Ligated the two fragments overnight at room temperature 27 June: Transform biobrick promoter + hasA ligation into DH5 alpha 28 July: Colony PCR using VF2 and VR primers
29 July: RE digest promoter +hasA with SpeI and PstI-HF and terminator BBa_B0015 with XbaI and PstI-HF. Ligated the two fragments overnight at room temperature. 30 July: Transformed hasA+pro and terminator ligation into DH5 alpha 31 July: Colony screening of complete hasA construct using VF2 and VR Picked colonies 2 and 6 for overnight culture 1 Aug: Miniprepped the overnight culture and sent colony 2 plasmid for sequencing.
28 July: RIOT responder circuit custom synthesised in three plasmids (Seq1, Seq 2, Seq3). PCR of fragments successfully carried out 29 July: Seq3 fragment inserted into Biobrick plasmid pSCB13 via RE digest and ligation 30 July: Seq3 in pSCB13 transformed into E.coli 2 Aug: Colony screening for Seq3 yielded one positive colony 3 Aug: Seq3 pSCB13 extracted and inserted with Seq2 via RE digest and ligation 4 Aug: Seq2+Seq3 in pSCB13 transformed into E.coli 5 Aug: Colony screening for Seq2+Seq3 yielded several positive colonies 9 Aug: Seq2+Seq3 pSCB13 extracted and inserted with Seq1 via RE digest and ligation 10 Aug: Seq1+Seq2+Seq3 in pSCB13 transformed into E.coli 11 Aug: Colonies were picked for overnight culture and Miniprepped 12 Aug: RE digest of extracted Seq1+Seq2+Seq3 pSCB13 yielded several positive colonies
Sep
2016
22 September, 2016 Milestone 4: Induction and Western blot of HasA
14 Sep: Mass liquid culture of HasA bacteria and induction of expression by IPTG 15 Sep: Lysis of HasA culture 17 Sep: Purification of HasA by nickel column 22 Sep: Completed Western blot of HasA
19 Sep: RIOT responder bacteria induced with HasA protein at 10-4 M and 10-5 M. Fluorescence microscopy pictures taken at hourly intervals 20 Sep: Overnight HasA induced RIOT responder bacteria observed under fluorescent microscope
HasA induction of RIOT responder bacteria (overnight) Top: red fluorescence microscopy pictures of (from left to right) negative control, and 10-5 M HasA. Bottom: bright field microscopy pictures of (from left to right) negative control, and 10-5 M HasA.
20 September, 2016 Milestone 6: Induction of RIOT Responder circuit
Oct
2016
13 October, 2016 Milestone 5: Western blot of Has operon construct
6 Oct: 500mL liquid culture of RIOT Responder bacteria 7 Oct: Lysis of liquid culture 11 Oct: Nickel column purification of HasR, HasS, and HasI proteins 12 Oct: SDS PAGE of purification fractions and electrotransfer to PVDF membrane 13 Oct: Western Blot and chemiluminescent visualisation of HasR, HasS, and HasI bands
