Difference between revisions of "Team:Freiburg/testpage"

 
(181 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Freiburg/CSS}}
 
{{Freiburg/CSS}}
−
 
+
{{Freiburg/Menubar}}
−
<!--doctype html-->
+
−
<html>
+
−
    <head>
+
−
        <title>""</title>
+
−
        <meta charset="utf-8">
+
−
 
+
−
        <style>
+
−
/* ============= BEGIN: Stylesheet for navigation menu ============= */
+
−
 
+
−
/*Stylesheet for Navigation Bar*/
+
−
 
+
−
/* Begin General Settings */
+
−
body {
+
−
    margin: 0px;
+
−
}
+
−
 
+
−
#header {
+
−
    height: 113px;
+
−
    background-color: #FCFCFC;
+
−
    z-index: 600;
+
−
}
+
−
/* End General Settings */
+
−
 
+
−
 
+
−
#naviconwrapper {
+
−
    margin: 0px ;    /*auto centers wrapper*/
+
−
    height: 60px;
+
−
    width: 100%;
+
−
    min-width: 900px;
+
−
    padding-top: 16px;
+
−
    z-index: -100;
+
−
}
+
−
 
+
−
#naviconbar {
+
−
    margin: 0px auto;
+
−
    padding: 0px;
+
−
    width: 100%;
+
−
    min-width: 900px;
+
−
    background-color: #0051A2;
+
−
    border-top-color: #FFF;
+
−
    border-top-width: 1px;
+
−
    border-top-style: inset;
+
−
    border-bottom-color: #FFF;
+
−
    border-bottom-width: 1px;
+
−
    border-bottom-style: outset;
+
−
    z-index: -60;
+
−
}
+
−
   
+
−
 
+
−
/*Begin Settings Main Menu Icons*/
+
−
#navicons {
+
−
    margin: 0px auto;
+
−
    padding: 0px;
+
−
    width: 720px;
+
−
    height: 60px;
+
−
    background-color: #0051A2;
+
−
    z-index: -20;    /*defines color behind icons */
+
−
}
+
−
 
+
−
#navicons ul {
+
−
    margin: 0px auto;
+
−
    padding: 0px;
+
−
    width: 720px;
+
−
    position: relative;  /*makes chip go directly behind home from left corner*/
+
−
}
+
−
 
+
−
#navicons ul li {
+
−
    margin: 0px;
+
−
    padding: 0px;
+
−
    list-style: none;
+
−
    /*display: block;*/
+
−
    float: left;
+
−
    position: relative;
+
−
    line-height: 106px;
+
−
    font-family: sans-serif;
+
−
    font-size: 12px;
+
−
    background-color: #FFF;
+
−
    /*border: 1px solid #5781BD;*/
+
−
    z-index: 100;
+
−
}
+
−
 
+
−
#navicons ul li a {
+
−
    height: 60px;
+
−
    width: 120px;
+
−
    display: block;
+
−
    text-decoration: none;
+
−
    /*color: #FFF;*/
+
−
    text-align: center;
+
−
    text-transform: uppercase;
+
−
    z-index: 50;
+
−
}
+
−
 
+
−
#navicons ul a:hover {
+
−
}   
+
−
/*End Settings Main Menu Icons*/
+
−
 
+
−
 
+
−
/* classes for icons */
+
−
#home {
+
−
    background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;
+
−
    height: 60px;;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#home a {
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#project {
+
−
    background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;
+
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#project a {
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#team {
+
−
    background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;
+
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#team a {
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#results {
+
−
    background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;
+
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#results a {
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#policy {
+
−
    background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
+
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#policy a {
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#notebook {
+
−
    background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;
+
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
−
 
+
−
#notebook a {
+
−
    color: #FFF;
+
−
}
+
−
/* End classes for icons */
+
−
 
+
−
 
+
−
/*Begin running chip */
+
−
/*Begin Chip Design*/
+
−
#runningchip {
+
−
    position: absolute;
+
−
    width: 90px;
+
−
    height: 60px;
+
−
    top: -15px;
+
−
    left: 2.1%;
+
−
    -webkit-transition: all 300ms ease-out;
+
−
    -moz-transition: all 300ms ease-out;
+
−
    transition: all 300ms ease-out;
+
−
    z-index: 0;
+
−
}
+
−
 
+
−
#runningchip-back{ 
+
−
  width:100%;
+
−
  height: 85px;
+
−
  position: absolute;
+
−
  background:#C5162F;
+
−
  border-radius:5px;
+
−
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
+
−
  border-top: 2px solid rgba(255,255,255,0.1);
+
−
  border-color: #0051A2;
+
−
}   
+
−
 
+
−
#top-arrow{  /* arrow like element above slider  */
+
−
  position:absolute;
+
−
  overflow:hidden;
+
−
    color: #C5162F;
+
−
  width:100%;
+
−
  height:14px;
+
−
  top: 2px;
+
−
  left:0;
+
−
  z-index:2;
+
−
    background-color: #C5162F;
+
−
    border-top-right-radius: 5px;
+
−
    border-top-left-radius: 5px;
+
−
}
+
−
 
+
−
#top-arrow:before{
+
−
  content:"";
+
−
  position:absolute;
