Difference between revisions of "Team:Freiburg/Testpage"

Line 1: Line 1:
−
  {{Freiburg/CSS}}
+
{{Freiburg/CSS}}
−
  {{Freiburg/Menubar}}
+
{{Freiburg/Menubar}}
  
−
  {{Freiburg/wiki_content_start}}
+
{{Freiburg/wiki_content_start}}
−
  <html>
+
<html>
  
−
  <style>
+
<style>
  
−
  /*========= BEGIN: style for navigation bar ==========*/
+
/*========= BEGIN: style for navigation bar ==========*/
−
  #project {
+
#project {
−
      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/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
−
  }
+
}
  
−
  #project a {
+
#project a {
−
      color: #ecdc18;
+
    color: #ecdc18;
−
  }
+
}
  
−
  #runningchip {
+
#runningchip {
−
      left: 18.6%;
+
    left: 18.6%;
−
  }
+
}
−
  /*========= END: style for navigation bar ==========*/
+
/*========= END: style for navigation bar ==========*/
  
  
−
  /*========= BEGIN: Linkbutton in slider ============*/
+
/*========= BEGIN: Linkbutton in slider ============*/
−
  .intro_button a:hover {
+
.intro_button a:hover {
−
      text-decoration: underline;
+
    text-decoration: underline;
−
  }
+
}
  
−
  .intro_button a {  
+
.intro_button a {  
−
      color: #FFF;
+
    color: #FFF;
−
  }
+
}
  
−
  .intro_button {
+
.intro_button {
−
      margin: 0px auto;
+
    margin: 0px auto;
−
      padding: 2px 5px 5px 10px;
+
    padding: 2px 5px 5px 10px;
−
      width: 180px;
+
    width: 180px;
−
      line-height: 16px;
+
    line-height: 16px;
−
      text-align: center;
+
    text-align: center;
−
      /*background-color: #326aab;*/
+
    /*background-color: #326aab;*/
−
      background-color: #0051A2;
+
    background-color: #0051A2;
−
      font-size: 14pt;
+
    font-size: 14pt;
−
      border-radius: 8px;
+
    border-radius: 8px;
−
      /*box-shadow: 1px -1px 1px 0px #888;*/
+
    /*box-shadow: 1px -1px 1px 0px #888;*/
−
      /*border: 1px solid #F9F9F9;*/
+
    /*border: 1px solid #F9F9F9;*/
−
      color: #FFF;
+
    color: #FFF;
−
  }
+
}
  
−
  .menu-arrow{
+
.menu-arrow{
−
  background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
+
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
−
  background-repeat: no-repeat;
+
background-repeat: no-repeat;
−
  background-position: 5% 50%;
+
background-position: 5% 50%;
−
  background-size: 10px 13px;
+
background-size: 10px 13px;
−
  }
+
}
−
  /*========= END: Linkbutton in slider ============*/
+
/*========= END: Linkbutton in slider ============*/
  
  
−
  @media screen and (min-width: 1000px){
+
@media screen and (min-width: 1000px){
  
−
  /* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
  
−
  #slider {
+
#slider {
−
    height: 500px;
+
  height: 500px;
−
    width: 910px;
+
  width: 910px;
−
    overflow: visible;
+
  overflow: visible;
−
    position: relative;
+
  position: relative;
−
  }
+
}
  
−
  /* hides everything outside the slider box */
+
/* hides everything outside the slider box */
−
  #mask {
+
#mask {
−
    overflow: hidden;
+
  overflow: hidden;
−
    height: 500px;
+
  height: 500px;
−
  }
+
}
  
−
  /* initialize position for positioning slides outside the slider */
+
/* initialize position for positioning slides outside the slider */
−
  #slider ul {
+
#slider ul {
−
    margin: 0;
+
  margin: 0;
−
    padding: 0;
+
  padding: 0;
−
    position: relative;
+
  position: relative;
−
  }
+
}
  
−
  /* define image properties and position them outside the slider mask */
+
/* define image properties and position them outside the slider mask */
−
  #slider li {
+
#slider li {
−
    width: 900px;  /* Width slide */
+
  width: 900px;  /* Width slide */
−
    height: 500px; /* Height slide */
+
  height: 500px; /* Height slide */
−
    position: absolute;
+
  position: absolute;
