Team:Imperial College London

From 2011.igem.org

(Difference between revisions)
(Undo revision 45433 by Yuanwei (talk))
 
(104 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:Imperial_College_London/Templates/Header}}
{{:Team:Imperial_College_London/Templates/Header}}
-
 
+
<html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 
-
<title>Untitled Document</title>
+
<style type="text/css">
<style type="text/css">
-
<!--
+
 
-
body {
+
/*Example CSS for the two demo scrollers*/
-
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
+
 
-
background: #42413C;
+
#pscroller1{
-
margin: 0;
+
width: 930px;
-
padding: 0;
+
height: 120px;
-
color: #000;
+
border: 1px solid #225323;
 +
padding: 0px;
 +
background-color: white;
}
}
-
/* ~~ Element/tag selectors ~~ */
+
#pscroller1 a{
-
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
+
color: #225323;
-
padding: 0;
+
-
margin: 0;
+
}
}
-
h1, h2, h3, h4, h5, h6, p {
+
 
-
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
+
#pscroller1 h2{
-
padding-right: 15px;
+
color: #000000;
-
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
+
font-style:italic;
}
}
-
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
+
 
-
border: none;
+
#pscroller1 h3{
-
}
+
color: #225323;
-
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
+
text-align:right;
-
a:link {
+
-
color: #009900;
+
-
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
+
-
}
+
-
a:visited {
+
-
color: #006600;
+
-
text-decoration: none;
+
-
}
+
-
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
+
-
text-decoration: none;
+
}
}
-
/* ~~ this fixed width container surrounds all other elements ~~ */
+
 
-
.container {
+
.someclass{ //class to apply to your scroller(s) if desired
-
width: 960px;
+
-
background: #FFF;
+
-
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
+
}
}
-
/* ~~ This is the layout information. ~~
+
</style>
-
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
+
<script type="text/javascript">
-
*/
+
/*Example message arrays for the two demo scrollers*/
-
.content {
+
-
padding: 10px 0;
+
var pausecontent=new Array()
 +
pausecontent[0]='<h2>"Application of indole-3-acetic acid (IAA) or IAA-related metabolites stimulates lateral root (LR) and root hair formation."</h2><h3><a href="" target="_blank">Spaepen S, Vanderleyden J, Remans R (2007)</a></h3>'
 +
pausecontent[1]='<h2>"It is important to note that soil erosion is a world-wide issue and, as such, preventing it or at least helping ameliorate it, would have world-wide impact."</h2><h3><a href="https://2011.igem.org/Team:Imperial_College_London/Human_Implementation" target="_blank">Prof. Stuart John Dunbar, Senior Syngenta Fellow</a></h3>'
 +
pausecontent[2]='<h2>"Plant synthetic biology has been under-appreciated."</h2><h3><a href="http://www.hms.harvard.edu/agingresearch/pages/pamelasilver.htm" target="_blank">Prof. Pamela Silver, Harden Conference 2011</a></h3>'
 +
pausecontent[3]='<h2>"The technology you are describing is indeed promising. However, I also forsee some hurdles which need to be taken into account, such as legislation and acceptance by the consumer."</h2><h3><a href="https://2011.igem.org/Team:Imperial_College_London/Human_Overview" target="_blank">Dr. Frans Tetteroo, Senior Scientist at Incotec</a></h3>'
 +
pausecontent[4]='<h2>"I was really impressed with your project, its really cool how you have so many modules built into one system"</h2><h3><a href="http://igemwatch.net/?p=80" target="_blank">Lars Christian, iGEM Watch</a></h3>'
 +
 
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
 
 +
/***********************************************
 +
* 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.
 +
***********************************************/
 +
 
 +
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)
}
}
-
/* ~~ miscellaneous float/clear classes ~~ */
+
// -------------------------------------------------------------------
-
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
+
// initialize()- Initialize scroller method.
-
float: right;
+
// -Get div objects, set initial positions, start up down animation
-
margin-left: 8px;
+
// -------------------------------------------------------------------
 +
 
 +
pausescroller.prototype.initialize=function(){
 +
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)
}
}
-
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
+
 
-
float: left;
+
 
-
margin-right: 8px;
+
// -------------------------------------------------------------------
 +