+
−
  width:80%;
+
−
  height:10px;
+
−
  top:-12px;
+
−
  left:10%;
+
−
  border-radius:20%;
+
−
  box-shadow:0 0 10px black;
+
−
}
+
−
 
+
−
#top-arrow:after{    /* little blue arrow */
+
−
  content:"";
+
−
  position:absolute;
+
−
  width:0;
+
−
  height:0px;
+
−
  top:0px;
+
−
  border-top:8px solid #C5162F;
+
−
  border-left:6px solid transparent;
+
−
  border-right:6px solid transparent;
+
−
  margin-left:-6px;
+
−
  left:50%;
+
−
}
+
−
 
+
−
#bottom-arrow{        /* arrow like element beneath slider */
+
−
  position:absolute;
+
−
  overflow:hidden;
+
−
  width:100%;
+
−
  height:15px;
+
−
  bottom: -30px;
+
−
  left:0;
+
−
  z-index:2;
+
−
    background-color: #C5162F;
+
−
    border-bottom-right-radius: 5px;
+
−
    border-bottom-left-radius: 5px;
+
−
}
+
−
 
+
−
#bottom-arrow:before{
+
−
  content:"";
+
−
  position:absolute;
+
−
  width:80%;
+
−
  height:10px;
+
−
  bottom:-12px;
+
−
  left:10%;
+
−
  border-radius:20%;
+
−
  box-shadow:0 0 10px black;
+
−
}
+
−
 
+
−
#bottom-arrow:after{
+
−
  content:"";
+
−
  position:absolute;
+
−
  width:0;
+
−
  height:0;
+
−
  bottom:0;
+
−
  border-bottom:12px solid #C5162F;
+
−
  border-left:8px solid transparent;
+
−
  border-right:8px solid transparent;
+
−
  margin-left:-8px;
+
−
  left:50%;
+
−
}
+
−
/*End Chip Design*/
+
−
 
+
−
 
+
−
/*Begin Chip Movement*/
+
−
#home:hover ~ #runningchip {
+
−
    left: 2.1%;
+
−
}
+
−
 
+
−
#project:hover ~ #runningchip {
+
−
    left: 18.6%;
+
−
}
+
−
 
+
−
#team:hover ~ #runningchip {
+
−
    left: 35.5%;
+
−
}
+
−
 
+
−
#results:hover ~ #runningchip {
+
−
    left: 52%;
+
−
}
+
−
 
+
−
#policy:hover ~ #runningchip {
+
−
    left: 68.9%;
+
−
}
+
−
 
+
−
#notebook:hover ~ #runningchip {
+
−
    left: 85.5%;
+
−
}
+
−
/*End Chip Movment*/
+
−
/*End running chip*/
+
−
 
+
−
 
+
−
/*Begin Settings Submenu Level 1*/
+
−
#navtextwrapper {                /*define background box*/
+
−
    margin: 0 auto;
+
−
    padding: 0px;
+
−
    top: -2px;
+
−
    height: 24px;
+
−
    width: 920px;
+
−
    position: relative;
+
−
    /*border: 2px solid #000;*/
+
−
}
+
−
 
+
−
#navtext {
+
−
    text-align: center;
+
−
    font-family: Roboto,sans-serif;
+
−
    font-size: 16px;
+
−
    z-index: 600;
+
−
}
+
−
 
+
−
#navtext ul {
+
−
    margin: 0px auto;
+
−
    top: -8px;
+
−
    padding: 0px;
+
−
    position: absolute;
+
−
    z-index: 600;
+
−
}
+
−
 
+
−
#navtext li {
+
−
    margin: 0px auto;        /*centers text*/
+
−
    list-style: none;
+
−
    display: block;        /*makes items go horizontal and centers them*/
+
−
    /*float: left;*/                /*makes items go horizontal*/
+
−
    position: relative;
+
−
    z-index: 600;
+
−
}   
+
−
 
+
−
#navtext ul li a {
+
−
    margin-top: 2px;
+
−
    height: 24px;
+
−
    padding-left: 10px;
+
−
    padding-right: 10px;
+
−
    text-decoration: none;
+
−
    color: #FFF;
+
−
    display: block;
+
−
    text-align: center;
+
−
    border-radius: 8px;
+
−
    z-index: 600;
+
−
}
+
−
 
+
−
#navtext ul li:hover > a {
+
−
  /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
−
    color: #ecdc18;
+
−
}
+
−
 
+
−
#project-sub {
+
−
    display: none;
+
−
    left: 22.6%;
+
−
}
+
−
 
+
−
#team-sub {
+
−
    /*background-color: #ac34fe;*/
+
−
    display: none;
+
−
    left: 35.2%;
+
−
}
+
−
 
+
−
#results-sub{
+
−
    display: none;
+
−
    left: 50.1%;
+
−
}
+
−
 
+
−
#policy-sub{
+
−
    display: none;
+
−
    left: 62.8%;
+
−
}
+
−
 
+
−
#notebook-sub{
+
−
    display: none;
+
−
    left: 77.6%;
+
−
}
+
−
 
+
−
.chip_gap {
+
−
    content: none;
+
−
}
+
−
 
