Difference between revisions of "Team:TAS Taipei/Notebook"

(Prototype team page)
 
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{TAS_Taipei}}
+
{{TAS Taipei/CSS}}
 
<html>
 
<html>
  
 +
<head>
 +
<title>Notebook - TAS Taipei iGEM Wiki</title>
 +
<style type='text/css'>
 +
      #top_title, #sideMenu{
 +
        display: none;
 +
      }
  
−
<div class="column full_size">
+
      #content{
 +
        width: 100%;
 +
        margin: 0;
 +
        padding: 0;
 +
        background: #f3f4f4;}
  
−
<p> Document the dates you worked on your project.</p>
+
     
 +
    img{width:100%}
  
 +
    </style>
 +
</head>
 +
 +
<body data-spy="scroll" data-target="#category_navbar">
 +
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
 +
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 +
 +
<link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
 +
 +
 +
 +
<script>localStorage.clear();</script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
 +
<script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
 +
 +
<script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
</script>
 +
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 +
</script>
 +
 +
<style type='text/css'>
 +
p{font-family: Lato !important; font-size:17px !important}
 +
h1{font-size:40-px !important;}
 +
body{font-family:Lato !important;}
 +
    h3{font-size:25-px;}
 +
</style>
 +
 +
<script>
 +
$(document).ready(function() {
 +
if(document.domain === "2016.igem.org")
 +
setTimeout(function() {
 +
$("style:eq(0)").remove();
 +
}, 500);
 +
});
 +
   
 +
   
 +
</script>
 +
   
 +
 +
   
 +
<div class="container" style='z-index:10;position:relative;'>
 +
<div class="row center-block" style = "text-align: left;">
 +
<nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
 +
<ul style='margin-left:0px'>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Background"><h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
 +
<h4><b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.</b></h4>
 +
</div>
 +
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
 +
                        <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our discovery of exciting science!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Model"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>MODEL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
 +
</div>
 +
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
 +
<h4><b>Computational Biology</b> provides us models that we cannot easily test experimentally. Click to find out the results of our modeling, and the math behind it!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>HUMAN PRACTICE</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
 +
<h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled <b>social aspects</b> of this project.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Safety"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>SAFETY</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div style='height:100px;'>
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
 +
</div>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
 +
<h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the integrity and security of our work environment.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>TEAM</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
 +
<h4>Every iGEM project is the accumulation of an entire year's hard work by a group of cheerful students. <b>Meet the team!</b></h4>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</nav>
 
</div>
 
</div>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="row center-block" style = "padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
 +
<div class="row" style = "text-align:center;">
 +
<div class="col-sm-2">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png
 +
" alt="" style="width: 100px;"></a>
 +
</div>
 +
<div class="col-sm-8" style='text-align:center;'>
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
 +
<h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;"><b>
 +
C&#9678;UNTERACTS</b></h2>
 +
</a>
 +
</div>
 +
<div class="col-sm-2">
 +
<a href="https://igem.org/HS"><img src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt="" style="width: 100px;"></a>
 +
</div>
 +
</div>
 +
</div>
 +
<br>
 +
<div id='bodycontainer' class='row card'>
 +
<div class="col-sm-12">
 +
<div class="row">
 +
<div class="col-sm-12">
 +
<h1>Notebook</h1>
 +
</div>
 +
</div>
 +
                <p>Below are links to pdfs of our experimental notebook. </p>
 +
                <a href="https://static.igem.org/mediawiki/2016/8/8d/T--TAS_Taipei--Experiment_Protocol.pdf"><button type="button" class="btn btn-primary btn-lg">Experiment Protocol</button></a>
 +
                <a href="https://static.igem.org/mediawiki/2016/6/61/T--TAS_Taipei--Cataracts_Model.pdf"><button type="button" class="btn btn-success btn-lg">Cataracts Model</button></a>
 +
                <a href="https://static.igem.org/mediawiki/2016/e/ee/T--TAS_Taipei--Constructs.pdf"><button type="button" class="btn btn-info btn-lg">Constructs</button></a>
 +
                <a href="https://static.igem.org/mediawiki/2016/4/4a/T--TAS_Taipei--Protein_Purification.pdf"><button type="button" class="btn btn-warning btn-lg">Protein Purification</button></a>
 +
                <a href="https://static.igem.org/mediawiki/2016/3/3e/T--TAS_Taipei--Nanoparticles.pdf"><button type="button" class="btn btn-danger btn-lg">Nanoparticle</button></a>
 +
                <a href="https://static.igem.org/mediawiki/2016/d/da/T--TAS_Taipei--Research_Progress_Log.pdf"><button type="button" class="btn btn-default btn-lg">Research Progress Log</button></a>
 +
               
 +
                <br><br><br>
 +
  