−
    right: 0; /* Original Position - Outside of the Slider */
+
  right: 0; /* Original Position - Outside of the Slider */
−
    list-style: none;
+
  list-style: none;
−
  }
+
}
  
  
−
  #first,
+
#first,
−
  #second,
+
#second,
−
  #third,
+
#third,
−
  #fourth,
+
#fourth,
−
  #fifth,
+
#fifth,
−
  #sixth,
+
#sixth,
−
  #seventh,
+
#seventh,
−
  #eightth {
+
#eightth {
−
    left: -1000px;
+
  left: -1000px;
−
    -ms-transition: tranform 1s ease;
+
  -ms-transition: tranform 1s ease;
−
    -webkit-transition: transform 1s ease;
+
  -webkit-transition: transform 1s ease;
−
    transition: transform 1s ease;
+
  transition: transform 1s ease;
−
    font-size: 100%;
+
  font-size: 100%;
−
  }
+
}
  
−
  #first{left: 0;}
+
#first{left: 0;}
−
  #third{z-index : -100;}
+
#third{z-index : -100;}
−
  #sixth{z-index: -100;}
+
#sixth{z-index: -100;}
−
  #fifth{z-index: -100;}
+
#fifth{z-index: -100;}
−
  #fourth{z-index: -100}
+
#fourth{z-index: -100}
−
  #seventh{z-index: -100;}
+
#seventh{z-index: -100;}
−
  #eightth{z-index: -100; left: 1000px}
+
#eightth{z-index: -100; left: 1000px}
  
−
  .container{
+
.container{
−
      position: relative;
+
    position: relative;
−
      height: 500px;
+
    height: 500px;
−
      margin: 3% auto;
+
    margin: 3% auto;
−
      width: 1000px;
+
    width: 1000px;
−
  }
+
}
  
−
  #buttonleft {
+
#buttonleft {
−
    z-index: 200;
+
  z-index: 200;
−
    position: absolute;
+
  position: absolute;
−
    top: 190px;
+
  top: 190px;
−
    left: 0;
+
  left: 0;
−
  }
+
}
  
−
  #buttonright{
+
#buttonright{
−
    z-index: 200;
+
  z-index: 200;
−
    position: absolute;
+
  position: absolute;
−
    right: 0;
+
  right: 0;
−
    top: 190px;
+
  top: 190px;
−
  }
+
}
  
−
  #buttonleft img,
+
#buttonleft img,
−
  #buttonright img{
+
#buttonright img{
−
    width: 50px;
+
  width: 50px;
−
  }
+
}
  
−
  #content-slider{
+
#content-slider{
−
    position: absolute;
+
  position: absolute;
−
    top:0;
+
  top:0;
−
    left:50px
+
  left:50px
−
  }
+
}
  
  
−
  #buttonright:hover,
+
#buttonright:hover,
−
  #buttonleft:hover{
+
#buttonleft:hover{
−
    cursor: pointer;
+
  cursor: pointer;
−
    cursor: hand;
+
  cursor: hand;
−
  }
+
}
  
−
  .artboard{
+
.artboard{
−
      box-sizing: border-box;
+
    box-sizing: border-box;
−
      height: 470px;
+
    height: 470px;
−
      border-radius: 60px;
+
    border-radius: 60px;
−
      background-color: #FCFCFC;
+
    background-color: #FCFCFC;
−
    box-shadow: 1px 1px 10px rgb(136, 136, 136);
+
  box-shadow: 1px 1px 10px rgb(136, 136, 136);
−
    margin: 5px;
+
  margin: 5px;
−
    border: 2px solid rgb(0, 81, 162);
+
  border: 2px solid rgb(0, 81, 162);
−
  }
+
}
  
−
  .slidertext p{
+
.slidertext p{
−
    margin-bottom: 0;
+
  margin-bottom: 0;
−
  }
+
}
  
−
  .slidertext.indent{
+
.slidertext.indent{
−
    clear: both;
+
  clear: both;
−
    margin-left: 15%;
+
  margin-left: 15%;
−
    margin-top: 0;
+
  margin-top: 0;
−
    width: 290px;
+
  width: 290px;
−
  }
+
}
  
−
  .dummy-image{
+
.dummy-image{
−
    background-color: black;
+
  background-color: black;
−
    height: 400px;
+
  height: 400px;
−
    width: 350px;
+
  width: 350px;
−
  }
+
}
  
