Team:TU-Delft/All

From 2013.igem.org

(Difference between revisions)
 
(79 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>
-
<head>
 
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
-
<script type="text/javascript">
 
-
$(document).ready(function() {
 
-
//Set Default State of each portfolio piece
+
<p align="justify">
-
$(".paging").show();
+
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:
-
$(".paging a:first").addClass("active");
+
-
+
-
//Get size of images, how many there are, then determin the size of the image reel.
+
-
var imageWidth = $(".window").width();
+
-
var imageSum = $(".image_reel img").size();
+
-
var imageReelWidth = imageWidth * imageSum;
+
-
+
-
//Adjust the image reel to its new size
+
-
$(".image_reel").css({'width' : imageReelWidth});
+
-
+
-
//Paging + Slider Function
+
-
rotate = function(){
+
-
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
+
-
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
+
-
$(".paging a").removeClass('active'); //Remove all active class
+
<ul style="list-style-type: circle">
-
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
+
<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>
-
+
<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>
-
//Slider Animation
+
<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>
-
$(".image_reel").animate({
+
<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>
-
left: -image_reelPosition
+
<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>
-
}, 500 );
+
 
-
+
</ul>
-
};
+
</p>
-
+
-
//Rotation + Timing Event
+
-
rotateSwitch = function(){
+
-
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
+
-
$active = $('.paging a.active').next();
+
-
if ( $active.length === 0) { //If paging reaches the end...
+
-
$active = $('.paging a:first'); //go back to first
+
-
}
+
-
rotate(); //Trigger the paging and slider function
+
-
}, 5000); //Timer speed in milliseconds (3 seconds)
+
-
};
+
-
+
-
rotateSwitch(); //Run function on launch
+
-
+
-
//On Hover
+
-
$(".image_reel a").hover(function() {
+
-
clearInterval(play); //Stop the rotation
+
-
}, function() {
+
-
rotateSwitch(); //Resume rotation
+
-
});
+
-
+
-
//On Click
+
-
$(".paging a").click(function() {
+
-
$active = $(this); //Activate the clicked paging
+
-
//Reset Timer
+
-
clearInterval(play); //Stop the rotation
+
-
rotate(); //Trigger rotation immediately
+
-
rotateSwitch(); // Resume rotation
+
-
return false; //Prevent browser jump to link anchor
+
-
});
+
-
+
-
});
+
-
</script>
+
 +
</html>
-
<style>
+
 
-
/*--Main Container--*/
+
<html>
-
.main_view {
+
    <style type="text/css">
-
float: left;
+
* {margin: 0; padding: 0;}
-
position: relative;
+
 
-
border: 2px solid black;
+
-
width: 480px;
+
.slider{
-
        height:574px;
+
width: 700px; /*Same as width of the large image*/
-
}
+
-
/*--Window/Masking Styles--*/
+
-
.window {
+
-
height:574px; width: 480px;
+
-
overflow: hidden; /*--Hides anything outside of the set width/height--*/
+
position: relative;
position: relative;
 +
/*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);
}
}
-
.image_reel {
+
 +
 +
/*Last thing remaining is to add transitions*/
 +
.slider>img{
position: absolute;
position: absolute;
-
top: 0; left: 0;
+
left: 5px; top: 5px;
 +
transition: all 0.5s;
}
}
-
.image_reel img {float: left;}
+
-
 
+
.slider input[name='slide_switch'] {
-
/*--Paging Styles--*/
+
display: none;
-
.paging {
+
-
position: absolute;
+
-
bottom: -50px; right: 330px;
+
-
width: 170px; height:47px;
+
-
z-index: 100; /*--Assures the paging stays on the top layer--*/
+
-
text-align: center;
+
-
line-height: 40px;
+
-
background: url(paging_bg2.png) no-repeat;
+
-
display: none; /*--Hidden by default, will be later shown with jQuery--*/
+
}
}
-
.paging a {
+
-
padding: 5px;
+
.slider label {
-
text-decoration: none;
+
/*Lets add some spacing for the thumbnails*/
-
color: #fff;
+
margin: 10px 0 0 815px;
 +
border: 3px solid #999;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
     
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
}
}
-
.paging a.active {
+
-
font-weight: bold;
+
.slider label img{
-
background: #920000;
+
display: block;
-
border: 1px solid #610000;
+
}
-
-moz-border-radius: 3px;
+
-
-khtml-border-radius: 3px;
+
/*Time to add the click effects*/
-
-webkit-border-radius: 3px;
+
.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);
}
}
-
.paging a:hover {font-weight: bold;}
 
</style>
</style>
-
</head>
+
</html>
 +
<html>
-
<body>
 
-
<div class="main_view">
 
-
    <div class="window">
 
-
        <div class="image_reel">
 
-
                    <img src="https://static.igem.org/mediawiki/2013/3/38/Page1.jpg" alt="" />
 
-
                    <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a>
 
-
        </div>
 
-
    </div>
 
-
    <div class="paging">
 
-
        <a href="#" rel="1">1</a>
 
-
        <a href="#" rel="2">2</a>
 
-
        <a href="#" rel="3">3</a>
 
-
        <a href="#" rel="4">4</a>
 
-
    </div>
 
-
</div>
 
 +
<div class="slider">
 +
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
 +
<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
 +
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id7" />
 +
        <label for="id7">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
 +
" width="700px" />
 +
<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>
-
</body>
+
<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>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</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"