−
<div class="column half_size">
+
</div>
−
<h5>What should this page have?</h5>
+
−
<ul>
+
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
 +
</div>
 +
    </div>
 +
 +
<br>
 +
<br><br>
 +
 +
<canvas id="canvas-container" style = "z-index:-1"></canvas>
 +
<script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
 +
 +
</body>
 +
 +
 +
 +
 +
 +
 +
 +
 +
<style type='text/css'>
 +
    #bg { position: fixed; top: 0; left: 0; }
 +
    .bgwidth { width: 100%; }
 +
    .bgheight { height: 100%; }
 +
</style>
 +
 +
<div class="backgroundpic">
 +
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" style="z-index:0" width="100%" height="100%" id="bg" alt="" >
 
</div>
 
</div>
  
−
<div class="column half_size">
+
<script>
−
<h5>Inspiration</h5>
+
var nowRadius = 0
−
<p>You can see what others teams have done to organize their notes:</p>
+
$(function() {
 +
    if (screen.width > 1800)
 +
      $("#slideoutco").fadeOut(0);
 +
    $({blurRadius: 0}).animate({blurRadius: 10}, {
 +
        duration: 20000,
 +
        easing:'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
  
−
<ul>
+
            });
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
            nowRadius = this.blurRadius;
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
        var LOCSnum = Math.round(nowRadius*6/9);
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
        /**if (NineLOCSnum > 20) switchMessage("YELLOW","<b> Oh no! </b> Cataracts are forming! Click on the Eyedrop Tab and get <b>TREATMENT</b> eyedrops!", currentColor()=="GREEN");
−
</ul>
+
        if (NineLOCSnum == 55) $("#slideoutco").fadeOut(1000);
 +
        if (NineLOCSnum > 60) switchMessage("RED","Your cataracts are very severe. You need to get TREATMENT fast by clicking the Eyedrop Tab", currentColor()=="YELLOW");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+"");
 +
       
 +
        if (LOCSnum ==0) document.getElementById('bluebutton').click();
 +
        }
 +
    });
  
 +
});
 +
 +
startBlur= function(speed) {
 +
    $({blurRadius: nowRadius}).animate({blurRadius: 10}, {
 +
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 +
            });
 +
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
        /**if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
 +
        if (NineLOCSnum > 20) switchMessage("RED","<b>Cataracts</b> are creeping back again! Click the PREVENTION eye drop to add GSR into your eyes!", currentColor()=="BLUE");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+" ");
 +
       
 +
       
 +
        }
 +
    });
 +
};
 +
 +
stopBlur= function(speed) {
 +
 +
    $({blurRadius: nowRadius}).animate({blurRadius: 0}, {
 +
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
        if ($("#redbutton").hasClass("isOn") ) {} else{return;};
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 +
            });
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
         
 +
        /**if (NineLOCSnum < 68){ if (NineLOCSnum > 10) if(currentColor()=="RED" ||  currentColor() == "BLUE") $("#slideoutco").fadeOut(0); switchMessage("YELLOW","<b> Treating</b> your cataract with <b>25HC Eyedrops </b>", currentColor()=="RED");
 +
                              }
 +
        if (NineLOCSnum == 9) $("#slideoutco").fadeOut(0);
 +
       
 +
           
 +
        if (NineLOCSnum < 5) {
 +
            if ($("#bluebutton").hasClass("isOn")){
 +
                   
 +
                switchMessage("GREEN","<b>Your eyes are <i>pernamently</i> crystal clear!</b> Treatment is not needed, so don't forget to turn it off!. Click the question mark to learn more.", currentColor()=="BLUE")
 +
            }
 +
            else switchMessage("BLUE","Your eyes are crystal clear! To avoid waste, please turn off the <b>TREATMENT</b> eyedrop.", currentColor()=="YELLOW");
 +
        }*/
 +
        if (LOCSnum > 6) LOCSnum = "6+";
 +
        else LOCSnum = LOCSnum +" ";
 +
        $('#LOCS').text(LOCSnum+"");   
 +
       
 +
        }
 +
    });
 +
   
 +
   
 +
};
 +
 +