// 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)
}
}
-
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
+
else{
-
clear:both;
+
this.getinline(this.hiddendiv, this.visiblediv)
-
height:0;
+
this.swapdivs()
-
font-size: 1px;
+
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
-
line-height: 0px;
+
}
}
-
body,td,th {
 
-
font-family: Calibri;
 
-
font-size: 14px;
 
}
}
-
a:hover {
+
 
-
text-decoration: underline;
+
// -------------------------------------------------------------------
 +
// swapdivs()- Swap between which is the visible and which is the hidden div
 +
// -------------------------------------------------------------------
 +
 
 +
pausescroller.prototype.swapdivs=function(){
 +
var tempcontainer=this.visiblediv
 +
this.visiblediv=this.hiddendiv
 +
this.hiddendiv=tempcontainer
}
}
-
a:active {
+
 
-
text-decoration: none;
+
pausescroller.prototype.getinline=function(div1, div2){
 +
div1.style.top=this.visibledivtop+"px"
 +
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
}
-
h1 {
+
 
-
color: #090;
+
// -------------------------------------------------------------------
 +
// 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()
}
}
-
h2 {
 
-
color: #090;
 
}
}
-
h3 {
+
 
-
color: #090;
+
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
 +
if (tickerobj.currentStyle)
 +
return tickerobj.currentStyle["paddingTop"]
 +
else if (window.getComputedStyle) //if DOM2
 +
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
 +
else
 +
return 0
}
}
-
-->
+
 
-
</style></head>
+
</script>
 +
 
 +
 
 +
<script src="https://2011.igem.org/Team:Imperial_College_London/swfobject?action=raw&ctype=text/js" type="text/javascript"></script>
 +
<script src="https://2011.igem.org/Team:Imperial_College_London/flashgallery?action=raw&ctype=text/js" type="text/javascript"></script>
 +
 
 +
 
 +
</head>
<body>
<body>
-
<div class="container">
+
<table width="975px">
-
  <div class="content">
+
<tr style="text-align:center;" valign="top">
-
    <div class="content">
+
<td style="width:650px;">
-
      <h1>Imperial College London iGEM 2011</h1>
+
<p>If you cannot view the photo gallery below, please click <a href="https://2011.igem.org/Team:Imperial_College_London/Alternative"><b>here</b></a> to view our alternative home page or download the Adobe Flash Player <a href="http://www.adobe.com/support/flashplayer/downloads.html" target="_blank"><b>here</b></a>.</p>
-
      <p>Welcome to the Imperial College London iGEM 2011 website.</p>
+
<div style="margin-left:20px;">
-
<br><br>
+
<script type="text/javascript"> jQuery.flashgallery('https://static.igem.org/mediawiki/2011/c/c0/ArtGallery.swf ', 'https://2011.igem.org/Team:Imperial_College_London/gallery?action=raw&ctype=text/xml ', {width: '630px', height: '550px', background: '#000000'});
-
<h1>Project description</h1>
+
</script>
-
<p>Desertification and top soil erosion are major problems in arid areas where rainfall is infrequent. When it arrives it falls very hard, washing away top soil that is unprotected by foliage. Over-farming and deforestation are the major culprits as the roots that hold the soil down are removed.</p><br>
+
 
-
<p>The goal of this project is to build a microbial based delivery system that will take advantage of auxin's morphogenic abilities and tackle the issue through the medium of plants. We are looking into the use of roots to stabilize the soil.</p>  
+
<div style="font-size:7pt">&copy;copyright <a href="http://flash-gallery.com" target="_blank" title="Flash-Gallery.com - Art Photo Gallery free version">Flash Slideshow by Flash-Gallery.com</a> </div>
 +
<div style="padding-top:20px">&nbsp;</div>
 +
</div>
 +
</td>
 +
 
 +
<td>
 +
 
 +
<a href="https://2011.igem.org/Team:Imperial_College_London/Tour"><img src="https://static.igem.org/mediawiki/2011/b/ba/ICL_btn1.png" width="250px" style="padding:0px 0px 10px 0px;" /></a>
 +
<a href="https://2011.igem.org/Team:Imperial_College_London/Achievements"><img src="https://static.igem.org/mediawiki/2011/7/7d/ICL_btn3.png" width="250px" style="padding:0px 0px 10px 0px;" /></a>
 +
