Team:TU-Delft/All

From 2013.igem.org

(Difference between revisions)
 
(74 intermediate revisions not shown)
Line 5: Line 5:
-
 
+
<div style="margin-left:30px;margin-right:30px; width:900px;float:left;"> 
-
 
+
<h2 align="center">Planning</h2>
<html>
<html>
-
    <style type="text/css">
 
-
  body{
 
-
background-image:url('../../images/heading3.gif');
 
-
background-repeat:no-repeat;
 
-
padding-top:80px;
 
-
}
 
-
#dhtmlgoodies_slideshow{
 
-
width:600px; /* Total width of slideshow */
 
-
}
 
-
 
-
#previewPane{
 
-
border:1px solid #CCCCCC;
 
-
margin-bottom:10px;
 
-
text-align:center;
 
-
vertical-align:middle;
 
-
padding-top:10px;
 
-
position:relative;
+
<p align="justify">
-
+
Project 'Peptidor' deals with various cloning schemes into <i>E.coli</i> cells. They are made to sense Auto-inducing peptides (AIPs) from the <i>Staphylococcus aureus</i> and then start producing Antimicrobial peptides in order to kill the <i>Staphylococcus aureus</i>. Several bio-bricks from the parts registry were used to clone the <i>E. coli</i>. There are many test constructs made in order to test and characterize each module. Both the detailed cloning strategies related to each module and the final constructs can be viewed in the following links:
-
/* CSS HACK */
+
-
height: 432px; /* IE 5.x */
+
-
height/* */:/**/420px; /* Other browsers */
+
-
height: /**/420px;
+
-
+
-
}
+
-
#previewPane img{
+
-
line-height:400px;
+
-
}
+
-
#previewPane #largeImageCaption{ /* CSS styling of image caption below large image */
+
-
font-style:italic;
+
-
text-align:center;
+
-
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
+
-
font-size:0.9em;
+
-
}
+
-
#galleryContainer{
+
-
+
-
height:102px; /* Height of the images + 2 */
+
-
border:1px solid #CCCCCC;
+
-
position:relative;
+
-
overflow:hidden;
+
-
padding:1px;
+
-
+
-
/* CSS HACK */
+
-
height: 104px; /* IE 5.x - Added 2 pixels for border left and right */
+
-
height/* */:/**/102px; /* Other browsers */
+
-
height: /**/102px;
+
-
+
-
}
+
-
#arrow_left{
+
-
position:absolute;
+
-
left:0px;
+
-
z-index:10;
+
-
background-color: #FFF;
+
-
padding:1px;
+
-
}
+
-
#arrow_right{
+
-
position:absolute;
+
-
right:0px;
+
-
z-index:10;
+
-
background-color: #FFF;
+
-
padding:1px;
+
-
}
+
-
#theImages{
+
-
position:absolute;
+
-
height:100px;
+
-
left:40px;
+
-
width:100000px;
+
-
+
-
}
+
-
#theImages #slideEnd{
+
-
float:left;
+
-
}
+
-
#theImages img{
+
-
float:left;
+
-
padding:1px;
+
-
filter: alpha(opacity=50);
+
-
opacity: 0.5;
+
-
cursor:pointer;
+
-
border:0px;
+
-
}
+
-
#waitMessage{
+
<ul style="list-style-type: circle">
-
display:none;
+
<li><a href="https://2013.igem.org/Team:TU-Delft/PeptideProduction" style="text-decoration: none"><font color="#0080FF" size="3">Peptide Production Cloning Schemes</font></a></li>
-
position:absolute;
+
<li><a href="https://2013.igem.org/Team:TU-Delft/KillSwitchPlanning" style="text-decoration: none"><font color="#0080FF" size="3">Kill Switch Cloning Schemes</font></a></li>
-
left:200px;
+
<li><a href="https://2013.igem.org/Team:TU-Delft/Sensing Device" style="text-decoration: none"><font color="#0080FF" size="3">Sensing Device Cloning Schemes</font></a></li>
-
top:150px;
+
<li><a href="https://2013.igem.org/Team:TU-Delft/FinalConstructs" style="text-decoration: none"><font color="#0080FF" size="3">Final Constructs</font></a></li>
-
background-color:#FFF;
+
<li><a href="https://2013.igem.org/Team:TU-Delft/All" style="text-decoration: none"><font color="#0080FF" size="3">All Cloning Schemes</font></a> </li>
-
border:3px double #000;
+
-
padding:4px;
+
-
color:#555;
+
-
font-size:0.9em;
+
-
font-family:arial;
+
-
}
+
-
+
-
#theImages .imageCaption{
+
-
display:none;
+
-
}
+
-
</style>
+
-
<script type="text/javascript" >
+
</ul>
 +