function chooseBlur() {
 +
  if ($("#redbutton").hasClass("isOn") )
 +
      {
 +
      stopBlur(4500);
 +
 
 +
            }
 +
 
 +
    else {
 +
            if($("#bluebutton").hasClass("isOn") ) {}
 +
            else {startBlur(12000);}
 +
          }
 +
    /**if (!$("#redbutton").hasClass("isOn"))
 +
        if ($("#bluebutton").hasClass("isOn"))
 +
            {
 +
                $("#slideoutco").fadeOut(0);
 +
                switchMessage("BLUE","Great! Furthur cataract formation is prevented with GSR Eyedrops. Now use <b>TREATMENT</b> eyedrops one last time.", currentColor()=="RED")
 +
            }*/
 +
};
 +
 +
 +
</script>
 +
 +
<script>
 +
 +
function switchToggleB() {
 +
    if ( $("#bluebutton").hasClass("isOn") ) {
 +
        $("#bluebutton").removeClass("isOn"); }
 +
  else { $("#bluebutton").addClass("isOn"); }
 +
};
 +
function switchToggleR() {
 +
    if ( $("#redbutton").hasClass("isOn") ) {
 +
        $("#redbutton").removeClass("isOn"); }
 +
  else { $("#redbutton").addClass("isOn"); }
 +
};
 +
   
 +
function currentColor() {
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        return "RED";
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        return "YELLOW";
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        return "BLUE";
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        return "GREEN";
 +
    else return "NONE"
 +
};
 +
function switchMessage(color, textInside, refresh) {
 +
    var entirebox = document.getElementById("slideoutco");
 +
 +
    if (refresh)
 +
    {$(entirebox).fadeOut(100);
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        $("#slidecontenttext").removeClass("alert-danger");
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        $("#slidecontenttext").removeClass("alert-warning");
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        $("#slidecontenttext").removeClass("alert-info");
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        $("#slidecontenttext").removeClass("alert-success");
 +
    if (color == "RED")
 +
        $("#slidecontenttext").addClass("alert-danger");
 +
    if (color == "YELLOW")
 +
        $("#slidecontenttext").addClass("alert-warning");
 +
    if (color == "BLUE")
 +
        $("#slidecontenttext").addClass("alert-info");
 +
    if (color == "GREEN")
 +
        $("#slidecontenttext").addClass("alert-success");
 +
   
 +
   
 +
    $("#slidecontenttext").html(textInside);
 +
    $(entirebox).fadeIn(500);
 +
    }
 +
   
 +
};
 +
 +
 +
</script>
 +
 +
 +
 +
 +
 +
 +
<canvas id="canvas-container" style = "z-index:-1" hidden></canvas>
 +
<script type="text/javascript" src='https://2015.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript' hidden></script/>
 +
 +
 +
 +
<script type="text/javascript">
 +
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
 +
var acc = document.getElementsByClassName("accordion");
 +
var i;
 +
 +
for (i = 0; i < acc.length; i++) {
 +
    acc[i].onclick = function(){
 +
        this.classList.toggle("active");
 +
        this.nextElementSibling.classList.toggle("show");
 +
    }
 +
}
 +
</script>
 +
 +
<script type="text/javascript">
 +
$("#category_navbar a").on('click', function(event) {
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 +
      // Store hash0
 +
      var hash = this.hash;
 +
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 800, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    }  // End if
 +
  });
 +
 +
 +
</script>
 +
 +
<div id="slideout">
 +
    <div id="slidecontent">
 +
        <h3>Prevention</h3>
 +
        <h5>GSR Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
 +
            <div class="slider round bluecolorbutton"></div>
 +
        </label>
 +
<br>
 +
 +
        <h3>Treatment</h3>
 +
        <h5>25HC Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
 +
            <div class="slider round redcolorbutton"></div>
 +
        </label>
 +
        <h4><b> LOCS: <span id="LOCS">0 &#160;</span></b> &#160; &#160; <a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-md">?</button> </a>
 +
 +
    </div>
 +
    <div id="clickme">
 +
    <h2 class="vertical-text" style="Lato" !important>
 +
            <br> Eyedrops
 +
    </h2>
 +
        <br><br><br>
 +
       
 +
    </div>
 
</div>
 
</div>
 +
 +