−
  } /* end of media query */
+
} /* end of media query */
  
−
  .sliderimage{
+
.sliderimage{
−
    float: right;
+
  float: right;
−
    margin: 3% 70px 3% 25px;
+
  margin: 3% 70px 3% 25px;
−
    width: 350px
+
  width: 350px
−
  }
+
}
  
−
  .slidertext{
+
.slidertext{
−
    margin: 3% 25px 0 65px;
+
  margin: 3% 25px 0 65px;
−
    width: 350px;
+
  width: 350px;
−
    text-align: justify;
+
  text-align: justify;
−
    line-height: 1;
+
  line-height: 1;
−
    float: left;
+
  float: left;
−
  }
+
}
  
−
  /* ============= BEGIN: Styling for tree-like structure =============== */
+
/* ============= BEGIN: Styling for tree-like structure =============== */
  
−
  .floatcontainer{
+
.floatcontainer{
−
    float: left;
+
  float: left;
−
  }
+
}
  
−
  .container{
+
.container{
−
    clear: both;
+
  clear: both;
−
  }
+
}
  
−
  .transparent_container{
+
.transparent_container{
−
    overflow: hidden
+
  overflow: hidden
−
  }
+
}
  
−
  #content_box1{
+
#content_box1{
−
    margin-left: 15%;
+
  margin-left: 15%;
−
  }
+
}
  
−
  #content_box2{
+
#content_box2{
−
    margin-right: 15%
+
  margin-right: 15%
−
  }
+
}
  
−
  #content_box3{
+
#content_box3{
−
    margin-left: 15%;
+
  margin-left: 15%;
−
  }
+
}
  
−
  #leftimage img{
+
#leftimage img{
−
    width: 450px;
+
  width: 450px;
−
  }
+
}
  
−
  /* ============= BEGIN: Styling for tree-like structure =============== */
+
/* ============= BEGIN: Styling for tree-like structure =============== */
  
−
  </style>
+
</style>
  
  
−
  <script>
+
<script>
−
  $(document).ready(function(){
+
$(document).ready(function(){
  
−
      var distance = 2;
+
    var distance = 2;
−
      // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
+
    // 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 //
+
    // 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);
+
    $("#buttonleft").bind("click", moveleft);
−
    function moveleft(e) {
+
  function moveleft(e) {
−
      // unbind the button //
+
    // unbind the button //
−
      $("#buttonleft").unbind();
+
    $("#buttonleft").unbind();
−
      console.log("Click "+distance);
+
    console.log("Click "+distance);
  
−
      if (distance == 1) {
+
    if (distance == 1) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
      $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
−
          $('#second').css({"z-index": "100"}); /* begin second */
+
        $('#second').css({"z-index": "100"}); /* begin second */
−
          $('#third').css({});
+
        $('#third').css({});
−
          $('#fourth').css({});
+
        $('#fourth').css({});
−
          $('#fifth').css({});
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
+
        $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
−
          $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
−
          distance = 2;
+
        distance = 2;
−
      }
+
    }
  
−
      else if (distance ==2) {
+
    else if (distance ==2) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
+
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
−
          $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 second */
+
        $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 second */
−
          $('#third').css({"z-index": "100"}); /* begin third */
+
        $('#third').css({"z-index": "100"}); /* begin third */
−
          $('#fourth').css({});
+
        $('#fourth').css({});
−
          $('#fifth').css({});
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
+
        $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
−
          distance = 3;
+
        distance = 3;
−
      }
+
    }
  
−
      else if (distance ==3) {
+
    else if (distance ==3) {
−
        console.log("Distance: "+distance);
+
      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)"}); /* 4 first */
+
      $('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 4 first */
−
          $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
+
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
−
          $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
+
        $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
−
          $('#fourth').css({"z-index": "100"}); /* begin fourth */
+
        $('#fourth').css({"z-index": "100"}); /* begin fourth */
−
          $('#fifth').css({});
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 4;
+
        distance = 4;
−
      }
+
    }
  
−
      else if (distance ==4) {
+
    else if (distance ==4) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
+
        $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
−
          $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
−
          $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
        $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
−
          $('#fifth').css({"z-index": "100"}); /* begin fifth */
+
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 5;
+
        distance = 5;
−
      }
+
    }
  
−
      else if (distance ==5) {
+
    else if (distance ==5) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({});
−
          $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
+
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
−
          $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
−
          $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
+
        $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
−
          $('#sixth').css({"z-index": "100"}); /* begin sixth */
+
        $('#sixth').css({"z-index": "100"}); /* begin sixth */
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 6;
+
        distance = 6;
−
      }
+
    }
  
−
      else if (distance == 6) {
+
    else if (distance == 6) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({});
−
          $('#third').css({});
+
        $('#third').css({});
−
          $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
+
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
−
          $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */  
+
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */  
−
          $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
+
        $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
−
          $('#seventh').css({"z-index": "100"}); /* begin seventh */
+
        $('#seventh').css({"z-index": "100"}); /* begin seventh */
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 7;
+
        distance = 7;
−
      }
+
    }
  
−
      else if (distance == 7) {
+
    else if (distance == 7) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({});
−
          $('#third').css({});
+
        $('#third').css({});
−
          $('#fourth').css({});
+
        $('#fourth').css({});
−
          $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
+
        $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
−
          $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
+
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
−
          $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
+
        $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
−
          $('#eightth').css({"z-index": "100"}); /* begin eightth */
+
        $('#eightth').css({"z-index": "100"}); /* begin eightth */
−
          distance = 8;
+
        distance = 8;
−
      }
+
    }