</p>
-
var displayWaitMessage=true; // Display a please wait message while images are loading?
+
</html>
-
var activeImage = false;
+
<html>
-
var imageGalleryLeftPos = false;
+
    <style type="text/css">
-
var imageGalleryWidth = false;
+
* {margin: 0; padding: 0;}
-
var imageGalleryObj = false;
+
-
var maxGalleryXPos = false;
+
-
var slideSpeed = 0;
+
-
var imageGalleryCaptions = new Array();
+
-
function startSlide(e)
+
-
{
+
-
if(document.all)e = event;
+
-
var id = this.id;
+
-
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';
+
-
if(this.id=='arrow_right'){
+
-
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
+
-
slideSpeed = -1*slideSpeedMultiply;
+
-
slideSpeed = Math.max(-10,slideSpeed);
+
-
}else{
+
-
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
+
-
slideSpeed = 1*slideSpeedMultiply;
+
-
slideSpeed = Math.min(10,slideSpeed);
+
-
if(slideSpeed<0)slideSpeed=10;
+
-
}
+
-
}
+
-
function releaseSlide()
+
-
{
+
.slider{
-
var id = this.id;
+
width: 700px; /*Same as width of the large image*/
-
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
+
position: relative;
-
slideSpeed=0;
+
/*Instead of height we will use padding*/
-
}
+
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
 +
 +
 +
 +
/*Lets add a shadow*/
 +
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
 +
}
 +
 +
 +
/*Last thing remaining is to add transitions*/
 +
.slider>img{
 +
position: absolute;
 +
left: 5px; top: 5px;
 +
transition: all 0.5s;
 +
}
 +
 +
.slider input[name='slide_switch'] {
 +
display: none;
 +
}
 +
 +
.slider label {
 +
/*Lets add some spacing for the thumbnails*/
 +
margin: 10px 0 0 815px;
 +
border: 3px solid #999;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
     
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
 +
}
 +
 +
.slider label img{
 +
display: block;
 +
}
 +
 +
/*Time to add the click effects*/
 +
.slider input[name='slide_switch']:checked+label {
 +
border-color: #666;
 +
opacity: 1;
 +
}
 +
/*Clicking any thumbnail now should change its opacity(style)*/
 +
/*Time to work on the main images*/
 +
.slider input[name='slide_switch'] ~ img {
 +
opacity: 0;
 +
transform: scale(1.1);
 +
}
 +
/*That hides all main images at a 110% size
 +
On click the images will be displayed at normal size to complete the effect
 +
*/
 +
.slider input[name='slide_switch']:checked+label+img {
 +
opacity: 1;
 +
transform: scale(1);
 +
}
 +
</style>
 +
</html>
-
function gallerySlide()
+
<html>
-
{
+
-
if(slideSpeed!=0){
+
-
var leftPos = imageGalleryObj.offsetLeft;
+
-
leftPos = leftPos/1 + slideSpeed;
+
-
if(leftPos>maxGalleryXPos){
+
-
leftPos = maxGalleryXPos;
+
-
slideSpeed = 0;
+
-
}
 
-
if(leftPos<minGalleryXPos){
 
-
leftPos = minGalleryXPos;
 
-
slideSpeed=0;
 
-
}
 
-
imageGalleryObj.style.left = leftPos + 'px';
+
<div class="slider">
-
}
+
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
-
setTimeout('gallerySlide()',20);
+
<label for="id1">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e3/Page1Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2013/e/e3/Page1Cloning.jpg
 +
" width="700px"/>
 +
 +
<!--Lets show the second image by default on page load-->
 +
<input type="radio" name="slide_switch" id="id2" />
 +
<label for="id2">
 +
<img src="https://static.igem.org/mediawiki/2013/9/90/Page2Cloning.jpg
 +
"width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/9/90/Page2Cloning.jpg
 +
" width="700px" />
 +
        <input type="radio" name="slide_switch" id="id3" />
 +
<label for="id3">
 +
<img src="https://static.igem.org/mediawiki/2013/1/1d/Page3Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/1/1d/Page3Cloning.jpg
 +
"width="700px" />
 +
<input type="radio" name="slide_switch" id="id4" />
 +
        <label for="id4">
 +
<img src="https://static.igem.org/mediawiki/2013/5/52/Page4Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/5/52/Page4Cloning.jpg
 +
" width="700px" />
-
}
+
<input type="radio" name="slide_switch" id="id5" />
 +
        <label for="id5">
 +
<img src="https://static.igem.org/mediawiki/2013/5/55/Page5Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/5/55/Page5Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id6" />
 +
        <label for="id6">
 +