<div id="slideoutco">
 +
    <div id="slidecontentco">
 +
        <div id="slidecontenttext" class="alert alert-danger">
 +
            <p style="font-size:14px !important"> <a href="#" class="close" data-dismiss="alert">&times;</a>
 +
                <strong>Zoom out to see animation.</strong> &#160; &#160; &#160; &#160; &#160;<a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-sm">?</button> </a><span style="font-size:14px"><br>Your screen resolution is too low unless you zoom out </span></p>
 +
           
 +
        </div>
 +
    </div>
 +
</div>
 +
 +
<javascript>
 +
   
 +
</javascript>
 +
 +
<style type='text/css'>
 +
 +
#slideout {
 +
    background: #FFD700;
 +
    position: fixed;
 +
    height: 300px;
 +
    width: 200px;
 +
    top: 30%;
 +
    right:-150px;
 +
    padding-left: 60px;
 +
    z-index:30;
 +
    border-radius: 25px;
 +
 +
 +
}
 +
   
 +
#slideoutco {
 +
    position: fixed;
 +
    height: 200px;
 +
    width: 300px;
 +
    top: 78%;
 +
    right:1%;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    border-radius: 10px;
 +
    z-index:30;
 +
}
 +
   
 +
#clickme {
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
    height: 300px;
 +
    width: 50px;
 +
    background: #FFBA49;
 +
    z-index:30;
 +
    border-radius: 25px 5px 5px 25px;
 +
}
 +
 +
#slidecontent {
 +
    float:left;
 +
}
 +
   
 +
#slidecontentco {
 +
    float:left;
 +
}
 +
 +
.vertical-text {
 +
transform: rotate(90deg);
 +
transform-origin: left bottom 0;
 +
  float: left;
 +
}
 +
/* The switch - the box around the slider */
 +
.switch {
 +
  position: relative;
 +
  display: inline-block;
 +
  width: 60px;
 +
  height: 34px;
 +
}
 +
 +
/* Hide default HTML checkbox */
 +
.switch input {display:none;}
 +
 +
/* The slider */
 +
.slider {
 +
  position: absolute;
 +
  cursor: pointer;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background-color: #ccc;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
 +
 +
 +
.slider:before {
 +
  position: absolute;
 +
  content: "";
 +
  height: 26px;
 +
  width: 26px;
 +
  left: 4px;
 +
  bottom: 4px;
 +
  background-color: white;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
 +
 +
input:checked + .slider.bluecolorbutton {
 +
  background-color: #2196F3;
 +
}
 +
 +
input:focus + .slider.bluecolorbutton {
 +
  box-shadow: 0 0 1px #2196F3;
 +
}
 +
 +
input:checked + .slider.redcolorbutton {
 +
  background-color: #FF0000;
 +
}
 +
 +
input:focus + .slider.redcolorbutton {
 +
  box-shadow: 0 0 1px #FF0000;
 +
}
 +
 +
 +
 +
input:checked + .slider:before {
 +
  -webkit-transform: translateX(26px);
 +
  -ms-transform: translateX(26px);
 +
  transform: translateX(26px);
 +
}
 +
 +
/* Rounded sliders */
 +
.slider.round {
 +
  border-radius: 34px;
 +
}
 +
 +
.slider.round:before {
 +
  border-radius: 50%;
 +
}
 +
input[type=text] {
 +
    width: 100%;
 +
    padding: 12px 20px;
 +
    margin: 8px 0;
 +
    box-sizing: border-box;
 +
    border: 3px solid #ccc;
 +
    -webkit-transition: 0.5s;
 +
    transition: 0.5s;
 +
    outline: none;
 +
}
 +
input[type=text]:focus {
 +
    border: 3px solid #555;
 +
}
 +
</style>
 +
<script>
 +
$(function () {
 +
    var rightVal = -150;
 +
   
 +
        $("#clickme").click(function () {
 +
       
 +
        rightVal = (rightVal * -1) - 150;
 +
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
 +
    });
 +
   
 +
});
 +
 +
 +
 +
</script>
 +
 +
 +
</body>
 +
 
</html>
 
</html>

Latest revision as of 10:46, 19 October 2016

Notebook - TAS Taipei iGEM Wiki




C◎UNTERACTS

Notebook

Below are links to pdfs of our experimental notebook.







Prevention

GSR Eyedrop

Treatment

25HC Eyedrop

LOCS: 0      


Eyedrops




× Zoom out to see animation.          
Your screen resolution is too low unless you zoom out