−
 
+
−
      else if (distance == 8) {
+
−
        console.log("Distance: "+distance);
+
−
        $('#first').css({"z-index": "100"}); /* begin first */
+
−
          $('#second').css({});
+
−
          $('#third').css({});
+
−
          $('#fourth').css({});
+
−
          $('#fifth').css({});
+
−
          $('#sixth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 sixth */
+
−
          $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 seventh */
+
−
          $('#eightth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 2 eightth */
+
−
          distance = 1;
+
−
      }
+
  
−
       // see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
+
    else if (distance == 8) {
−
      // wait until css-animation has finished. time is specified in css-transition property //
+
       console.log("Distance: "+distance);
−
      setTimeout(function(){
+
      $('#first').css({"z-index": "100"}); /* begin first */
−
         $("#buttonleft").bind("click", moveleft);
+
        $('#second').css({});
−
      }, 1000);
+
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 sixth */
 +
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 seventh */
 +
         $('#eightth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 2 eightth */
 +
        distance = 1;
 
     }
 
     }
  
 +
    // see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
 +
    // wait until css-animation has finished. time is specified in css-transition property //
 +
    setTimeout(function(){
 +
      $("#buttonleft").bind("click", moveleft);
 +
    }, 1000);
 +
  }
  
−
      $("#buttonright").bind("click", moveright);
 
−
    function moveright(e) {
 
  
−
      $("#buttonright").unbind();
+
    $("#buttonright").bind("click", moveright);
−
      console.log("Click "+distance);
+
  function moveright(e) {
  
−
      if (distance == 1) {
+
    $("#buttonright").unbind();
−
        $('#first').css({"z-index": "-100"}); /* 1 second */
+
    console.log("Click "+distance);
−
          $('#second').css({});
+
−
          $('#third').css({});
+
−
          $('#fourth').css({});
+
−
          $('#fifth').css({});
+
−
          $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
+
−
          $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
+
−
          $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
+
−
          distance = 8;
+
−
      }
+
  
−
      else if (distance ==2) {
+
    if (distance == 1) {
−
        console.log("Distance: "+distance);
+
      $('#first').css({"z-index": "-100"}); /* 1 second */
−
        $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
+
        $('#second').css({});  
−
          $('#second').css({"z-index": "-100"}); /* 2 second */
+
        $('#third').css({});
−
          $('#third').css({});
+
        $('#fourth').css({});
−
          $('#fourth').css({});
+
        $('#fifth').css({});
−
          $('#fifth').css({});
+
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
−
          $('#sixth').css({});
+
        $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
−
          $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
+
        $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
−
          $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
+
        distance = 8;
−
          distance = 1;
+
    }
−
      }
+
  
−
      else if (distance ==3) {
+
    else if (distance ==2) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({"z-index": "100","transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 1 fourth */
+
      $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
−
          $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
        $('#second').css({"z-index": "-100"}); /* 2 second */
−
          $('#third').css({"z-index": "-100"}); /* 3 second */
+
        $('#third').css({});
−
          $('#fourth').css({});
+
        $('#fourth').css({});
−
          $('#fifth').css({});
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
−
          $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
+
        $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
−
          distance = 2;
+
        distance = 1;
−
      }
+
    }
  
−
      else if (distance ==4) {
+
    else if (distance ==3) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
+
      $('#first').css({"z-index": "100","transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 1 fourth */
−
          $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
        $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
−
          $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
+
        $('#third').css({"z-index": "-100"}); /* 3 second */
−
          $('#fourth').css({"z-index": "-100"}); /* 4 second*/
+
        $('#fourth').css({});
−
          $('#fifth').css({});
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
−
          distance = 3;
+
        distance = 2;
−
      }
+
    }
  
−
      else if (distance ==5) {
+
    else if (distance ==4) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
−
          $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
+
        $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
−
          $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
+
        $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
−
          $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
+
        $('#fourth').css({"z-index": "-100"}); /* 4 second*/
−
          $('#fifth').css({"z-index": "-100"}); /* 5 second */
+
        $('#fifth').css({});
−
          $('#sixth').css({});
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 4;
+
        distance = 3;
−
      }
+
    }
  
−
      else if (distance == 6) {
+
    else if (distance ==5) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
−
          $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
        $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
−
          $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
+
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
−
          $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
+
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
−
          $('#sixth').css({"z-index": "-100"}); /* 6 second */
+
        $('#sixth').css({});
−
          $('#seventh').css({});
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 5;
+
        distance = 4;
−
      }
+
    }
  
−
      else if (distance == 7) {
+
    else if (distance == 6) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({});
−
          $('#third').css({});
+
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
−
          $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
+
        $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
−
          $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
+
        $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
−
          $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
+
        $('#sixth').css({"z-index": "-100"}); /* 6 second */
−
          $('#seventh').css({"z-index": "-100"}); /* 7 second */
+
        $('#seventh').css({});
−
          $('#eightth').css({});
+
        $('#eightth').css({});
−
          distance = 6;
+
        distance = 5;
−
      }
+
    }
  
−
      else if (distance == 8) {
+
    else if (distance == 7) {
−
        console.log("Distance: "+distance);
+
      console.log("Distance: "+distance);
−
        $('#first').css({});
+
      $('#first').css({});
−
          $('#second').css({});
+
        $('#second').css({});
−
          $('#third').css({});
+
        $('#third').css({});
−
          $('#fourth').css({});
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
−
          $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
+
        $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
−
          $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
+
        $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
−
          $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
+
        $('#seventh').css({"z-index": "-100"}); /* 7 second */
−
          $('#eightth').css({"z-index": "-100"}); /* 8 second */
+
        $('#eightth').css({});
−
          distance = 7;
+
        distance = 6;
−
      }
+
    }
  
−
       setTimeout(function(){
+
    else if (distance == 8) {
−
         $("#buttonright").bind("click", moveright);
+
       console.log("Distance: "+distance);
−
      }, 1000);
+
      $('#first').css({});
 +
         $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
 +
        $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
 +
        $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
 +
        $('#eightth').css({"z-index": "-100"}); /* 8 second */
 +
        distance = 7;
 
     }
 
     }
−
  });
 