<img src="https://static.igem.org/mediawiki/2013/0/0b/Page6Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/0/0b/Page6Cloning.jpg
-
function showImage()
+
" width="700px" />
-
{
+
<input type="radio" name="slide_switch" id="id7" />
-
if(activeImage){
+
        <label for="id7">
-
activeImage.style.filter = 'alpha(opacity=50)';
+
<img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
-
activeImage.style.opacity = 0.5;
+
"  width="50px" height="63px" />
-
}
+
</label>
-
this.style.filter = 'alpha(opacity=100)';
+
        <img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
-
this.style.opacity = 1;
+
" width="700px" />
-
activeImage = this;
+
<input type="radio" name="slide_switch" id="id8" />
-
}
+
        <label for="id8">
 +
<img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id9" />
 +
        <label for="id9">
 +
<img src="https://static.igem.org/mediawiki/2013/7/75/Page9Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/7/75/Page9Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id10" />
 +
        <label for="id10">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e7/Page10Cloning.jpg"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/e/e7/Page10Cloning.jpg" width="700px" />
 +
</div>
-
function initSlideShow()
+
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
-
{
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
document.getElementById('arrow_left').onmousemove = startSlide;
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
document.getElementById('arrow_left').onmouseout = releaseSlide;
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
document.getElementById('arrow_right').onmousemove = startSlide;
+
-
document.getElementById('arrow_right').onmouseout = releaseSlide;
+
-
 
-
 
-
 
-
imageGalleryObj = document.getElementById('theImages');
 
-
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
 
-
var galleryContainer = document.getElementById('galleryContainer');
 
-
imageGalleryWidth = galleryContainer.offsetWidth - 80;
 
-
maxGalleryXPos = imageGalleryObj.offsetLeft;
 
-
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
 
-
 
-
if (navigator.userAgent.indexOf('MSIE') >= 0) {
 
-
var arrowWidth = document.getElementById('arrow_left').offsetWidth;
 
-
var el = document.createElement('div');
 
-
el.style.position = 'absolute';
 
-
el.style.left = arrowWidth + 'px';
 
-
el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
 
-
el.style.overflow = 'hidden';
 
-
el.style.height = '100%';
 
-
 
-
document.getElementById('galleryContainer').appendChild(el);
 
-
el.appendChild(document.getElementById('theImages'));
 
-
}
 
-
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
 
-
for(var no=0;no<slideshowImages.length;no++){
 
-
slideshowImages[no].onmouseover = showImage;
 
-
}
 
-
 
-
var divs = imageGalleryObj.getElementsByTagName('DIV');
 
-
for(var no=0;no<divs.length;no++){
 
-
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
 
-
}
 
-
gallerySlide();
 
-
}
 
-
 
-
function showPreview(imagePath,imageIndex){
 
-
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
 
-
if(subImages.length==0){
 
-
var img = document.createElement('IMG');
 
-
document.getElementById('previewPane').appendChild(img);
 
-
}else img = subImages[0];
 
-
 
-
if(displayWaitMessage){
 
-
document.getElementById('waitMessage').style.display='inline';
 
-
}
 
-
document.getElementById('largeImageCaption').style.display='none';
 
-
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
 
-
img.src = imagePath;
 
-
 
-
}
 
-
function hideWaitMessageAndShowCaption(imageIndex)
 
-
{
 
-
document.getElementById('waitMessage').style.display='none';
 
-
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
 
-
document.getElementById('largeImageCaption').style.display='block';
 
-
 
-
}
 
-
window.onload = initSlideShow;
 
-
 
-
</script>
 
-
</html>
 
-
<html>
 
-
 
-
<div id="theImages">
 
-
<a href="#" onclick="showPreview('images/image1_big.jpg');return false"><img src="https://static.igem.org/mediawiki/2013/3/38/Page1.jpg" width="150px"; height="150px";></a>
 
-
 
-
<div id="previewPane">
 
-
      <img src="https://static.igem.org/mediawiki/2013/3/38/Page1.jpg">
 
-
</div>
 
</html>
</html>

Latest revision as of 10:38, 29 September 2013


Planning

Project 'Peptidor' deals with various cloning schemes into E.coli cells. They are made to sense Auto-inducing peptides (AIPs) from the Staphylococcus aureus and then start producing Antimicrobial peptides in order to kill the Staphylococcus aureus. Several bio-bricks from the parts registry were used to clone the E. coli. There are many test constructs made in order to test and characterize each module. Both the detailed cloning strategies related to each module and the final constructs can be viewed in the following links:















































Retrieved from "http://2013.igem.org/Team:TU-Delft/All"