|
|
| (26 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| + | {{Team:Utrecht/MainBody}} |
| − | <html>
| + | |
| − | <head>
| + | |
| − | <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.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'>
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #top_title { display: none !important; }
| + | |
| − | /*Override default CSS*/
| + | |
| − | #sideMenu, #top_title {display:none;}
| + | |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent;}
| + | |
| − | | + | |
| − | | + | |
| − | /* set all basic objects to neutral formatting*/
| + | |
| − | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | #globalWrapper {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* set page to fill window*/
| + | |
| − | html{
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | min-height: 100%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body, html {
| + | |
| − | height: 100%;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .container {
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | margin: 0 auto 0;
| + | |
| − | -webkit-perspective: 1000;
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button {
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | font-size: 2.5em;
| + | |
| − | font-weight: light;
| + | |
| − | font-family: 'Trebuchet MS', sans-serif;
| + | |
| − | text-transform: uppercase;
| + | |
| − | text-align: center;
| + | |
| − | line-height: 60px;
| + | |
| − | letter-spacing: -1px;
| + | |
| − | color: white;
| + | |
| − | border: none;
| + | |
| − | border-radius: 50%;
| + | |
| − | background: #ff8d00;
| + | |
| − | cursor: pointer;
| + | |
| − | border: 5px solid #ffb252;
| + | |
| − | filter: grayscale(100%);
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.selected {
| + | |
| − | filter: grayscale(0%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.pulsing {
| + | |
| − | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8);
| + | |
| − | -webkit-animation: pulse 2s infinite;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*.tutorial_button.pulsing:hover {
| + | |
| − | -webkit-animation: none;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | @-webkit-keyframes pulse {
| + | |
| − | 70% {
| + | |
| − | box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body {
| + | |
| − | color: white;
| + | |
| − | font-family: 'Nunito Sans', sans-serif;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | * {
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 50px;
| + | |
| − | background: #0096ff;
| + | |
| − | overflow: hidden;
| + | |
| − | z-index: 2;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .menu-underline { position: absolute; height: 3px; background: white; transition: all 0.3s ease; }
| + | |
| − |
| + | |
| − | .top-menu .quote { opacity: 0; }
| + | |
| − | .top-menu .sections { opacity: 0; pointer-events: none; }
| + | |
| − |
| + | |
| − | .top-menu.active {
| + | |
| − | height: 345px;
| + | |
| − | background: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu.active .quote { opacity: 1; }
| + | |
| − | /*.top-menu.active .sections { opacity: 1; display: block; }*/
| + | |
| − |
| + | |
| − | .top-menu .sections { position: absolute;
| + | |
| − | left: 0;
| + | |
| − | margin: 0;
| + | |
| − | margin-left: 25px;
| + | |
| − | margin-top: 75px;
| + | |
| − | width: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .section { width: 200px; display: inline-block; padding: 15px; vertical-align: top; cursor: pointer; }
| + | |
| − | /*.top-menu .section:last-of-type { margin-right: 0; }*/
| + | |
| − | .top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; }
| + | |
| − | .top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; color: white; }
| + | |
| − | .top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; }
| + | |
| − |
| + | |
| − | .top-menu .section.active { background: #0075c8; }
| + | |
| − |
| + | |
| − | .top-menu[data-key='home'] .sections[data-key='home'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='exp'] .sections[data-key='exp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='hp'] .sections[data-key='hp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='team'] .sections[data-key='team'] { opacity: 1; pointer-events: all; }
| + | |
| − |
| + | |
| − | .top-menu ul {
| + | |
| − | position: absolute;
| + | |
| − | left: calc(50% - 290px);
| + | |
| − | margin: 0;
| + | |
| − | margin-top: 15px;
| + | |
| − | list-style-image: none;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu li {
| + | |
| − | list-style-type: none;
| + | |
| − | float: left;
| + | |
| − | margin-right: 50px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu ul::after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container {
| + | |
| − | position: fixed;
| + | |
| − | top: 125px;
| + | |
| − | left: 25px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container.active {
| + | |
| − | top: 360px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container>div {
| + | |
| − | height: 25px;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | color: #a2a2a2;
| + | |
| − | font-size: 16px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active {
| + | |
| − | color: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .text {
| + | |
| − | float: left;
| + | |
| − | padding-left: 10px;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker {
| + | |
| − | float: left;
| + | |
| − | width: 27px;
| + | |
| − | height: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker div {
| + | |
| − | display: inline-block;
| + | |
| − | background: #0096ff;
| + | |
| − | width: 10px;
| + | |
| − | height: 10px;
| + | |
| − | border-radius: 50%;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active .marker div {
| + | |
| − | background: #005b9b;
| + | |
| − | width: 15px;
| + | |
| − | height: 15px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container {
| + | |
| − | position: absolute;
| + | |
| − | top: 120px;
| + | |
| − | left: 400px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container .page-heading {
| + | |
| − | font-size: 25px;
| + | |
| − | color: #005b9b;
| + | |
| − | margin-bottom: 25px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container .page-content {
| + | |
| − | color: black;
| + | |
| − | width: 750px;
| + | |
| − | text-align: justify;
| + | |
| − | line-height: 150%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*body[data-key='home'] .menu-container { display: none; }*/
| + | |
| − |
| + | |
| − | .tutorial { height: 511px; }
| + | |
| − |
| + | |
| − | h2 { font-size: 20px; color: #005b9b; margin-bottom: 10px; }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body data-key="home">
| + | |
| − | | + | |
| − | <div class="top-menu" data-key="home">
| + | |
| − | <div>
| + | |
| − | <ul class="top-menu-links">
| + | |
| − | <li data-key="home" class="active">Home</li>
| + | |
| − | <li data-key="exp">Experimental</li>
| + | |
| − | <li data-key="hp">Human practices</li>
| + | |
| − | <li data-key="team">Team & Sponsors</li>
| + | |
| − | </ul>
| + | |
| − |
| + | |
| − | <div class="menu-underline"></div>
| + | |
| − |
| + | |
| − | <div class="quote"></div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="home">
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − |
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="exp">
| + | |
| − | <div class="section" data-url="secretion">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Cas9 & Cpf1 secretion<br/>and activity</div>
| + | |
| − | <div class="desc">Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="mesa-replication">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/b/bc/MESA.png"></div>
| + | |
| − | <div class="text">MESA two-component system replication</div>
| + | |
| − | <div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">OUTCASST system production</div>
| + | |
| − | <div class="desc">Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/6b/Modelling.png"></div>
| + | |
| − | <div class="text">Modeling and<br />mathematics</div>
| + | |
| − | <div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/63/Interlab1.png"></div>
| + | |
| − | <div class="text">Interlab study participation</div>
| + | |
| − | <div class="desc">Results and details of our measurements for the iGEM 2017 Interlab Study.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="hp">
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Stakeholders & opinions</div>
| + | |
| − | <div class="desc">Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/8/8d/Igemutrecht_safety.png"></div>
| + | |
| − | <div class="text">Risks & safety-issues</div>
| + | |
| − | <div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Design & integration</div>
| + | |
| − | <div class="desc">OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="team">
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5e/Team_comp.png"></div>
| + | |
| − | <div class="text">Meet our team</div>
| + | |
| − | <div class="desc">About us, our interests and roles in the team and our supervisors.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"></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>
| + | |
| − | <div class="section">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Achievements.png"></div>
| + | |
| − | <div class="text">Achievements</div>
| + | |
| − | <div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="menu-container">
| + | |
| − | <div style="position: absolute; left: 13px; top: 10px; height: 70px; width: 2px; background: #0096ff; z-index: -1;"></div>
| + | |
| − | <div class="item active" data-key="1">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">Intro</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="2">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The problem</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="3">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The system</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="page-container">
| + | |
| − | <div class="page-heading">The OUTCASST two-component system</div>
| + | |
| − | <div class="page-content">
| + | |
| − |
| + | |
| − | 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.
| + | |
| − |
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − | <h2 class="subhead" id="subhead-2">The problem</h2>
| + | |
| − | Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
| + | |
| − | | + | |
| − | <center>
| + | |
| − | <div class="tutorial" style="position: relative; width: 560px; 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">
| + | |
| − | <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-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png">
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 50px; left: 0; 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: 500px;">
| + | |
| − | <span id="link-2" class="tutorial_button">2</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 0;">
| + | |
| − | <span id="link-3" class="tutorial_button">3</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 500px;">
| + | |
| − | <span id="link-4" class="tutorial_button">4</span>
| + | |
| − | </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.
| + | |
| − |
| + | |
| − | <div id="popover-1">
| + | |
| − | Binding of components with search-specific gRNA sequences.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-2">
| + | |
| − | DNA sample fragment binds to one of the components.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-3">
| + | |
| − | Fragment binding with both components induces co-localization.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-4">
| + | |
| − | Protease cleaves, transcription factor is released from complex.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | @import url(https://fonts.googleapis.com/css?family=Open+Sans);
| + | |
| − | | + | |
| − | /* set global font to Open Sans */
| + | |
| − | body {
| + | |
| − | font-family: 'Open Sans', 'sans-serif';
| + | |
| − | } | + | |
| − | | + | |
| − | .btn {
| + | |
| − | border-radius: 5px;
| + | |
| − | padding: 15px 25px;
| + | |
| − | font-size: 22px;
| + | |
| − | text-decoration: none;
| + | |
| − | margin: 20px;
| + | |
| − | color: #fff;
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | } | + | |
| − | | + | |
| − | .btn:active {
| + | |
| − | transform: translate(0px, 5px);
| + | |
| − | -webkit-transform: translate(0px, 5px);
| + | |
| − | box-shadow: 0px 1px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue {
| + | |
| − | background-color: #55acee;
| + | |
| − | box-shadow: 0px 5px 0px 0px #3C93D5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue:hover {
| + | |
| − | background-color: #6FC6FF;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <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">
| + | |
| − | $.noConflict();
| + | |
| − | | + | |
| − | function getPos(el)
| + | |
| − | {
| + | |
| − | for (var lx=0, ly=0;
| + | |
| − | el != null;
| + | |
| − | lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
| + | |
| − | return {x: lx,y: ly};
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery( window ).scroll(function() {
| + | |
| − | var sel_subhead = 1;
| + | |
| − |
| + | |
| − | jQuery(".subhead").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.id.split("-")[1];
| + | |
| − |
| + | |
| − | var pos = getPos(v);
| + | |
| − |
| + | |
| − | if(document.body.scrollTop + 200 >= pos.y)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | else if(document.body.scrollTop + document.body.getHeight() == document.body.scrollHeight)
| + | |
| − | {
| + | |
| − | if(key == 3)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery(".menu-container .item").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.getAttribute("data-key");
| + | |
| − |
| + | |
| − | if(key == sel_subhead)
| + | |
| − | jQuery(v).addClass("active");
| + | |
| − | else
| + | |
| − | jQuery(v).removeClass("active");
| + | |
| − | });
| + | |
| − | });
| + | |
| − |
| + | |
| − | 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";
| + | |
| − |
| + | |
| − | jQuery("#popover-" + i).dxPopover({
| + | |
| − | target: "#link-" + i,
| + | |
| − | showEvent: showEvent,
| + | |
| − | hideEvent: "",
| + | |
| − | position: position,
| + | |
| − | width: 300,
| + | |
| − | showTitle: true,
| + | |
| − | title: title
| + | |
| − | }).dxPopover("instance");
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery("#link-1").click(function()
| + | |
| − | {
| + | |
| − | jQuery("#popover-1").dxPopover("show");
| + | |
| − | jQuery("#link-1").removeClass("pulsing");
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery('body').on('click', 'a', function(event) {
| + | |
| − | var id = event.target.id;
| + | |
| − |
| + | |
| − | if(id == "goto-2")
| + | |
| − | {
| + | |
| − | jQuery("#link-1").removeClass("selected");
| + | |
| − | jQuery("#popover-1").dxPopover("hide");
| + | |
| − | jQuery("#popover-2").dxPopover("show");
| + | |
| − | jQuery("#link-2").addClass("selected");
| + | |
| − | jQuery("#figure-1").fadeOut("5");
| + | |
| − | jQuery("#figure-2").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-3")
| + | |
| − | {
| + | |
| − | jQuery("#link-2").removeClass("selected");
| + | |
| − | jQuery("#popover-2").dxPopover("hide");
| + | |
| − | jQuery("#popover-3").dxPopover("show");
| + | |
| − | jQuery("#link-3").addClass("selected");
| + | |
| − | jQuery("#figure-2").fadeOut("5");
| + | |
| − | jQuery("#figure-3").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-4")
| + | |
| − | {
| + | |
| − | jQuery("#link-3").removeClass("selected");
| + | |
| − | jQuery("#popover-3").dxPopover("hide");
| + | |
| − | jQuery("#popover-4").dxPopover("show");
| + | |
| − | jQuery("#link-4").addClass("selected");
| + | |
| − | jQuery("#figure-3").fadeOut("5");
| + | |
| − | jQuery("#figure-4").fadeIn("5");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <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">
| + | |
| − | function move_underline(element)
| + | |
| − | {
| + | |
| − | var width = element.getWidth();
| + | |
| − | var height = element.getHeight();
| + | |
| − | var offset = element.cumulativeOffset();
| + | |
| − |
| + | |
| − | var line = $$(".menu-underline")[0];
| + | |
| − |
| + | |
| − | line.style.top = (offset.top + height - 19) + "px";
| + | |
| − | line.style.left = offset.left + "px";
| + | |
| − | line.style.width = width + "px";
| + | |
| − | }
| + | |
| − | | + | |
| − | document.observe("dom:loaded", function()
| + | |
| − | {
| + | |
| − | move_underline($$(".top-menu-links li")[0]);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseover", function()
| + | |
| − | {
| + | |
| − | this.addClassName("active");
| + | |
| − | $$(".menu-container")[0].addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseout", function()
| + | |
| − | {
| + | |
| − | this.removeClassName("active");
| + | |
| − | $$(".menu-container")[0].removeClassName("active");
| + | |
| − | });
| + | |
| − | | + | |
| − | $$(".top-menu")[0].on("click", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | var title = element.select(".text")[0].innerHTML;
| + | |
| − | var page = element.getAttribute("data-url");
| + | |
| − |
| + | |
| − | history.pushState({}, title, page);
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseover", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseout", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu-links")[0].on("mouseover", "li", function(event, element)
| + | |
| − | {
| + | |
| − | move_underline(element);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].setAttribute("data-key", element.getAttribute("data-key"));
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseover", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseout", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | Event.observe(window, "scroll", function()
| + | |
| − | {
| + | |
| − | var pos_y = 125 - window.scrollY;
| + | |
| − |
| + | |
| − | if(pos_y < 75)
| + | |
| − | pos_y = 75;
| + | |
| − |
| + | |
| − | //$$(".menu-container")[0].style.top = pos_y + "px";
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | </body>
| + | |
| − | </html>
| + | |
