Team:TU-Delft/All

From 2013.igem.org

(Difference between revisions)
 
(96 intermediate revisions not shown)
Line 6: Line 6:
<div style="margin-left:30px;margin-right:30px; width:900px;float:left;">   
<div style="margin-left:30px;margin-right:30px; width:900px;float:left;">   
-
<h2 align="center"></h2>
+
<h2 align="center">Planning</h2>
-
 
+
<html>
<html>
-
<head>
 
-
<style type="text/css">
 
-
/*Example CSS for the two demo scrollers*/
 
-
#pscroller1{
+
<p align="justify">
-
width: 930px;
+
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:
-
height: 120px;
+
-
border: 1px solid #225323;
+
-
padding: 0px;
+
-
background-color: white;
+
-
}
+
-
#pscroller1 a{
+
<ul style="list-style-type: circle">
-
color: #225323;
+
<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>
 +
<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>
 +
<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>
 +
<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>
-
#pscroller1 h2{
+
</ul>
-
color: #000000;
+
</p>
-
font-style:italic;
+
-
}
+
-
#pscroller1 h3{
+
</html>
-
color: #225323;
+
-
text-align:right;
+
-
}
+
-
.someclass{ //class to apply to your scroller(s) if desired
+
<html>
-
}
+
    <style type="text/css">
 +
* {margin: 0; padding: 0;}
-
</style>
+
-
 
+
.slider{
-
 
+
width: 700px; /*Same as width of the large image*/
-
 
+
position: relative;
-
<script type="text/javascript">
+
/*Instead of height we will use padding*/
-
 
+
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
-
/***********************************************
+
-
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
+
-
* This notice MUST stay intact for legal use
+
-
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
+
/*Lets add a shadow*/
-
***********************************************/
+
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
-
 
+
-
function pausescroller(content, divId, divClass, delay){
+
-
this.content=content //message array content
+
-
this.tickerid=divId //ID of ticker div to display information
+
-
this.delay=delay //Delay between msg change, in miliseconds.
+
-
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
+
-
this.hiddendivpointer=1 //index of message array for hidden div
+
-
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
+
-
var scrollerinstance=this
+
-
if (window.addEventListener) //run onload in DOM2 browsers
+
-
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
+
-
else if (window.attachEvent) //run onload in IE5.5+
+
-
window.attachEvent("onload", function(){scrollerinstance.initialize()})
+
-
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
+
-
setTimeout(function(){scrollerinstance.initialize()}, 500)
+
}
}
-
 
+
-
// -------------------------------------------------------------------
+
-
// initialize()- Initialize scroller method.
+
/*Last thing remaining is to add transitions*/
-
// -Get div objects, set initial positions, start up down animation
+
.slider>img{
-
// -------------------------------------------------------------------
+
position: absolute;
-
 
+
left: 5px; top: 5px;
-
pausescroller.prototype.initialize=function(){
+
transition: all 0.5s;
-
this.tickerdiv=document.getElementById(this.tickerid)
+
-
this.visiblediv=document.getElementById(this.tickerid+"1")
+
-
this.hiddendiv=document.getElementById(this.tickerid+"2")
+
-
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
+
-
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
+
-
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
+
-
this.getinline(this.visiblediv, this.hiddendiv)
+
-
this.hiddendiv.style.visibility="visible"
+
-
var scrollerinstance=this
+
-
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
+
-
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
+
-
if (window.attachEvent) //Clean up loose references in IE
+
-
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
+
-
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
+
}
}
-
 
+
-
 
