Team:Imperial College London
From 2011.igem.org
(Difference between revisions)
(60 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | ||
+ | /*Example CSS for the two demo scrollers*/ | ||
+ | |||
+ | #pscroller1{ | ||
+ | width: 930px; | ||
+ | height: 120px; | ||
+ | border: 1px solid #225323; | ||
+ | padding: 0px; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | #pscroller1 a{ | ||
+ | color: #225323; | ||
+ | } | ||
+ | |||
+ | #pscroller1 h2{ | ||
+ | color: #000000; | ||
+ | font-style:italic; | ||
+ | } | ||
+ | |||
+ | #pscroller1 h3{ | ||
+ | color: #225323; | ||
+ | text-align:right; | ||
+ | } | ||
+ | |||
+ | |||
+ | .someclass{ //class to apply to your scroller(s) if desired | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | /*Example message arrays for the two demo scrollers*/ | ||
+ | |||
+ | 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) | ||
+ | } | ||
+ | |||
+ | // ------------------------------------------------------------------- | ||
+ | // initialize()- Initialize scroller method. | ||
+ | // -Get div objects, set initial positions, start up down animation | ||
+ | // ------------------------------------------------------------------- | ||
+ | |||
+ | 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) | ||
+ | } | ||
+ | |||
+ | |||
+ | // ------------------------------------------------------------------- | ||
+ | // 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) | ||
+ | this.swapdivs() | ||
+ | setTimeout(function(){scrollerinstance.setmessage()}, this.delay) | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // ------------------------------------------------------------------- | ||
+ | // 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 | ||
+ | } | ||
+ | |||
+ | pausescroller.prototype.getinline=function(div1, div2){ | ||
+ | div1.style.top=this.visibledivtop+"px" | ||
+ | div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" | ||
+ | } | ||
+ | |||
+ | // ------------------------------------------------------------------- | ||
+ | // 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() | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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 | ||
+ | } | ||
+ | |||
+ | </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> | </head> | ||
+ | |||
<body> | <body> | ||
<table width="975px"> | <table width="975px"> | ||
+ | <tr style="text-align:center;" valign="top"> | ||
+ | <td style="width:650px;"> | ||
+ | <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> | ||
+ | <div style="margin-left:20px;"> | ||
+ | <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'}); | ||
+ | </script> | ||
- | < | + | <div style="font-size:7pt">©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"> </div> |
- | < | + | </div> |
</td> | </td> | ||
- | |||
- | + | <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> | </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> | </td> | ||
</tr> | </tr> | ||
+ | </table> | ||
+ | <br/> | ||
+ | <h1>Sponsored by:</h1> | ||
+ | <table width="975px" cellpadding="0px"> | ||
<tr> | <tr> | ||
- | <td | + | <td> |
- | + | ||
<p> | <p> | ||
<a href="http://www.wellcome.ac.uk/" target="_new"> | <a href="http://www.wellcome.ac.uk/" target="_new"> |
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. ©copyright Flash Slideshow by Flash-Gallery.com
|
Follow us on |