+
−
.navsub1 {
+
−
    background-color: #0051A2;
+
−
}
+
−
   
+
−
/*End Settings Submenu Level 1*/
+
−
 
+
−
/* ============= BEGIN: Stylesheet for navigation menu ============= */ 
+
−
    </style>
+
−
 
+
−
 
+
−
<!------------- BEGIN: jQuery ------------->
+
−
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
−
        <script type="text/javascript">
+
−
            $(function() {
+
−
                $("document").ready(function(){
+
−
 
+
−
$(function() {
+
−
            $(window).scroll(function (event) {
+
−
  // var top = $('#menubar').offset().top - parseFloat($('#menubar').css('marginTop').replace(/auto/, 100));
+
−
  var y = $(this).scrollTop();
+
−
  // console.log(y);
+
−
 
+
−
 
+
−
 
+
−
                        if(y>61){
+
−
 
+
−
                            $('#navtextwrapper').css('display', 'block');
+
−
  $('#navtextwrapper').css('z-index', '9999');
+
−
  $('#navtextwrapper').css('width', '100%');
+
−
$('#navtextwrapper').css('background', '#0051A2');
+
−
$('#navtextwrapper').css('height', '30');
+
−
 
+
−
  $('#navtextwrapper').css('top', y);
+
−
 
+
−
 
+
−
+
−
                            $('#navicons ul li').css('z-index', '10000');
+
−
  $('#navicons ul li').css('top', y-60);
+
−
 
+
−
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  } else{
+
−
                            $('#navtextwrapper').css('display', 'none');
+
−
  $('#navtextwrapper').css('top', 80);
+
−
  $('#navtextwrapper').css('width', '100%');
+
−
  $('#navtextwrapper').css('background', '#0051A2');
+
−
  $('#navtextwrapper').css('position', 'absolute');
+
−
+
−
  $('#navicons ul li').css('top', 0);
+
−
 
+
−
  }
+
−
 
+
−
  });
+
−
 
+
−
 
+
−
// make submenus appear //
+
−
                    $("#home").hover(function(){
+
−
                        $("#team-sub") .hide();
+
−
                        $("#project-sub") .hide();
+
−
                        $("#results-sub") .hide();
+
−
                        $("#policy-sub") .hide();
+
−
                        $("#notebook-sub") .hide();
+
−
                    });
+
−
                    $("#project").hover(function(){
+
−
                        $("#project-sub") .show();
+
−
                        $("#team-sub") .hide();
+
−
                        $("#results-sub") .hide();
+
−
                        $("#policy-sub") .hide();
+
−
                        $("#notebook-sub") .hide();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#project-sub") .hide();
+
−
                    });
+
−
                   
+
−
                    $("#team").hover(function(){
+
−
                        $("#team-sub") .show();
+
−
                        $("#project-sub") .hide();
+
−
                        $("#results-sub") .hide();
+
−
                        $("#policy-sub") .hide();
+
−
                        $("#notebook-sub") .hide();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#team-sub") .hide();
+
−
                    });
+
−
                   
+
−
                    $("#results").hover(function(){
+
−
                        $("#results-sub") .show();
+
−
                        $("#project-sub") .hide();
+
−
                        $("#team-sub") .hide();
+
−
                        $("#policy-sub") .hide();
+
−
                        $("#notebook-sub") .hide();
+
−
                    });
+
−
                   
+
−
                    $("#policy").hover(function(){
+
−
                        $("#policy-sub") .show();
+
−
                        $("#project-sub") .hide();
+
−
                        $("#team-sub") .hide();
+
−
                        $("#results-sub") .hide();
+
−
                        $("#notebook-sub") .hide();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#policy-sub") .hide();
+
−
                    });
+
−
                   
+
−
                    $("#notebook").hover(function(){
+
−
                        $("#notebook-sub") .show();
+
−
                        $("#project-sub") .hide();
+
−
                        $("#team-sub") .hide();
+
−
                        $("#results-sub") .hide();
+
−
                        $("#policy-sub") .hide();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#notebook-sub") .hide();
+
−
                    });
+
−
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
+
−
                    $("#project-sub") .hover(function(){
+
−
                        $("#runningchip") .css('left','18.6%');
+
−
                        $("#project-sub") .show();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#runningchip") .css('left','');
+
−
                        $("#project-sub") .hide();
+
−
                    });
+
−
                    $("#team-sub") .hover(function(){
+
−
                        $("#runningchip") .css('left','35.5%');
+
−
                        $("#team-sub") .show();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#runningchip") .css('left','');
+
−
                        $("#team-sub") .hide();
+
−
                    });
+
−
                    $("#results-sub") .hover(function(){
+
−
                        $("#runningchip") .css('left','52%');
+
−
                        $("#results-sub") .show();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#runningchip") .css('left','');
+
−
                        $("#results-sub") .hide();
+
−
                    });
+
−
                    $("#policy-sub") .hover(function(){
+
−
                        $("#runningchip") .css('left','68.9%');
+
−
                        $("#policy-sub") .show();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#runningchip") .css('left','');
+
−
                        $("#policy-sub") .hide();
+
−
                    });
+
−
                    $("#notebook-sub") .hover(function(){
+
−
                        $("#runningchip") .css('left','85.5%');
+
−
                        $("#notebook-sub") .show();
+
−
                    },
+
−
                                            function(){
+
−
                        $("#runningchip") .css('left','');
+
−
                        $("#notebook-sub") .hide();
+
−
                    });
+
−
                });
+
−
            })
+
−
        </script>
+
−
 
+
−
<!------------- END: jQuery ------------->
+
−
 
+
−
    </head>
+
−
 
+
−
 
+
−
<!------------- BEGIN: Body content =------------->
+
−
    <body>
+
−
      <div id="header">
+
−
<!-- Begin navigation menu icons -->
+
−
            <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
+
−
                <div id="naviconbar">
+
−
                <div id="navicons"> <!-- only icons -->
+
−
                    <ul>
+
−
                        <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
+
−
                        </li>
+
−
                        <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
+
−
                        </li>
+
−
                        <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
+
−
                        </li>
+
−
                        <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
+
−
                        </li>
+
−
                        <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
+
−
                        </li>
+
−
                        <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
+
−
                        </li>
+
−
                    <div id="runningchip">
+
−
                                <div id="top-arrow"></div>
+
−
                                <div id="runningchip-back"></div>
+
−
                                <div id="bottom-arrow"></div>
+
−
                    </div>
+
−
                    </ul>
+
−
                </div>
+
−
                </div>
+
−
            </div>
+
−
<!-- End navigation menu icons -->
+
−
 
+
−
           
+
−
<!-- Begin navigation submenu -->
+
−
            <div id="navtextwrapper"> <!-- only names of elements -->
+
−
                <div id="navtext">
+
−
                    <ul id="project-sub">
+
−
                        <li class="chip_gap"><a></a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Overview</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Diagnostics">Diagnostics today</a></li>
+
−
                        <li><a class="navsub1" href="#">Techniques</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diseases">Diseases</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Future</a></li>
+
−
                    </ul>
+
−
                    <ul id="team-sub">
+
−
                        <li class="chip_gap"><a></a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
+
−
                        <li><a class="navsub1" href="#">Partners</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
+
−
                    </ul>
+
−
                    <ul id="results-sub">
+
−
                        <li class="chip_gap"><a></a></li>
+
−
                        <li><a class="navsub1" href="#">The DiaCHIP</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Modeling">Modeling</a></li>
+
−
                        <li><a class="navsub1" href="#">Own Device</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">Biobricks</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
+
−
                    </ul>
+
−
                    <ul id="policy-sub">
+
−
                        <li class="chip_gap"><a></a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/ScienceFair">Science Fair</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/TheatreProject">Theater Project</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Practices/Survey">Public Opinion</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/LAS">College</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Practices/Ethics">Ethics</a></li>
+
−
                    </ul>
+
−
                    <ul id="notebook-sub">
+
−
                        <li class="chip_gap"><a></a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournal</a>
+
−
                        </li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
+
−
                        <!--<li><a class="navsub1" href="">Materials</a></li>-->
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
+
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
+
−
                            </ul>
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div> 
+
−
<!-- End of navigation submenu -->
+
−
        </div>
+
−
 
+
−
<!-- End of header -->   
+
−
 
+
−
    </body>
+
−
</html>
+
−
 
+
−
 
+
−
 
+
−
<!-- //////////////////////////////MENUBAR///////////////////////////////////////// -->
+
−
 
+
−
</html>
+
  
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
−
 
 
<style>
 
<style>
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
−
#project {
+
#results {
−
     background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
+
     background: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_icon_results_active_yellow.png) no-repeat;
 
}
 
}
  