−
  </script>
 
  
−
   <!-- BEGIN Responsive Layout -->
+
    setTimeout(function(){
 +
      $("#buttonright").bind("click", moveright);
 +
    }, 1000);
 +
   }
 +
});
 +
</script>
  
−
  <style type="text/css">
+
<!-- BEGIN Responsive Layout -->
  
−
  @media screen and (max-width: 1000px){
+
<style type="text/css">
−
    #leftimage{
+
−
      display: none;
+
−
    }
+
  
−
    #buttonleft,
+
@media screen and (max-width: 1000px){
−
    #buttonright{
+
  #leftimage{
−
      display: none;
+
    display: none;
−
    }
+
  }
  
−
    .slidertext,
+
  #buttonleft,
−
    .sliderimage{
+
  #buttonright{
−
      width: 46%;
+
    display: none;
−
      margin: auto 2% auto 2%;
+
−
    }
+
 
   }
 
   }
  
−
   </style>
+
   .slidertext,
 +
  .sliderimage{
 +
    width: 46%;
 +
    margin: auto 2% auto 2%;
 +
  }
 +
}
  
−
  <script type="text/javascript">
+
</style>
  
−
  $(document).ready(changesliderclass);
+
<script type="text/javascript">
−
  $(window).resize(changesliderclass);