+
.slider input[name='slide_switch'] {
-
// -------------------------------------------------------------------
+
display: none;
-
// animateup()- Move the two inner divs of the scroller up and in sync
+
-
// -------------------------------------------------------------------
+
-
 
+
-
pausescroller.prototype.animateup=function(){
+
-
var scrollerinstance=this
+
-
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
+
-
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
+
-
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
+
-
setTimeout(function(){scrollerinstance.animateup()}, 50)
+
}
}
-
else{
+
-
this.getinline(this.hiddendiv, this.visiblediv)
+
.slider label {
-
this.swapdivs()
+
/*Lets add some spacing for the thumbnails*/
-
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
+
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*/
-
// swapdivs()- Swap between which is the visible and which is the hidden div
+
.slider input[name='slide_switch']:checked+label {
-
// -------------------------------------------------------------------
+
border-color: #666;
-
 
+
opacity: 1;
-
pausescroller.prototype.swapdivs=function(){
+
-
var tempcontainer=this.visiblediv
+
-
this.visiblediv=this.hiddendiv
+
-
this.hiddendiv=tempcontainer
+
}
}
-
 
+
/*Clicking any thumbnail now should change its opacity(style)*/
-
pausescroller.prototype.getinline=function(div1, div2){
+
/*Time to work on the main images*/
-
div1.style.top=this.visibledivtop+"px"
+
.slider input[name='slide_switch'] ~ img {
-
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
+
opacity: 0;
-
}
+
transform: scale(1.1);
-
 
+
-
// -------------------------------------------------------------------
+
-
// setmessage()- Populate the hidden div with the next message before it's visible
+
-
// -------------------------------------------------------------------
+
-
 
+
-
pausescroller.prototype.setmessage=function(){
+
-
var scrollerinstance=this
+
-
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
+
-
setTimeout(function(){scrollerinstance.setmessage()}, 100)
+
-
else{
+
-
var i=this.hiddendivpointer
+
-
var ceiling=this.content.length
+
-
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
+
-
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
+
-
this.animateup()
+
}
}
 +
/*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>
-
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
+
<html>
-
if (tickerobj.currentStyle)
+
-
return tickerobj.currentStyle["paddingTop"]
+
-
else if (window.getComputedStyle) //if DOM2
+
-
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
+
-
else
+
-
return 0
+
-
}
+
-
</script>
 
 +
<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" />
-
<script src="https://2011.igem.org/Team:Imperial_College_London/swfobject?action=raw&ctype=text/js" type="text/javascript"></script>
+
<input type="radio" name="slide_switch" id="id5" />
-
<script src="https://2011.igem.org/Team:Imperial_College_London/flashgallery?action=raw&ctype=text/js" type="text/javascript"></script>
+
        <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" />
-
</head>
+
<input type="radio" name="slide_switch" id="id7" />
-
 
+
        <label for="id7">
-
<body>
+
<img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
-
 
+
"  width="50px" height="63px" />
-
<table width="975px">
+
</label>
-
<tr style="text-align:center;" valign="top">
+
        <img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
-
<td style="width:650px;">
+
" width="700px" />
-
 
+
<input type="radio" name="slide_switch" id="id8" />
-
<div style="margin-left:20px;">
+
        <label for="id8">
-
<script type="text/javascript"> jQuery.flashgallery('https://static.igem.org/mediawiki/2011/c/c0/ArtGallery.swf ', 'https://2013.igem.org/Team:TU-Delft/PlanningGallery?action=raw&ctype=text/xml ', {width: '630px', height: '550px', background: '#000000'});
+
<img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
-
</script>
+
" width="50px" height="63px" />
-
 
+
</label>
-
 
+
        <img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
-
<div style="padding-top:20px">&nbsp;</div>
+
" 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>
</div>
-
</td>
 
-
 
-
<td>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
</td>
 
-
</tr>
 
-
</table>
 
-
 
-
<table width="975px">
 
-
<tr>
 
-
<td style="padding:0px 0px 0px 18px;">
 
-
 
-
<script type="text/javascript">
 
-
 
-
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
 
-
 
-
new pausescroller(pausecontent, "pscroller1", "someclass", 5000)
 
-
 
-
</script>
 
-
</td>
 
-
</tr>
 
-
</table>
 
-
 
-
<br/>
 
 +
<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>
-
</table>
 
-
</body>
 
</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"