−
#project a {
+
#results a {
 
     color: #ecdc18;
 
     color: #ecdc18;
 
}
 
}
  
 
#runningchip {
 
#runningchip {
−
     left: 18.6%;
+
     left: 52%;
 
}
 
}
 
/*========= END: style for navigation bar ==========*/
 
/*========= END: style for navigation bar ==========*/
  
−
 
+
.responsive_center_image{
−
/*  STYLE FOR LIGHTBULB-SLIDER */
+
    text-align: center;
−
 
+
   }
−
#lightbulb{
+
.responsive_center_image img{
−
  position: absolute;
+
    max-width: 100%;
−
   -webkit-transform: scale(0.5);
+
    height: auto;
−
  transform: scale(0.5);
+
    width: auto\9; /* ie8 */
−
  top: 230px;
+
−
  left: -55px;
+
−
  z-index: 200;
+
 
}
 
}
  
−
#red,
+
</style>
−
#redsmall,
+
−
#blue,
+
−
#green{
+
−
  position: absolute;
+
−
  bottom: -500px;
+
−
}
+
  
−
#red{
+
<div class="content_box">
−
  top: 25px;
+
<h2> Modeling</h2>
−
  left:120px;
+
−
  position: absolute;
+
−
}
+
  
−
#blue{
 
−
  bottom: 160px;
 
−
  left: 25px;
 
−
  position: absolute;
 
−
}
 
  
−
#redsmall{
+
<div class="highlightBox">
−
  bottom: 115px;
+
<h4>Note</h4>
−
  left: 110px;
+
−
  position: absolute;
+
−
}
+
  
−
#green{
+
</div>
−
  top: 10px;
