"
Team:KULeuven/Tools
From 2008.igem.org
(Difference between revisions)
(→Navigation Bar) |
m |
||
| Line 1: | Line 1: | ||
{{:Team:KULeuven/Tools/Navigation_Bar}} | {{:Team:KULeuven/Tools/Navigation_Bar}} | ||
| + | |||
| + | [[Image:kulbanner.jpg|960px]] | ||
Under Construction... | Under Construction... | ||
Revision as of 19:33, 10 July 2008
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>
Under Construction...
Contents |
Templates
General
Example Usage:
{{:Team:KULeuven/Tools/Navigation_Bar}}
The navigation bar used throughout the wiki. The template contains inline CSS and Javascript.
In general, one box in the bar is encoded as:
<!-- ... SECTION -->
<li><a href="http://... (menu http address)"
onmouseover="mopen('m4')" onmouseout="mclosetime()">... (menu name)</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://... (menuitem http address)</a>
<a href="http://... (menuitem http address)</a>
...
</div>
</li>
The code of the old navigation bar is:
{|style="border-spacing:6px; text-align:center; color:white" width="960px"
|-bgcolor="#003E81" padding="3"
![[Team:KULeuven|Home]]
![[Team:KULeuven/Team|The Team]]
![[Team:KULeuven/Road Map|Road Map]]
![[Team:KULeuven/Project|The Project]]
![[Team:KULeuven/Parts|Parts Submitted to the Registry]]
![[Team:KULeuven/Modeling|Modeling]]
![[Team:KULeuven/Notebook|Notebook]]
|}
New Day
Example Usage:
{{#calendar: query=preload=:Team:Kuleuven/Tools/New_Day}}
The day template that is preloaded into a notebook day. The result can be seen in the Notebook section, when you
click on an unmodified day, you'll get the edit screen, prefilled with the contents of the New_Day template.
Lab Templates
PCR sheet
Example Usage:
{{:Team:KULeuven/Tools/PCR
|tanneal=55
|telong=2'30"
|ncycles=30
|buffer=5x 10μL
|mgcl=10μM 0μL
|dntp=10μM 1μL
|fwprimername=6 LacZ-Fw
|fwprimerconc=10μM 2.5μL
|rvprimername=7 LacZ-Rv
|rvprimerconc=10μM 2.5μL
|water=34μL
|polymerase=Taq 0.5μL
|dna=0.5μL of E. coli DNA extract
|size=952bp
|success=YES/NO
|image=pcrproducts_GE.jpg
|lane=3+4
}}
Result:
| PCR: | |||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
| |||||||||||||||||||||||||||||||||||||||
Digestion sheet
Example Usage:
{{:Team:KULeuven/Tools/Digestion
|nr=D12
|product=Cre ORF
|matrix=pJ61047
|enz1=Pst1
|enz2=Xba1
|size=1063bp
|desc=Cre ORF extracted for further usage
}}
Result:
| Digestion Products | ||||||
|---|---|---|---|---|---|---|
| Number | Product Name | Matrix Name | Enzyme 1 | Enzyme 2 | Size | Description |
| D12 | Cre ORF | pJ61047 | XbaI | PstI | 1063bp | Cre ORF extracted for further usage |
Ligation sheet
Example Usage:
{{:Team:KULeuven/Tools/Ligation
|nr=L21
|insert=D12 Cre ORF
|insert_vol=6µL
|vector=D1 pJ23100
|vector_vol=2µL
|comm=construction of BioBrick: Cre-recombinase under control of strong promotor
|ncol=30
}}
Result
| Ligations | ||||||
|---|---|---|---|---|---|---|
| Number | Insert | Insert Volume (µL) | Vector | Vector Volume (µL) | Comments | Number of colonies |
| L21 | D12 Cre ORF | 6µL | D1 pJ23100 | 2µL | construction of BioBrick: Cre-recombinase under control of strong promotor | 30 |
96-Well Plate
Example Usage:
{{:Team:KULeuven/Tools/96-well
|title=Induced Response
|A1=LB + 0µM IPTG
|A2=LB + 0µM IPTG
|A3=LB + 5µM IPTG
|A4=LB + 5µM IPTG
|A5=LB + 10µM IPTG
|A6=LB + 10µM IPTG
|A7=etc
|B1=LB 2 + 0µM IPTG
|C1=LB 3 + 0µM IPTG
|D1=LB 4 + 0µM IPTG
|E1=LB 5 + 0µM IPTG
|F1=etc
}}
Result
| 96-Well Plate: Induced Response | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | |
| A | LB + 0µM IPTG | LB + 0µM IPTG | LB + 5µM IPTG | LB + 5µM IPTG | LB + 10µM IPTG | LB + 10µM IPTG | etc | / | / | / | / | / |
| B | LB 2 + 0µM IPTG | / | / | / | / | / | / | / | / | / | / | / |
| C | LB 3 + 0µM IPTG | / | / | / | / | / | / | / | / | / | / | / |
| D | LB 4 + 0µM IPTG | / | / | / | / | / | / | / | / | / | / | / |
| E | LB 5 + 0µM IPTG | / | / | / | / | / | / | / | / | / | / | / |
| F | etc | / | / | / | / | / | / | / | / | / | / | / |
| G | / | / | / | / | / | / | / | / | / | / | / | / |
| H | / | / | / | / | / | / | / | / | / | / | / | / |
Collection Templates
Primer Collection
Primer Collection Wiki Page
To start the primer collection wiki page, simply create a new page and add following lines:
{|width="960" cellspacing="1"
! style="background:#003E81; color: white" colspan="5" | Table of Oligos
|-style="background:#66FFCC" align="center"
| width="40pt" | Number
| width="80pt" | Name
| width="500pt" | Sequence
| width="30pt" | Length
| width="300pt" | Comments
...
|}
Where you see the dots the template codelines will be added to. The dots will be replaced by:
{{:Team:KULeuven/Tools/Oligo ...}}
{{:Team:KULeuven/Tools/Oligo ...}}
Example Usage
Result
