Cas9 & Cpf1 secretion
and activity
Difference between revisions of "Team:Utrecht/"
| Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
| − | <link href="https://fonts.googleapis.com/css?family= | + | <!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">--> |
| + | <link href="https://2017.igem.org/Team:Utrecht/Template:OpenSans/CSS?action=raw&ctype=text/css" rel="stylesheet"> | ||
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'> | + | <!--<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">--> |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'> | + | <link href="https://2017.igem.org/Team:Utrecht/Template:NunitoSans/CSS?action=raw&ctype=text/css" rel="stylesheet"> |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'> | + | |
| + | <!--<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'>--> | ||
| + | <!--<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'>--> | ||
| + | <!--<link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'>--> | ||
| + | <link rel='stylesheet prefetch' href='https://2017.igem.org/Team:Utrecht/Template:Dx.spa/CSS?action=raw&ctype=text/css'> | ||
| + | <link rel='stylesheet prefetch' href='https://2017.igem.org/Team:Utrecht/Template:Dx.common/CSS?action=raw&ctype=text/css'> | ||
| + | <link rel='stylesheet prefetch' href='https://2017.igem.org/Team:Utrecht/Template:Dx.light/CSS?action=raw&ctype=text/css'> | ||
| + | <!--<link rel='stylesheet prefetch' href='https://static.igem.org/mediawiki/2017/a/a3/Dx.spa.css.txt'> | ||
| + | <link rel='stylesheet prefetch' href='https://static.igem.org/mediawiki/2017/c/ce/Dx.common.css.txt'> | ||
| + | <link rel='stylesheet prefetch' href='https://static.igem.org/mediawiki/2017/2/23/Dx.light.css.txt'>--> | ||
<style type="text/css"> | <style type="text/css"> | ||
| Line 13: | Line 23: | ||
.slick-loading .slick-list | .slick-loading .slick-list | ||
{ | { | ||
| − | background: #fff | + | background: #fff; |
} | } | ||
/* Icons */ | /* Icons */ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
/* Arrows */ | /* Arrows */ | ||
.slick-prev, | .slick-prev, | ||
| Line 214: | Line 215: | ||
} | } | ||
| + | .dx-popover-wrapper { z-index: 1 !important; } | ||
</style> | </style> | ||
| Line 451: | Line 453: | ||
body[data-page='sponsors'] { transition: none; } | body[data-page='sponsors'] { transition: none; } | ||
| − | .top-menu { | + | .top-menu, .top-menu.active[data-key="home"] { |
position: fixed; | position: fixed; | ||
top: 18px; | top: 18px; | ||
| Line 525: | Line 527: | ||
} | } | ||
| − | .menu-container.active { | + | .menu-container .item { cursor: pointer; } |
| + | |||
| + | body.sections_active .menu-container.active { | ||
top: 375px; | top: 375px; | ||
} | } | ||
| Line 577: | Line 581: | ||
body[data-page='sponsors'] .page-container { left: 0; width: 100%; } | body[data-page='sponsors'] .page-container { left: 0; width: 100%; } | ||
body[data-page='sponsors'] .page-content { width: 100%; } | body[data-page='sponsors'] .page-content { width: 100%; } | ||
| + | |||
| + | .page-container { transition: none; } | ||
| + | .page-container * { transition: all 0.5s ease; } | ||
| + | |||
| + | .page-content { transition: none; } | ||
| + | .page-content * { transition: all 0.5s ease; } | ||
| + | |||
| + | body[data-page='sponsors'] .page-content * { transition: none; } | ||
.page-container .page-heading { | .page-container .page-heading { | ||
| Line 589: | Line 601: | ||
text-align: justify; | text-align: justify; | ||
line-height: 150%; | line-height: 150%; | ||
| + | margin-bottom: 50px; | ||
} | } | ||
| Line 613: | Line 626: | ||
<div class="quote"></div> | <div class="quote"></div> | ||
| − | <div class="sections" data-key="home"> | + | <div class="sections" data-key="home"></div> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="sections" data-key="exp"> | <div class="sections" data-key="exp"> | ||
| Line 666: | Line 675: | ||
<div class="thumb"><img height="100" src=""></div> | <div class="thumb"><img height="100" src=""></div> | ||
<div class="text">Outreach</div> | <div class="text">Outreach</div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="desc">.</div> | <div class="desc">.</div> | ||
</div> | </div> | ||
| Line 685: | Line 689: | ||
<div class="text">Sponsors</div> | <div class="text">Sponsors</div> | ||
<div class="desc">A listing of our sponsors, how they assisted us and our gratitude for their assistance.</div> | <div class="desc">A listing of our sponsors, how they assisted us and our gratitude for their assistance.</div> | ||
| + | </div> | ||
| + | <div class="section" data-url="collaborations"> | ||
| + | <div class="thumb"><img height="100" src=""></div> | ||
| + | <div class="text">Collaborations</div> | ||
| + | <div class="desc">.</div> | ||
</div> | </div> | ||
<div class="section" data-url="achievements"> | <div class="section" data-url="achievements"> | ||
| Line 711: | Line 720: | ||
<div class="page-container"> | <div class="page-container"> | ||
<div class="page-content"> | <div class="page-content"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <script id="page-home" type="text/template"><!-- | ||
<div class="page-heading">The OUTCASST two-component system</div> | <div class="page-heading">The OUTCASST two-component system</div> | ||
This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies. | This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies. | ||
| Line 720: | Line 733: | ||
<center> | <center> | ||
| − | <div class="tutorial" style="position: relative; width: | + | <div class="tutorial" style="position: relative; width: 610px; display: inline-block;"> |
| − | <img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png"> | + | <?PHP /* ?><img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png"> |
<img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png"> | <img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png"> | ||
<img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png"> | <img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png"> | ||
<img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png"> | <img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png"> | ||
| + | <?PHP */ ?> | ||
| − | < | + | <img id="figure-1" style="position: absolute; top: 25px; left: 128px; " src="https://static.igem.org/mediawiki/2017/b/b4/Uututorial_1.png"> |
| − | + | <img id="figure-2" style="position: absolute; top: 25px; left: 128px; display: none;" src="https://static.igem.org/mediawiki/2017/f/f5/Uututorial_2.png"> | |
| − | </ | + | <img id="figure-3" style="position: absolute; top: 25px; left: 128px; display: none;" src="https://static.igem.org/mediawiki/2017/3/3b/Uututorial_3.png"> |
| + | <img id="figure-4" style="position: absolute; top: 25px; left: 128px; display: none;" src="https://static.igem.org/mediawiki/2017/f/f7/Uututorial_4.png"> | ||
| − | <div | + | <div id="popover-1" style="display: none;"> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Binding of components with search-specific gRNA sequences. | Binding of components with search-specific gRNA sequences. | ||
<br> | <br> | ||
<br> | <br> | ||
| − | <a href=" | + | <a href="javascript: void(0);" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a> |
</div> | </div> | ||
| − | <div id="popover-2"> | + | <div id="popover-2" style="display: none;"> |
DNA sample fragment binds to one of the components. | DNA sample fragment binds to one of the components. | ||
<br> | <br> | ||
<br> | <br> | ||
| − | <a href=" | + | <a href="javascript: void(0);" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a> |
</div> | </div> | ||
| − | <div id="popover-3"> | + | <div id="popover-3" style="display: none;"> |
Fragment binding with both components induces co-localization. | Fragment binding with both components induces co-localization. | ||
<br> | <br> | ||
<br> | <br> | ||
| − | <a href=" | + | <a href="javascript: void(0);" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a> |
</div> | </div> | ||
| − | <div id="popover-4"> | + | <div id="popover-4" style="display: none;"> |
Protease cleaves, transcription factor is released from complex. | Protease cleaves, transcription factor is released from complex. | ||
<br> | <br> | ||
<br> | <br> | ||
</div> | </div> | ||
| − | + | <div class="container" style="position: absolute; top: 50px; left: 30px; width: 75px;"> | |
| + | <span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span> | ||
| + | </div> | ||
| + | |||
| + | <div class="container" style="position: absolute; top: 50px; left: 550px;"> | ||
| + | <span id="link-2" class="tutorial_button">2</span> | ||
| + | </div> | ||
| + | |||
| + | <div class="container" style="position: absolute; top: 300px; left: 30px;"> | ||
| + | <span id="link-3" class="tutorial_button">3</span> | ||
| + | </div> | ||
| + | |||
| + | <div class="container" style="position: absolute; top: 300px; left: 550px;"> | ||
| + | <span id="link-4" class="tutorial_button">4</span> | ||
| + | </div> | ||
</div> | </div> | ||
| − | </ | + | </center> |
| + | |||
| + | <h2 class="subhead" id="subhead-3">The system</h2> | ||
| + | The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal. | ||
| + | |||
| + | <script type="text/javascript" language="JavaScript"> | ||
| + | function tut_goto(step) | ||
| + | { | ||
| + | if(step == 1) | ||
| + | { | ||
| + | for(var i = 1; i <= 4; i++) | ||
| + | { | ||
| + | if(i != step) | ||
| + | { | ||
| + | jQuery("#link-" + i).removeClass("selected"); | ||
| + | jQuery("#popover-" + i).dxPopover("hide"); | ||
| + | jQuery("#figure-" + i).fadeOut("5"); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | jQuery("#popover-" + i).dxPopover("show"); | ||
| + | jQuery("#link-" + i).addClass("selected"); | ||
| + | jQuery("#link-" + i).removeClass("pulsing"); | ||
| + | jQuery("#figure-" + i).fadeIn("5"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | jQuery('html, body').animate({scrollTop: jQuery('.tutorial').offset().top - 150}, 500); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | for(var i = 1; i <= 4; i++) | ||
| + | { | ||
| + | if(i != step) | ||
| + | { | ||
| + | jQuery("#link-" + i).removeClass("selected"); | ||
| + | jQuery("#popover-" + i).dxPopover("hide"); | ||
| + | jQuery("#figure-" + i).fadeOut("5"); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | jQuery("#popover-" + i).dxPopover("show"); | ||
| + | jQuery("#link-" + i).addClass("selected"); | ||
| + | jQuery("#figure-" + i).fadeIn("5"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | jQuery('html, body').animate({scrollTop: jQuery('.tutorial').offset().top - 150}, 500); | ||
| + | } | ||
| + | } | ||
| − | < | + | jQuery(function(){ |
| − | + | for(var i = 1; i <= 4; i++) | |
| + | { | ||
| + | var position = "left"; | ||
| + | var showEvent = ""; | ||
| + | |||
| + | if(i == 2 || i == 4) | ||
| + | { | ||
| + | position = "right"; | ||
| + | showEvent = ""; | ||
| + | } | ||
| + | |||
| + | var title; | ||
| + | |||
| + | if(i == 1) | ||
| + | title = "Guide RNA"; | ||
| + | else if(i == 2) | ||
| + | title = "DNA binding"; | ||
| + | else if(i == 3) | ||
| + | title = "Signal transduction"; | ||
| + | else if(i == 4) | ||
| + | title = "Signal transduction"; | ||
| + | |||
| + | var content = jQuery("#popover-" + i)[0].innerHTML; | ||
| + | |||
| + | jQuery("#popover-" + i).dxPopover({ | ||
| + | target: "#link-" + i, | ||
| + | showEvent: "", | ||
| + | hideEvent: "", | ||
| + | closeOnBackButton: false, | ||
| + | closeOnOutsideClick: false, | ||
| + | position: { | ||
| + | my: (position == "left" ? "right" : "left"), | ||
| + | at: position, | ||
| + | of: $("#link-" + i) | ||
| + | }, | ||
| + | width: 0, | ||
| + | height: 0, | ||
| + | showTitle: false, | ||
| + | title: title, | ||
| + | visible: true, | ||
| + | animation: { show: { type: 'fade', from: 0, to: 1, duration: 0 }, hide: { type: 'fade', to: 0, duration: 0 } }, | ||
| + | contentTemplate: "", | ||
| + | closeOnTargetScroll: function(){ | ||
| + | return true; | ||
| + | } | ||
| + | }).dxPopover("hide"); | ||
| + | |||
| + | jQuery("#popover-" + i).dxPopover({ | ||
| + | showTitle: true, | ||
| + | width: 300, | ||
| + | height: "auto", | ||
| + | animation: { show: { type: 'fade', from: 0, to: 1 }, hide: { type: 'fade', to: 0 } }, | ||
| + | contentTemplate: content | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | for(var i = 1; i <= 4; i++) | ||
| + | { | ||
| + | jQuery("#link-" + i).click(function() | ||
| + | { | ||
| + | tut_goto(this.id.split("-")[1]); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | jQuery('body').on('click', 'a', function(event) { | ||
| + | var id = event.target.id; | ||
| + | |||
| + | if(id == "goto-2") | ||
| + | { | ||
| + | tut_goto(2); | ||
| + | } | ||
| + | else if(id == "goto-3") | ||
| + | { | ||
| + | tut_goto(3); | ||
| + | } | ||
| + | else if(id == "goto-4") | ||
| + | { | ||
| + | tut_goto(4); | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
</script> | </script> | ||
| + | --></script> | ||
<script id="page-secretion" type="text/template"> | <script id="page-secretion" type="text/template"> | ||
| Line 1,161: | Line 1,303: | ||
</script> | </script> | ||
| − | <script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script> | + | <!--<script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script>--> |
| + | <script type="text/javascript" src="https://2017.igem.org/Team:Utrecht/Template:Scrollreveal/Javascript?action=raw&ctype=text/javascript"></script> | ||
<script id="page-stakeholders" type="text/template"> | <script id="page-stakeholders" type="text/template"> | ||
| Line 1,750: | Line 1,893: | ||
</div> | </div> | ||
<br><br> | <br><br> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div style="width: 750px; margin: auto;"> | <div style="width: 750px; margin: auto;"> | ||
| Line 1,832: | Line 1,933: | ||
window.setTimeout(function(){ | window.setTimeout(function(){ | ||
jQuery('.slider_for').slick({ | jQuery('.slider_for').slick({ | ||
| − | |||
slidesToShow: 1, | slidesToShow: 1, | ||
slidesToScroll: 1, | slidesToScroll: 1, | ||
| Line 1,840: | Line 1,940: | ||
}); | }); | ||
jQuery('.sponsors_slider').slick({ | jQuery('.sponsors_slider').slick({ | ||
| − | + | centerMode: true, | |
slidesToShow: 6, | slidesToShow: 6, | ||
| + | slidesToScroll: 1, | ||
speed: 300, | speed: 300, | ||
| − | |||
variableWidth: true, | variableWidth: true, | ||
focusOnSelect: true, | focusOnSelect: true, | ||
| Line 1,861: | Line 1,961: | ||
<br><br> | <br><br> | ||
| − | <h2 class="subhead" id="subhead- | + | <h2 class="subhead" id="subhead-1">Bronze</h2> |
<div class="achievements" style="width: 100%;"> | <div class="achievements" style="width: 100%;"> | ||
<div style="float: left; width: 100%; margin: 0;"> | <div style="float: left; width: 100%; margin: 0;"> | ||
| Line 1,924: | Line 2,024: | ||
<br> | <br> | ||
| − | <h2 class="subhead" id="subhead- | + | <h2 class="subhead" id="subhead-3">Gold</h2> |
<div class="achievements" style="width: 100%;"> | <div class="achievements" style="width: 100%;"> | ||
<div style="float: left; width: 100%; margin: 0;"> | <div style="float: left; width: 100%; margin: 0;"> | ||
| Line 1,948: | Line 2,048: | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | @import url(https://fonts.googleapis.com/css?family=Open+Sans); | + | /*@import url(https://fonts.googleapis.com/css?family=Open+Sans);*/ |
/* set global font to Open Sans */ | /* set global font to Open Sans */ | ||
| Line 1,987: | Line 2,087: | ||
</style> | </style> | ||
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | + | <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> |
| − | <script src='https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js'></script> | + | <script type="text/javascript" src="https://2017.igem.org/Team:Utrecht/Template:Jquery/Javascript?action=raw&ctype=text/javascript"></script> |
| + | <!--<script src='https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js'></script>--> | ||
| + | <script type="text/javascript" src='https://2017.igem.org/Team:Utrecht/Template:Dxweb/Javascript?action=raw&ctype=text/javascript'></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$.noConflict(); | $.noConflict(); | ||
| Line 2,009: | Line 2,111: | ||
var pos = getPos(v); | var pos = getPos(v); | ||
| − | if(jQuery(window).scrollTop() + | + | var found = 0; |
| + | |||
| + | if(Math.ceil(jQuery(window).scrollTop() + jQuery(window).height()) >= jQuery(document).height() - 10) | ||
{ | { | ||
| − | sel_subhead = key; | + | var last_key = jQuery(".subhead")[jQuery(".subhead").length - 1]; |
| + | var last_key = last_key.id.split("-")[1]; | ||
| + | |||
| + | if(key == last_key) | ||
| + | { | ||
| + | sel_subhead = key; | ||
| + | |||
| + | found = 1; | ||
| + | |||
| + | } | ||
} | } | ||
| − | + | ||
| + | if(found == 0) | ||
{ | { | ||
| − | if( | + | if(jQuery(window).scrollTop() + 200 >= pos.y) |
| − | { | + | { |
| − | + | sel_subhead = key; | |
| − | } | + | |
| + | found = 1; | ||
| + | } | ||
} | } | ||
}); | }); | ||
| Line 2,032: | Line 2,148: | ||
}); | }); | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</script> | </script> | ||
| − | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> | + | <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>--> |
| − | <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script> | + | <script type="text/javascript" src="https://2017.igem.org/Team:Utrecht/Template:Prototypejs/Javascript?action=raw&ctype=text/javascript"></script> |
| + | |||
| + | <!--<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>--> | ||
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> | + | <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>--> |
| + | <script type="text/javascript" src="https://2017.igem.org/Team:Utrecht/Template:Slick/Javascript?action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 2,220: | Line 2,266: | ||
new_html = new_html + "<div style='position: absolute; left: 13px; top: 10px; height: " + (35 * (Object.keys(menu).length - 1)) + "px; width: 2px; background: #0096ff; z-index: -1;'></div>"; | new_html = new_html + "<div style='position: absolute; left: 13px; top: 10px; height: " + (35 * (Object.keys(menu).length - 1)) + "px; width: 2px; background: #0096ff; z-index: -1;'></div>"; | ||
| + | var i = 1; | ||
$H(menu).each(function(pair) | $H(menu).each(function(pair) | ||
{ | { | ||
| − | new_html = new_html + "<div class='item' data-key='" + pair.key + "'><div class='marker'><div></div></div><div class='text'>" + pair.value + "</div></div>"; | + | new_html = new_html + "<div class='item" + (i == 1 ? " active" : "") + "' data-key='" + pair.key + "'><div class='marker'><div></div></div><div class='text'>" + pair.value + "</div></div>"; |
| + | |||
| + | i++; | ||
}); | }); | ||
} | } | ||
menu_container.update(new_html); | menu_container.update(new_html); | ||
| + | } | ||
| + | |||
| + | if($$("body")[0].getAttribute("data-page") == "home") | ||
| + | { | ||
| + | for(var i = 1; i <= 4; i++) | ||
| + | { | ||
| + | jQuery("#popover-" + i).dxPopover({ | ||
| + | animation: { show: { type: 'fade', from: 0, to: 1, duration: 0 }, hide: { type: 'fade', to: 0, duration: 0 } } | ||
| + | }).dxPopover("hide"); | ||
| + | } | ||
} | } | ||
| Line 2,242: | Line 2,301: | ||
document.observe("dom:loaded", function() | document.observe("dom:loaded", function() | ||
{ | { | ||
| + | change_page("home"); | ||
| + | |||
move_underline($$(".top-menu-links li")[0]); | move_underline($$(".top-menu-links li")[0]); | ||
$$(".top-menu")[0].observe("mouseover", function() | $$(".top-menu")[0].observe("mouseover", function() | ||
{ | { | ||
| + | if(this.getAttribute("data-key") != "home") | ||
| + | document.body.addClassName("sections_active"); | ||
| + | |||
this.addClassName("active"); | this.addClassName("active"); | ||
$$(".menu-container")[0].addClassName("active"); | $$(".menu-container")[0].addClassName("active"); | ||
| Line 2,252: | Line 2,316: | ||
$$(".top-menu")[0].observe("mouseout", function() | $$(".top-menu")[0].observe("mouseout", function() | ||
{ | { | ||
| + | document.body.removeClassName("sections_active"); | ||
| + | |||
this.removeClassName("active"); | this.removeClassName("active"); | ||
$$(".menu-container")[0].removeClassName("active"); | $$(".menu-container")[0].removeClassName("active"); | ||
| Line 2,300: | Line 2,366: | ||
}); | }); | ||
| − | $$(".menu-container")[0].on("mouseover", ".item", function(event, element) | + | /*$$(".menu-container")[0].on("mouseover", ".item", function(event, element) |
{ | { | ||
element.addClassName("active"); | element.addClassName("active"); | ||
| Line 2,308: | Line 2,374: | ||
{ | { | ||
element.removeClassName("active"); | element.removeClassName("active"); | ||
| + | });*/ | ||
| + | |||
| + | $$(".menu-container")[0].on("click", ".item", function(event, element) | ||
| + | { | ||
| + | var pos = getPos($("subhead-" + element.getAttribute("data-key"))); | ||
| + | |||
| + | jQuery("html, body").animate({ scrollTop: pos.y - 200 }, 500); | ||
}); | }); | ||
| Line 2,614: | Line 2,687: | ||
}</style> | }</style> | ||
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.0.2/shuffle.min.js"></script> | + | <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.0.2/shuffle.min.js"></script>--> |
| + | <script type="text/javascript" src="https://2017.igem.org/Team:Utrecht/Template:Shuffle/Javascript?action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
/*var Shuffle = window.Shuffle; | /*var Shuffle = window.Shuffle; | ||
Revision as of 16:54, 27 October 2017
<!DOCTYPE html>
Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.
MESA two-component system replication
Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.
OUTCASST system production
Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.
Modeling and
mathematics
mathematics
Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.
InterLab study participation
Results and details of our measurements for the iGEM 2017 InterLab Study.
Stakeholders & opinions
Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.
Risks & safety-issues
Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.
Design & integration
OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.
Outreach
.
Meet our team
About us, our interests and roles in the team and our supervisors.
Sponsors
A listing of our sponsors, how they assisted us and our gratitude for their assistance.
Collaborations
.
Achievements
A short description of all that we have achieved during our participation in the iGEM.