+
<!-- begin formula -->
−
  left: 10px;
+
<div class="responsive_center_image">
−
  position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/c/c8/Freiburg_MOD_01_PDE.png" width="600">
−
}
+
</div>
 +
<!-- end formula -->
  
−
#red_on{
+
<!-- begin formula -->
−
  top: 25px;
+
<div class="responsive_center_image">
−
  left:120px;
+
<img src="https://static.igem.org/mediawiki/2015/1/12/Freiburg_MOD_02_Diffterm.png" width="500">
−
  position: absolute;
+
</div>
−
  display: none;
+
<!-- end formula -->
−
}
+
  
−
#blue_on{
+
<!-- begin formula -->
−
  bottom: 160px;
+
<div class="responsive_center_image">
−
  left: 25px;
+
<img src="https://static.igem.org/mediawiki/2015/d/dd/Freiburg_MOD_03_Convterm.png" width="350">
−
  position: absolute;
+
</div>
−
  display: none;
+
<!-- end formula -->
−
}
+
  
−
#redsmall_on{
+
<!-- begin formula -->
−
  bottom: 115px;
+
<div class="responsive_center_image">
−
  left: 110px;
+
<img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_MOD_04_Velocity.png" width="500">
−
  position: absolute;
+
</div>
−
  display: none;
+
<!-- end formula -->
−
}
+
  
−
#green_on{
+
<!-- begin formula -->
−
  top: 10px;
+
<div class="responsive_center_image">
−
  left: 10px;
+
<img src="https://static.igem.org/mediawiki/2015/c/c1/Freiburg_MOD_05_General_Production.png" width="500">
−
  position: absolute;
+
</div>
−
  display: none;
+
<!-- end formula -->
−
}
+
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/5/53/Freiburg_MOD_06_Taylor.png" width="600">
 +
</div>
 +
<!-- end formula -->
  
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/9/9e/Freiburg_MOD_07_Crank_Nicholson.png" width="600">
 +
</div>
 +
<!-- end formula -->
  
−
#slider {
+
<!-- begin formula -->
−
  background: #f9f9f9;
+
<div class="responsive_center_image">
−
  height: 500px;
+
<img src="https://static.igem.org/mediawiki/2015/3/37/Freiburg_MOD_08_DXDZ.png" width="150">
−
  width: 900px;
+
</div>
−
  overflow: visible;
+
<!-- end formula -->
−
  position: relative;
+
−
}
+
  
−
/* hides everything outside the slider box */
+
<!-- begin formula -->
−
#mask {
+
<div class="responsive_center_image">
−
  overflow: hidden;
+
<img src="https://static.igem.org/mediawiki/2015/9/94/Freiburg_MOD_09_Disc.png" width="600">
−
  height: 500px;
+
</div>
−
}
+
<!-- end formula -->
  
−
/* initialize position for positioning slides outside the slider */
+
<!-- begin formula -->
−
#slider ul {
+
<div class="responsive_center_image">
−
  margin: 0;
+
<img src="https://static.igem.org/mediawiki/2015/4/48/Freiburg_MOD_10_Diff_Expan.png" width="700">
−
  padding: 0;
+
</div>
−
  position: relative;
+
<!-- end formula -->
−
}
+
  
−
/* define image properties and position them outside the slider mask */
+
<!-- begin formula -->
−
#slider li {
+
<div class="responsive_center_image">
−
  width: 900px;  /* Width slide */
+
<img src="https://static.igem.org/mediawiki/2015/4/48/Freiburg_MOD_11_Lambda_Mu.png" width="300">
−
  height: 500px; /* Height slide */
+
</div>
−
  position: absolute;
+
<!-- end formula -->
−
  right: 0; /* Original Position - Outside of the Slider */
+
−
  list-style: none;
+
−
}
+
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/c/c8/Freiburg_MOD_12_CN_Scheme.png" width="700">
 +
</div>
 +
<!-- end formula -->
  
−
#first,
+
<!-- begin formula -->
−
#second,
+
<div class="responsive_center_image">
−
#third,
+
<img src="https://static.igem.org/mediawiki/2015/9/90/Freiburg_MOD_13_Conc_Vec.png" width="700">
−
#fourth{
+
</div>
−
  left: -1000px;
+
<!-- end formula -->
−
  -ms-transition: tranform 1s ease;
+
−
  -webkit-transition: transform 1s ease;
+
−
  transition: transform 1s ease;
+
−
  font-size: 100%;
+
−
}
+
  
−
#first{left: 0;}
+
<!-- begin formula -->
−
#third{z-index : -100;}
+
<div class="responsive_center_image">
−
#fourth{z-index: -100; left: 1000px;}
+
<img src="https://static.igem.org/mediawiki/2015/7/75/Freiburg_MOD_14_Prot_F.png" width="600">
−
#green{display: none;}
+
</div>
−
#green_on{display: inline}
+
<!-- end formula -->
  
−
.container{
+
<!-- begin formula -->
−
    position: relative;
+
<div class="responsive_center_image">
−
    height: 500px;
+
<img src="https://static.igem.org/mediawiki/2015/5/52/Freiburg_MOD_15_F_Vec.png" width="500">
−
    margin: 3% 0;
+
</div>
−
    width: 1000px;
+
<!-- end formula -->
−
}
+
  