+
  
−
  function changesliderclass() {
+
$(document).ready(changesliderclass);
−
    if ($(window).width() < 1000) {
+
$(window).resize(changesliderclass);
−
      console.log('changesliderclass');
+
 
−
      $('#first').attr('class', 'content_box');
+
function changesliderclass() {
−
      $('#second').attr('class', 'content_box');
+
  if ($(window).width() < 1000) {
−
      $('#third').attr('class', 'content_box');
+
    console.log('changesliderclass');
−
      $('#fourth').attr('class', 'content_box');
+
    $('#first').attr('class', 'content_box');
−
      $('#fifth').attr('class', 'content_box');
+
    $('#second').attr('class', 'content_box');
−
      $('#sixth').attr('class', 'content_box');
+
    $('#third').attr('class', 'content_box');
−
      $('#seventh').attr('class', 'content_box');
+
    $('#fourth').attr('class', 'content_box');
−
      $('#eightth').attr('class', 'content_box');
+
    $('#fifth').attr('class', 'content_box');
−
    }
+
    $('#sixth').attr('class', 'content_box');
 +
    $('#seventh').attr('class', 'content_box');
 +
    $('#eightth').attr('class', 'content_box');
 
   }
 
   }
 +
}
  
−
  </script>
+
</script>
  
  
−
  <div class="todo_box">
+
<div class="todo_box">
−
  expand text s.t. it leads to system overview <br>
+
expand text s.t. it leads to system overview <br>
−
  write appropriate content for slider: should present main subpoints of project in short sentence and link to them
+
write appropriate content for slider: should present main subpoints of project in short sentence and link to them
−
  </div>
+
</div>
  
−
  <div class="header_box">     
+
<div class="header_box">     
−
  <h1>The DiaCHIP - A Versatile Detection System</h1>
+
<h1>The DiaCHIP - A Versatile Detection System</h1>
−
  </div>
+
</div>
  
−
  <div class="float_barrier"></div>
+
<div class="float_barrier"></div>
  
−
  <div class="floatcontainer">
+
<div class="floatcontainer">
  
−
  <div id='leftimage'>
+
<div id='leftimage'>
−
    <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
+
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
−
  </div>
+
</div>
  
−
  <div class="transparent_container">
+
<div class="transparent_container">
−
  <div id="content_box1" class="content_box">
+
<div id="content_box1" class="content_box">
−
  <h2>Project Motivation</h2>
+
<h2>Project Motivation</h2>
−
  <p>
+
<p>
−
      Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?  
+
    Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?  
−
  </p>
+
</p>
−
  </div>
+
</div>
−
  </div>
+
</div>
  
  
−
  <div class="transparent_container">
+
<div class="transparent_container">
−
  <div id="content_box2" class="content_box">
+
<div id="content_box2" class="content_box">
−
  <h2>Detecting Antigen-Antibody Interactions</h2>
+
<h2>Detecting Antigen-Antibody Interactions</h2>
−
  <p>
+
<p>
−
  The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in  <a href="https://2015.igem.org/Team:Freiburg/Design" title="diagnostics_today">modern diagnostics</a>. <br>
+
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in  <a href="https://2015.igem.org/Team:Freiburg/Design" title="diagnostics_today">modern diagnostics</a>. <br>
−
  Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives.   
+
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives.   
−
  </p>
+
</p>
−
  </div>
+
</div>
−
  </div>
+
</div>
  
−
  <div class="transparent_container">
+
<div class="transparent_container">
−
  <div id="content_box3" class="content_box">
+
<div id="content_box3" class="content_box">
−
  <h2>The Concept</h2>
+
<h2>The Concept</h2>
−
  <p>
+
<p>
−
    The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM Teams.
+
  The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM Teams.
−
  </p>
+
</p>
−
  </div>
+
</div>
−
  </div>
+
</div>
  
−
  </div>
+
</div>
  
−
  <div class="float_barrier"></div>
