"
Team:KULeuven/Project
From 2008.igem.org
Result:
To have a dropdown for your own team copy over all of the content below. It might be needed to adjust a thing or two. Comments have been added throughout the code what must be changed.
Inspirational websites:
- [http://javascript-array.com/scripts/simple_drop_down_menu/ Most basic dropdown menu, with no submenu's]
- [http://jquery.com/ The javascript library used to add effects and optimise the dropdown]
- [http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/ How to center a ul list effectively]
The dropdown has been created and developed by the KULeuven team.
<html>
<style type="text/css">
#content {z-index:4;}
#ddwrapper * {z-index:8 !important;}
div#ddwrapper {
margin:0;
padding:0;
height:28px;
width:945px; /* change to adjust imperfections in width */
}
div#ddnav {
margin:0 auto; /* needed to center the dropdown */
padding:0;
top:5px;
/* width: 965px */
visibility:hidden; /* dropdown is hidden until properly initalised by javascript */
}
div#ddtoggle {
margin:0;
position:fixed;
right:2px;
top:15px;
height:10px;
width:10px;
z-index:100;
}
#ddnav ul {
display:table-row; /* works only for firefox, later adjusted by javascript for IE */
margin:0 auto;
padding:0;
}
#ddnav ul li {
display:table-cell; /* works only for firefox, later adjusted by javascript for IE */
list-style:none;
margin:0;
padding:0 !important;
border-right:1px solid #FFF; /* creates illusion of spacing between tabs */
}
#ddnav ul li:last-child{border-right:none;}
#ddnav a{
display:block;
margin:0;
padding:4px 14px; /* play with dimensions for size of tabs */
background-color:#075A90; /* background color for tabs */
color:#FFF !important; /* font color for text in tabs */
text-align:center; /* aligning for text in tabs */
text-decoration:none !important;
font:bold 10pt Trebuchet MS; /* font properties for text in tabs */
outline:0;
}
#ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */
#ddnav li a:active {outline:none;} /* remove standard dotted border for links when clicked (IE) */
#ddnav li a:focus {-moz-outline-style:none;} /* remove standard dotted border for links when clicked (FF) */
#ddnav div {
display:none;
position:absolute;
width:9em;
background-color:#000; /* bug solution, do not change ! */
border:1px solid #5970B2; /* border color for dropdown menus */
opacity:0.9; /* transparancy of the dropdown menus (FF) */
filter:alpha(opacity=90); /* transparancy of the dropdown menus (IE) */
}
#ddnav div a {
display:block;
padding:5px 10px; /* play with dimensions of block element in dropdown menus */
position:relative;
font:normal 8pt arial; /* font properties for text in dropdown menus */
text-align:left; /* aligning of text in dropdown menus */
cursor:pointer;
}
#ddnav div a:hover, #ddnav span a:hover {color:#000 !important;} /* text color on mouseover */
#ddnav span div {
position:relative;
border:none;
border-bottom:2px groove #5970B2; /* separator for submenus, groove does not work in FF */
opacity:1.0; /* avoid stacking transparancy for submenus (FF) */
filter:alpha(opacity=100); /* avoid stacking transparancy for submenus (IE) */
}
/* may want to upload the following pictures to a new location */
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}
.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
</style>
<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"></script>
<script type="text/javascript">
function ddnav() {
$('#ddnav ul li').hover(
function () {
$(this).find('div:first').css('display','block');},
function () {
$(this).find('div:first').css('display','none');}
);
}
function ddnavsub() {
$('#ddnav span > a').toggle(
function () {
$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
$(this).parent().find('div:first').slideDown('fast');
$(this).hover(
function (){$(this).css('background-color','#99AAFF');},
function (){$(this).css('background-color','#99AAFF');});},
function () {
$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
$(this).parent().find('div:first').css('display','none');
$(this).hover(
function (){$(this).css('background-color','#99CCFF');},
function (){$(this).css('background-color','#075A90');});}
).addClass("#ddnav expand");
}
/* If you wish to omit the docking feature, remove following function ddtoggle() */
function ddtoggle() {
$('#ddtoggle').toggle(
function () {
$(this).removeClass('undocked').addClass('docked');
$('#ddnav').css('position','fixed');},
function () {
$(this).removeClass('docked').addClass('undocked');
$('#ddnav').css('position','static');}
);
}
function ddalign() {
var _windowWidth = $(window).width();
var _leftOffset = (_windowWidth - 965)/2;
$('div#ddnav').css('left',_leftOffset);
}
function ddmsie() {
$('#ddnav a').hover(
function () {$(this).css('background-color','#99ccff');},
function () {$(this).css('background-color','#075a90');}
);
/* toggle doesn't work yet */
$('#ddtoggle').css('display','none');
$('#ddnav ul').css('display','inline-block');
$('#ddnav ul li').css('display','inline');
$('#ddnav ul li').css('position','relative');
$('#ddnav ul li>a').css('display','inline-block');
$('#ddnav ul li>a').css('margin-right','-4px');
$('#ddnav div').css('left','0');
$('#ddnav div').css('top','100%');
$('#ddnav span div').css('top','0');
}
function ddmozilla() {
ddtoggle();
$(window).bind('resize', function() {ddalign();});
}
$(function () {
ddnav();
ddnavsub();
if(jQuery.browser.msie) ddmsie();
if(jQuery.browser.mozilla) ddmozilla();
$('#ddnav').css('visibility','visible');
});
</script>
<!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) -->
<div id="ddtoggle" class="undocked"></div>
<div id="ddwrapper">
<!-- Here the actual links are defined, simply replace with your own links in the appropriate sections -->
<div id="ddnav" align="center">
<ul>
<li>
<a href="https://2008.igem.org/Team:KULeuven">Home</a>
</li>
<li>
<a>The Team</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Team/LabsandGroups">Research Labs and Groups</a>
<a href="https://2008.igem.org/Team:KULeuven/Team/Students">Students</a>
<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
<a href="https://2008.igem.org/Team:KULeuven/Team/Pictures">Pictures</a>
</div>
</li>
<li>
<a>The Project</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
<span>
<a>Components</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Project/Input">Input</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Output">Output</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">Invertimer</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Reset">Reset</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath">Cell Death</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Memory">Memory</a>
</div>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Evaluation">End Evaluation</a>
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
<a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
</div>
</li>
<li>
<a>Ethics</a>
<div>
</div>
</li>
<li>
<a>Submitted Parts</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Parts">Listing</a>
<a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a>
</div>
</li>
<li>
<a>Modeling</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
<span>
<a>Components</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Model/Output">Output</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Reset">Reset</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/CellDeath">Cell Death</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Memory">Memory</a>
</div>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Sensitivity">Sensitivity Analysis</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
</div>
</li>
<li>
<a>Data Analysis</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a>
<span>
<a>New Parts</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a>
</div>
</span>
<span>
<a>Components</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Data/Input">Input</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Output">Output</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a>
</div>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
</div>
</li>
<li>
<a>Software</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a>
<a href="https://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a>
</div>
</li>
<li>
<a>Notebook</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
<a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
<span>
<a>Reports</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a>
<a href="https://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a>
</div>
</span>
<span>
<a>Lab Data</a>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Freezer">Freezer</a>
<a href="https://2008.igem.org/Team:KULeuven/Primers">Primers</a>
<a href="https://2008.igem.org/Team:KULeuven/Ligation">Ligation</a>
</div>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Tools">Tools</a>
<a href="https://2008.igem.org/Team:KULeuven/Press">Press</a>
<a href="https://2008.igem.org/Team:KULeuven/Guestbook">Guestbook</a>
</div>
</li>
</ul>
</div>
</div>
</html>
A bacterial drug delivery system
Our team works on a bacterial drug delivery system, for instance for the production of a peptide such as vasoactive intestinal peptide as a potential treatment for Crohn's disease. The bacterial drug delivery systems will have several advantages over classical drugs. These are (a) the bacterium will produce the exact amount of drug necessary for each individual by means of a feedback control mechanism, (b) the bacterium will die upon a long symptomless period and (c) a possible development towards drugs being taken up in the bloodstream. The elaboration of such a system in a couple of months is, however, not viable. Therefore, we have decided in favour of constructing something more like a scaffolding, a proof of concept, that uses dummy in- and output and leaves room for case-dependent interpretation. Crohn's disease is, for us, only an example, rather than a limitation.
A dummy input has been found in a light-sensing device. This is an easy-to-use system, that allows fast switching between input signals 0, noise or 1. The dummy output signal is, for more or less the same reasons, expression of a fluorescent protein. Its signal is easy to follow in time and intensity, in a non-invasive way. This input-output line is the main backbone of the project. However, without decent control, this system is worthless. First, the project includes a way of filtering noise out of the input signal. Secondly, we want the system to shut down once the infection has been overcome. Therefore, an inverter, a clock and a cell death mechanism have been placed in cascade. That way, when no input signal is present, the inverter makes sure a clock starts and keeps ticking, eventually leading to cell death after some time. And thirdly, it is interesting to be able to shut down and reset the clock upon renewed presence of input signal to overcome a phase of latently present input signal. The quick-witted scientist will of course notice that this system is doomed to fail, as all cells will die on their own. That is why the fourth and last control mechanism is a memory device. This stable switch is activated by the first input signal, and remains in a set on state for the rest of its life. Only in this on state, the clock can start ticking. These control mechanisms are very much dependent on kinetic and other constants. Therefore, proper modeling of this system is indispensable.