−
#buttonleft {
+
<!-- begin formula -->
−
  z-index: 200;
+
<div class="responsive_center_image">
−
  position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_MOD_16_Spot_Split.png" width="250">
−
  top: 190px;
+
</div>
−
  left: 0;
+
<!-- end formula -->
−
}
+
  
−
#buttonright{
+
<!-- begin formula -->
−
  z-index: 200;
+
<div class="responsive_center_image">
−
  position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/d/de/Freiburg_MOD_17_CN_System.png" width="300">
−
  right: 0;
+
</div>
−
  top: 190px;
+
<!-- end formula -->
−
}
+
  
−
#buttonleft img,
+
<!-- begin formula -->
−
#buttonright img{
+
<div class="responsive_center_image">
−
  width: 50px;
+
<img src="https://static.igem.org/mediawiki/2015/b/bc/Freiburg_MOD_18_Math_Sys.png" width="600">
−
}
+
</div>
 +
<!-- end formula -->
  
−
#content-slider{
+
<!-- begin formula -->
−
  position: absolute;
+
<div class="responsive_center_image">
−
  top:0;
+
<img src="https://static.igem.org/mediawiki/2015/7/73/Freiburg_MOD_19_Boundary.png" width="400">
−
  left:50px
+
</div>
−
}
+
<!-- end formula -->
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
#buttonright:hover,
+
<!-- begin formula -->
−
#buttonleft:hover{
+
<div class="responsive_center_image">
−
  cursor: pointer;
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
  cursor: hand;
+
</div>
−
}
+
<!-- end formula -->
  
−
.container{
+
<!-- begin formula -->
−
  position: relative;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
.artboard{
+
<!-- begin formula -->
−
    box-sizing: border-box;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
.sliderimage{
+
<!-- begin formula -->
−
  float: right;
+
<div class="responsive_center_image">
−
  margin: 3% 75px 3% 25px;
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
  width: 350px
+
</div>
−
}
+
<!-- end formula -->
  
−
.slidertext{
+
<!-- begin formula -->
−
  margin: 3% 25px 0 75px;
+
<div class="responsive_center_image">
−
  width: 350px;
+
<img src="https://static.igem.org/mediawiki/2015/1/1d/Freiburg_MOD_21_MatrixA.png" width="800">
−
  text-align: justify;
+
</div>
−
  line-height: 1;
+
<!-- end formula -->
−
  float: left;
+
−
}
+
  
−
.slidertext h1{
+
<!-- begin formula -->
−
  text-align: left;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/0/0c/Freiburg_MOD_22_MatrixB.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
.slidertext p{
+
<!-- begin formula -->
−
margin-bottom: 0;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/2/2b/Freiburg_MOD_23_Prod_Curve.png" width="400">
 +
</div>
 +
<!-- end formula -->
  
−
.slidertext.indent{
 
−
  margin-left: 15%;
 
−
  margin-top: 0;
 
−
  width: 290px;
 
−
}
 
  
−
.dummy-image{
+
<!-- begin formula -->
−
  background-color: black;
+
<div class="responsive_center_image">
−
  height: 400px;
+
<img src="https://static.igem.org/mediawiki/2015/0/0d/Freiburg_MOD_24_Corner_Boundaries.png" width="800">
−
  width: 350px;
+
</div>
−
}
+
<!-- end formula -->
  
−
</style>
 
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/7/70/Freiburg_MOD_25_Diff_Simp.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
<html>
 
  
−
<script>
+
<!-- begin formula -->
−
$(document).ready(function(){
+
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/3/39/Freiburg_MOD_26_F_Vec.png" width="700">
 +
</div>
 +
<!-- end formula -->
  
−
    var distance = 2;
 
−
    // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
 
−
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
 
−
    $("#buttonleft").bind("click", moveleft);
 
−
function moveleft(e) {
 
−
// unbind the button //
 
−
$("#buttonleft").unbind();
 
−
console.log("Click "+distance);
 
  
−
if (distance == 1) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#second').css({"z-index": "100"});
 
−
    $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#redsmall').css({"display": "inline"});
 
−
    $('#green').css({"display": "none"});
 
−
    $('#redsmall_on').css({"display": "none"});
 
−
    $('#green_on').css({"display": "inline"});
 
−
    distance = 2;
 
−
}
 
  
−
else if (distance ==2) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
<img src="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_modeling_matrix.png" width="400">
−
    $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
</div>
−
    $('#third').css({"z-index": "100"});
+
<!-- end formula -->
−
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
−
    $('#green').css({"display": "inline"});
+
−
    $('#red').css({"display": "none"});
+
−
    $('#green_on').css({"display": "none"});
+
−
    $('#red_on').css({"display": "inline"});
+
−
    distance = 3;
+
−
}
+
  
−
else if (distance ==3) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
 
−
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
 
−
    $('#fourth').css({"z-index": "100"});
 
−
    $('#red').css({"display": "inline"});
 
−
    $('#blue').css({"display": "none"});
 
−
    $('#red_on').css({"display": "none"});
 
−
    $('#blue_on').css({"display": "inline"});
 
−
    distance = 4;
 
−
}
 
  
−
else if (distance ==4) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"z-index": "100"});
 
−
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
 
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
−
    $('#blue').css({"display": "inline"});
 
−
    $('#redsmall').css({"display": "none"});
 
−
    $('#blue_on').css({"display": "none"});
 
−
    $('#redsmall_on').css({"display": "inline"});
 
−
    distance = 1;
 
−
}
 
  
−
// see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
+
<!-- begin video -->
−
// wait until css-animation has finished. time is specified in css-transition property //
+
−
setTimeout(function(){
+
−
$("#buttonleft").bind("click", moveleft);
+
−
}, 1000);
+
−
}
+
  
 +