+
<div class="float_barrier"></div>
  
  
  
−
  <!---------------BEGIN SLIDER------------------>
+
<!---------------BEGIN SLIDER------------------>
−
  <div class="container">
+
<div class="container">
−
    <div id="buttonright">
+
  <div id="buttonright">
−
      <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
    <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
−
    </div>
+
  </div>
−
    <div id="buttonleft">
+
  <div id="buttonleft">
−
      <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
    <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
−
    </div>
+
  </div>
−
    <div id="content-slider">
+
  <div id="content-slider">
−
        <div id="slider">  <!-- Slider container -->
+
      <div id="slider">  <!-- Slider container -->
−
          <div id="mask">  <!-- Mask -->
+
        <div id="mask">  <!-- Mask -->
−
            <ul>
+
          <ul>
  
−
              <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
+
            <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">
+
              <div class="slidertext">
−
                  <h1>The DiaCHIP - System Overview</h1>
+
                <h1>The DiaCHIP - System Overview</h1>
−
                  <p>The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.</p>
+
                <p>The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.</p>
−
                  <p style="margin-top:30px">
+
                <p style="margin-top:30px">
−
                <div class="intro_button menu-arrow">           
+
              <div class="intro_button menu-arrow">           
−
                  <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
−
                </div>
+
              </div>
−
                  </p>
+
                </p>
  
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
  
−
              <li id="second" class="secondanimation">
+
            <li id="second" class="secondanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">
+
              <div class="slidertext">
−
                  <h1>(2)Communicating science</h1>
+
                <h1>(2)Communicating science</h1>
−
                  <p>Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic term for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received a lot of positive feedback. </p>
+
                <p>Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic term for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received a lot of positive feedback. </p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices">more</a>?</p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices">more</a>?</p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="third" class="thirdanimation">
+
            <li id="third" class="thirdanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(3)Modeling cell-free expression</h1>
+
                <h1>(3)Modeling cell-free expression</h1>
−
                  <p>In order to optimize the DiaCHIP for future applications, we optimized 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 on the protein array and identified the factors limiting cell-free expression in the DiaCHIP. </p>
+
                <p>In order to optimize the DiaCHIP for future applications, we optimized 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 on the protein array and identified the factors limiting cell-free expression in the DiaCHIP. </p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more</a>? </p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more</a>? </p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="fourth" class="fourthanimation">
+
            <li id="fourth" class="fourthanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(4)Measuring our blood</h1>
+
                <h1>(4)Measuring our blood</h1>
−
                  <p>One of the most promising results was obtained from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from a team member before and after vaccination. Samples taken two weeks after vaccination produced higher signals, compared to those prior to antigen exposure.</p>
+
                <p>One of the most promising results was obtained from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from a team member before and after vaccination. Samples taken two weeks after vaccination produced higher signals, compared to those prior to antigen exposure.</p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more</a>?</p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more</a>?</p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="fifth" class="fifthanimation">
+
            <li id="fifth" class="fifthanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(5)DNA Engineering</h1>
+
                <h1>(5)DNA Engineering</h1>
−
                  <p>Genetic fusion of different antigens and tags is a really basic requirement of our project. To enable many people to work on our DNA constructs in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
+
                <p>Genetic fusion of different antigens and tags is a really basic requirement of our project. To enable many people to work on our DNA constructs in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
−
                                  <br>
+
                                <br>
−
  Read more about how we combined different cloning methods to reduce our efforts in <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" class="wikilink1">DNA Engineering.</a>
+
Read more about how we combined different cloning methods to reduce our efforts in <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" class="wikilink1">DNA Engineering.</a>
−
                                  </p>
+
                                </p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="sixth" class="sixthanimation">
+
            <li id="sixth" class="sixthanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(6)Protein purification</h1>
+
                <h1>(6)Protein purification</h1>
−
                  <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
+
                <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
−
  <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Read more</a> about the overexpression and purification of several antigenic peptides.   
+
<a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Read more</a> about the overexpression and purification of several antigenic peptides.   
−
  </p>
+
</p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="seventh" class="seventhanimation">
+
            <li id="seventh" class="seventhanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(7)Surface chemistry</h1>
+
                <h1>(7)Surface chemistry</h1>
−
                  <p>The production of a protein microarray in the DiaCHIP is based on specific immobilization of antigenic peptides on a glass slide. Therefore, we optimized a protocol for a specific surface chemistry until the proportion of unspecific binding of non-target proteins was reduced to a minimum.<br>
+
                <p>The production of a protein microarray in the DiaCHIP is based on specific immobilization of antigenic peptides on a glass slide. Therefore, we optimized a protocol for a specific surface chemistry until the proportion of unspecific binding of non-target proteins was reduced to a minimum.<br>
−
  <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Read more</a> about the different systems we tested on our way to high specificity.
+
<a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Read more</a> about the different systems we tested on our way to high specificity.
−
  </p>
+
</p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
              <li id="eightth" class="eightthanimation">
+
            <li id="eightth" class="eightthanimation">
−
                <div class="artboard">
+
              <div class="artboard">
−
                <div class="sliderimage">
+
              <div class="sliderimage">
−
                  <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
                <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
−
                </div>
+
              </div>
−
                <div class="slidertext">  
+
              <div class="slidertext">  
−
                  <h1>(8)Optical detection</h1>
+
                <h1>(8)Optical detection</h1>
−
                  <p>One disadvantage of currently available diagnostic test is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. <br>
+
                <p>One disadvantage of currently available diagnostic test is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. <br>
−
  <a class=”wikilink1” href=”https://2015.igem.org/Team:Freiburg/Project/iRIf>Read more</a> about this innovative tool and the physics behind it.
+
<a class=”wikilink1” href=”https://2015.igem.org/Team:Freiburg/Project/iRIf>Read more</a> about this innovative tool and the physics behind it.
−
  </p>
+
</p>
−
                </div>
+
              </div>
−
                <div class="slidertext indent">
+
              <div class="slidertext indent">
−
                  <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
−
                </div>
+
              </div>
−
                </div>
+
              </div>
−
              </li>
+
            </li>
−
          </ul>
+
        </ul>
−
          </div>  <!-- End Mask -->
+
        </div>  <!-- End Mask -->
−
        </div>  <!-- End Slider Container -->
+
      </div>  <!-- End Slider Container -->
−
    </div>
+
  </div>
−
  </div>
+
</div>
  
−
  </html>
+
</html>
−
  <!-- Labjournal content ends here -->
+
<!-- Labjournal content ends here -->
−
  {{Freiburg/wiki_content_end}}
+
{{Freiburg/wiki_content_end}}

Revision as of 17:42, 17 September 2015

""

expand text s.t. it leads to system overview
write appropriate content for slider: should present main subpoints of project in short sentence and link to them

The DiaCHIP - A Versatile Detection System

DiaCHIP_Sabi

Project Motivation

Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?

Detecting Antigen-Antibody Interactions

The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in modern diagnostics.
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives.

The Concept

The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM Teams.

  • The DiaCHIP - System Overview

    The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.

    Step by Step Overview

  • (2)Communicating science

    Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic term for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received a lot of positive feedback.

    Want to read more?

  • (3)Modeling cell-free expression

    In order to optimize the DiaCHIP for future applications, we optimized 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 on the protein array and identified the factors limiting cell-free expression in the DiaCHIP.

    Want to read more?

  • (4)Measuring our blood

    One of the most promising results was obtained from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from a team member before and after vaccination. Samples taken two weeks after vaccination produced higher signals, compared to those prior to antigen exposure.

    Want to read more?

  • (5)DNA Engineering

    Genetic fusion of different antigens and tags is a really basic requirement of our project. To enable many people to work on our DNA constructs in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
    Read more about how we combined different cloning methods to reduce our efforts in DNA Engineering.

    Want to read more?

  • (6)Protein purification

    Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in E. coli for being able to compare the results of both techniques.
    Read more about the overexpression and purification of several antigenic peptides.

    Want to read more?

  • (7)Surface chemistry

    The production of a protein microarray in the DiaCHIP is based on specific immobilization of antigenic peptides on a glass slide. Therefore, we optimized a protocol for a specific surface chemistry until the proportion of unspecific binding of non-target proteins was reduced to a minimum.
    Read more about the different systems we tested on our way to high specificity.

    Want to read more?

  • (8)Optical detection

    One disadvantage of currently available diagnostic test is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling.
    Read more about this innovative tool and the physics behind it.

    Want to read more?