<a href="https://2011.igem.org/Team:Imperial_College_London/Data"><img src="https://static.igem.org/mediawiki/2011/f/f1/ICL_btn2.png" width="250px" style="padding:0px 0px 10px 0px;" /></a>
 +
 
 +
<h2 style="padding-left:0px;">Follow us on</h2>
 +
<a href="http://www.flickr.com/photos/64732447@N05/" target="_new" alt="Flickr"><img src="https://static.igem.org/mediawiki/2011/d/d7/ICL_flickr.png" /></a>
 +
<a href="http://twitter.com/#!/ImperialiGEM11" target="_new" alt="Twitter"><img src="https://static.igem.org/mediawiki/2011/d/d7/ICL_twitter.png" /></a>
 +
<a href="http://imperialigem.blogspot.com/" target="_new" alt="Blog"><img src="https://static.igem.org/mediawiki/2011/7/7d/ICL_blogger.png" /></a>
 +
<a href="http://www.youtube.com/user/ImperialiGEM" target="_new" alt="Youtube"><img src="https://static.igem.org/mediawiki/2011/d/d3/ICL_youtube.png" /></a>
 +
<a href="http://www.spreaker.com/page#!/show/the_radio_igem_show" target="_new" alt="Radio iGEM"><img src="https://static.igem.org/mediawiki/2011/b/b3/ICL_RadioLogo.jpg" width="48px" /></a>
 +
<br/><br/>
 +
 
 +
<object width="300" height="330"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://staticcdn.spreaker.com/swf/player.swf?API_BASE_URL=http%3A%2F%2Fapi.spreaker.com&SITE_BASE_URL=http%3A%2F%2Fwww.spreaker.com&CHAT_BASE_URL=http%3A%2F%2Fpush.spreaker.com&STATION_URL=http%3A%2F%2Fapi.spreaker.com%2Fshow%2F180289%2Fepisode%2Flatest&AUTOPLAY=false&EXTERNAL_INTERFACE=false&DEBUG=false&REFERRER=embedded&EMBEDDED=true" /><embed src="http://staticcdn.spreaker.com/swf/player.swf?API_BASE_URL=http%3A%2F%2Fapi.spreaker.com&SITE_BASE_URL=http%3A%2F%2Fwww.spreaker.com&CHAT_BASE_URL=http%3A%2F%2Fpush.spreaker.com&STATION_URL=http%3A%2F%2Fapi.spreaker.com%2Fshow%2F180289%2Fepisode%2Flatest&AUTOPLAY=false&EXTERNAL_INTERFACE=false&DEBUG=false&REFERRER=embedded&EMBEDDED=true" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="300" height="330"></embed></object>
 +
 
 +
</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/>
 +
<h1>Sponsored by:</h1>
 +
<table width="975px" cellpadding="0px">
 +
<tr>
 +
<td>
 +
<p>
 +
<a href="http://www.wellcome.ac.uk/" target="_new">
 +
<img src="https://static.igem.org/mediawiki/2011/d/d2/ICL_WellcomeTrust.gif" width="230" />  
 +
</a>
 +
<a href="http://www.eurofinsdna.com" target="_new">  
 +
<img src="https://static.igem.org/mediawiki/2011/0/00/ICL_Eurofins.jpg" width="230" style="padding-left:30px;" />
 +
</a>
 +
<a href="http://www.neb.com" target="_new">
 +
<img src="https://static.igem.org/mediawiki/2011/4/4d/ICL_NEB.jpg" width="230" style="padding-left:20px;" />
 +
</a>
 +
<a href="http://www.qiagen.com" target="_new">
 +
<img src="https://static.igem.org/mediawiki/2011/8/80/ICL_Qiagen.jpg" width="130" style="padding-left:20px;" />
 +
</a>
 +
</p>
 +
</td>
 +
</tr>
-
      <p>
+
</table>
-
        <iframe width="560" height="349" src="http://www.youtube.com/embed/klKg9Q1OS2g?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
+
-
      </p>
+
-
      <!-- end .content -->
+
-
    </div>
+
-
    <!-- end .content --></div>
+
-
  <!-- end .container --></div>
+
</body>
</body>
</html>
</html>

Latest revision as of 18:34, 16 October 2011



If you cannot view the photo gallery below, please click here to view our alternative home page or download the Adobe Flash Player here.

 

Follow us on

Sponsored by:

Retrieved from "http://2011.igem.org/Team:Imperial_College_London"