<div class="image_box right">
 +
      <div class="thumbinner"style="width:700px;">
 +
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 +
        <video poster="https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Diffusion_1_preview.jpg" width="700" height="350" controls>
 +
          <source src="https://static.igem.org/mediawiki/2015/5/5a/Freiburg_Diffusion_1_720p.mp4" type="video/mp4">
 +
          Your browser does not support the HTML5 video tag.
 +
        </video>
 +
        <div class="thumbcaption">Video 1: Demonstration of the diffusion model. 
 +
        </div>
 +
      </div>
 +
    </div>
  
−
    $("#buttonright").bind("click", moveright);
+
<!-- end video -->
−
function moveright(e) {
+
  
−
$("#buttonright").unbind();
 
−
console.log("Click "+distance);
 
  
−
if (distance == 1) {
+
<div class="image_box right">
−
$('#first').css({"z-index": "-100"});
+
        <div class="thumb2 trien" style="width:376px">
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
            <div class="thumbinner">
−
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
                <a href="https://static.igem.org/mediawiki/2015/b/bc/Freiburg_MOD_IM_01_Simplification.png" class="lightbox_trigger">
−
    $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
                    <img src="https://static.igem.org/mediawiki/2015/6/63/Freiburg_MOD_IM_01_Simplification_preview.png" width="376">
−
    $('#redsmall').css({"display": "inline"});
+
                </a>
−
    $('#blue').css({"display": "none"});
+
                <div class="thumbcaption">
−
    $('#redsmall_on').css({"display": "none"});
+
                    <p>
−
    $('#blue_on').css({"display": "inline"});
+
                        <strong>Figure:  
−
    distance = 4;
+
                    </p>
−
}
+
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
  
−
else if (distance ==2) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
−
    $('#second').css({"z-index": "-100"});
 
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
 
−
    $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
−
    $('#green').css({"display": "inline"});
 
−
    $('#redsmall').css({"display": "none"});
 
−
    $('#green_on').css({"display": "none"});
 
−
    $('#redsmall_on').css({"display": "inline"});
 
−
    distance = 1;
 
−
}
 
−
 
−
else if (distance ==3) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"z-index": "100","transform": "translateX(0px)", "-webkit-transform": "translateX(0px)", "-ms-transform": "translateX(0px)"});
 
−
    $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#third').css({"z-index": "-100"});
 
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#red').css({"display": "inline"});
 
−
    $('#green').css({"display": "none"});
 
−
    $('#red_on').css({"display": "none"});
 
−
    $('#green_on').css({"display": "inline"});
 
−
    distance = 2;
 
−
}
 
−
 
−
else if (distance ==4) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
 
−
    $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
 
−
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#fourth').css({"z-index": "-100"});
 
−
    $('#blue').css({"display": "inline"});
 
−
    $('#red').css({"display": "none"});
 
−
    $('#blue_on').css({"display": "none"});
 
−
    $('#red_on').css({"display": "inline"});
 
−
    distance = 3;
 
−
}
 
−
 
−
setTimeout(function(){
 
−
$("#buttonright").bind("click", moveright);
 
−
}, 1000);
 
−
}
 
−
});
 
−
</script>
 
−
 
−
 
−
 
−
<div class="container">
 
−
<div id="buttonright">
 
−
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
 
−
</div>
 
−
<div id="buttonleft">
 
−
<img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
 
−
</div>
 
−
<div id="lightbulb">
 
−
<div id="main">
 
−
<img src="https://static.igem.org/mediawiki/2015/3/31/Freiburg_lightbulb_slider_03.png">
 
−
</div>
 
−
<div id="red">
 
−
<img src="https://static.igem.org/mediawiki/2015/4/40/Freiburg_lightbulb_slider_09.png">
 
−
</div>
 
−
<div id="green">
 
−
<img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_lightbulb_slider_08.png">
 
−
</div>
 
−
<div id="blue">
 
−
<img src="https://static.igem.org/mediawiki/2015/a/a7/Freiburg_lightbulb_slider_07.png">
 
−
</div>
 
−
<div id="redsmall">
 
−
<img src="https://static.igem.org/mediawiki/2015/c/ce/Freiburg_lightbulb_slider_06.png">
 
−
</div>
 
−
<div id="red_on">
 
−
<img src="https://static.igem.org/mediawiki/2015/2/2a/Freiburg_lightbulb_slider_09_yellow.png">
 
−
</div>
 
−
<div id="green_on">
 
−
<img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_lightbulb_slider_08_yellow.png">
 
−
</div>
 
−
<div id="blue_on">
 
−
<img src="https://static.igem.org/mediawiki/2015/6/6b/Freiburg_lightbulb_slider_07_yellow.png">
 
−
</div>
 
−
<div id="redsmall_on">
 
−
<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_lightbulb_slider_06_yellow.png">
 
−
</div>
 
−
</div>
 
−
  <div id="content-slider">
 
−
      <div id="slider">  <!-- Slider container -->
 
−
        <div id="mask">  <!-- Mask -->
 
−
        <ul>
 
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Building our own device</h1>
 
−
        <p>The original measuring device we were using in collaboration with AG Roth is a really expensive machine based on rather simple physics. Therefore, we decided to build our own device in a cost-efficient variant. We performed reliable measurements with it and provide a building plan making label-free proteinarray analysis available for every future iGEM team. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
 
−
        </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="second" class="secondanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Communicating science</h1>
 
−
        <p>Fast and reliable disease diagnostic is a problem of public interest. For this reason we wanted to know what people think about the idea of the DiaCHIP. Although the DiaCHIP is concerned to synthetic biology, which makes people feel rather uncomfortable according to a survey by Leopoldina (national academy of science), we obtained a lot of positive feedback. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="third" class="thirdanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Modeling cellfree expression</h1>
 
−
        <p>In order to optimize the DiaCHIP for future applications, we modelled the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="fourth" class="fourthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most notable results we obtained was the detection of anti-tetanus antibodies in human blood serum. Using the DiaCHIP, we were able to distinguish serum samples of a person taken before vaccination and three weeks later. As expected, antibody binding events were shown after vaccination, whereas there was no signal before. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
    </ul>
 
−
        </div>  <!-- End Mask -->
 
−
      </div>  <!-- End Slider Container -->
 
−
  </div>
 
−
</div>
 
−
 
−
 
−
 
−
<div class="content_box">
 
−
<!-- Labjournal content goes in here -->
 
−
 
−
 
−
<h1 class="sectionedit1">Project overview: The DiaCHIP</h1>
 
−
<div class="level1">
 
−
<div class="image_box left">
 
−
<img align="left" alt="light bulb sketch" src="https://static.igem.org/mediawiki/2015/2/23/Freiburg_light_bulb_sketch.png" width="100px">
 
−
</div>
 
−
<p>
 
−
<!--korrigiert von Philipp05/09/15-->
 
−
The DiaCHIP is an innovative tool to simultaneously  differentially detect antibodies present in blood sera that correspond to infectious diseases. It may greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination status. Essential for our project idea is the combination of on-demand protein synthesis directly in the diagnostic device, that is using a novel and label-free detection system, so simple that it can easily be rebuild and utilized by future iGEM teams.
 
−
</p>
 
−
</div>
 
−
<!-- EDIT1 SECTION "Project overview: The DiaCHIP" [1-351] -->
 
−
<div class="floatbox left">
 
−
<h2 class="sectionedit2">Preparing the DiaCHIP</h2>
 
−
<div class="level2">
 
−
<p>
 
−
<!--korrigiert von Philipp05/09/15-->
 
−
As the DiaCHIP relies on antibody-antigen interactions, the antigens first have to be synthesized and immobilized inside the device. Given that the whole device is a microfluidic system, it was most convenient to do this directly in the flow-chamber, where detection will finally take place.
 
−
The flow-chamber consists of two glass surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules, which code for the respective antigens. By flushing a cell-free expression mix into the chamber, the respective antigens are transcribed and translated on-demand. Proteins then diffuse until reaching the second surface that specifically captures the proteins encoded by the immobilized DNA. After several washing steps to remove remaining expression-mix the flow-chamber is coated with the immobilized antigens and ready for detection.
 
−
</p>
 
−
</div>
 
−
</div>
 
−
<!-- EDIT2 SECTION "Preparing the DiaCHIP" [352-1230] -->
 
−
<div class="floatbox right">
 
−
<h2 class="sectionedit3">Measuring</h2>
 
−
<div class="level2">
 
−
<p>
 
−
<!--korrigiert von Philipp05/09/15-->
 
−
With the iRIf (Abkürzung) system it is possible to record small changes in layer thickness. The binding of an antibody, present in the blood serum flushed through the chamber, to the according antigen increases the local thickness of the protein surface so that interaction events can be measured label-free and in real-time via the change of the optical properties at this spot.
 
−
</p>
 
−
<p>
 
−
But we didn't stop thinking about the device: <a href="https://2015.igem.org/Team:Freiburg/Results">We detected antibodies in our own blood!</a>
 
−
</p>
 
−
</div>
 
−
<div class="tags"><span>
 
−
<a class="wikilink1" href="/igem2015/doku.php?id=tag:info&amp;do=showtag&amp;tag=info" rel="tag" title="tag:info">info</a>
 
−
</span></div>
 
−
</div>
 
−
<!-- EDIT3 SECTION "Measuring" [1231-] -->
 
−
</div>
 
  
  
  
 
</html>
 
</html>
−
<!-- Labjournal content ends here -->
 
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Latest revision as of 01:37, 19 September 2015

""

Modeling

Note

Video 1: Demonstration of the diffusion model.

Figure: