Team:ETH Zurich/Templates/Header
From 2011.igem.org
(Difference between revisions)
(141 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | |
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> | |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6. | + | <script type="text/javascript" src="/wiki/images/c/c4/Jquery.swfobject.1-1-1.min.txt"></script> |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8. | + | <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script> |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
<script type="text/javascript"> | <script type="text/javascript"> | ||
var colors = new Array(); | var colors = new Array(); | ||
colors["overview"] = "#548C82"; | colors["overview"] = "#548C82"; | ||
colors["biology"] = "#31695E"; | colors["biology"] = "#31695E"; | ||
+ | colors["process"] = "#26584F"; | ||
colors["modeling"] = "#1A473F"; | colors["modeling"] = "#1A473F"; | ||
colors["achievements"] = "#09241F"; | colors["achievements"] = "#09241F"; | ||
colors["team"] = "#000D0A"; | colors["team"] = "#000D0A"; | ||
+ | |||
+ | var backgrounds = new Array(); | ||
+ | backgrounds["overview"] = "/wiki/images/e/e2/ETHZ-bg-overview.png"; | ||
+ | backgrounds["biology"] = "/wiki/images/0/03/ETHZ-bg-biology.png"; | ||
+ | backgrounds["process"] = "/wiki/images/a/ac/ETHZ-bg-process.png"; | ||
+ | backgrounds["modeling"] = "/wiki/images/b/b8/ETHZ-bg-modeling.png"; | ||
+ | backgrounds["achievements"] = "/wiki/images/3/3d/ETHZ-bg-achievements.png"; | ||
+ | backgrounds["team"] = "/wiki/images/e/ed/ETHZ-bg-team.png"; | ||
+ | |||
+ | var lastPage = ''; | ||
var currSection = "</html>{{{currSection}}}<html>"; | var currSection = "</html>{{{currSection}}}<html>"; | ||
- | var currPage = "</html>{{{currPage}}}<html>"; | + | var currPage = "</html>{{{currPage}}}<html>"; |
function restoreMenu(fadeOutOnly) | function restoreMenu(fadeOutOnly) | ||
Line 52: | Line 47: | ||
obj.children().stop(true).animate({color: 'white'}, 500); | obj.children().stop(true).animate({color: 'white'}, 500); | ||
$('#headpic').stop(true).delay(200).animate({ backgroundColor: colors[currSection]}, 500); | $('#headpic').stop(true).delay(200).animate({ backgroundColor: colors[currSection]}, 500); | ||
- | $('.'+currSection).stop(true).delay(400).fadeIn(500); | + | $('.'+currSection+'Sub').stop(true).delay(400).fadeIn(500); |
} | } | ||
- | |||
} | } | ||
} | } | ||
Line 69: | Line 63: | ||
$('#menu').mouseleave(function() { | $('#menu').mouseleave(function() { | ||
- | restoreMenu(false); | + | // restoreMenu(false); |
}); | }); | ||
$('#menulist li').mouseover(function(){ | $('#menulist li').mouseover(function(){ | ||
// $('.listhead').not('.curlink').css("color","#ffffff"); | // $('.listhead').not('.curlink').css("color","#ffffff"); | ||
- | + | ||
- | + | ||
var foo = $(this).attr('id'); | var foo = $(this).attr('id'); | ||
+ | if (foo != lastPage) | ||
+ | { | ||
+ | $('#overlayFront').stop(true).css('background-image', $('#overlay').css('background-image')); | ||
+ | $('#overlayFront').stop(true).animate({opacity: 1}, 0); | ||
+ | $('#overlay').stop(true).animate({opacity: 0}, 0); | ||
+ | $('#overlay').stop(true).css('background-image', 'url(' + backgrounds[foo] + ')'); | ||
+ | |||
+ | $('#overlayFront').stop(true).animate({opacity: 0}, 500); | ||
+ | $('#overlay').stop(true).delay(400).animate({opacity: 1}, 500); | ||
+ | |||
+ | lastPage = foo; | ||
+ | } | ||
+ | |||
+ | |||
+ | restoreMenu(true); | ||
+ | |||
$(this).stop(true).animate({ backgroundColor: colors[foo] }, 500); | $(this).stop(true).animate({ backgroundColor: colors[foo] }, 500); | ||
$(this).children().stop(true).animate({color: 'white'}, 500); | $(this).children().stop(true).animate({color: 'white'}, 500); | ||
Line 85: | Line 94: | ||
var vActive = $(this).attr("id"); | var vActive = $(this).attr("id"); | ||
- | $('.'+vActive).stop(true).delay(400).fadeIn(500); | + | $('.'+vActive+'Sub').stop(true).delay(400).fadeIn(500); |
}); | }); | ||
Line 97: | Line 106: | ||
}); | }); | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <link rel="stylesheet" href="https://2011.igem.org/Team:ETH_Zurich/Templates/StyleSheet?action=raw&ctype=text/css" type="text/css" /> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | / | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<style type="text/css"> | <style type="text/css"> | ||
</html> {{{css|}}} <html> | </html> {{{css|}}} <html> | ||
</style> | </style> | ||
- | </ | + | <div id="preload"> |
- | < | + | <img src="/wiki/images/e/e2/ETHZ-bg-overview.png" width="1" height="1" alt="Menu image preload" /> |
+ | <img src="/wiki/images/0/03/ETHZ-bg-biology.png" width="1" height="1" alt="Menu image preload" /> | ||
+ | <img src="/wiki/images/a/ac/ETHZ-bg-process.png" width="1" height="1" alt="Menu image preload" /> | ||
+ | <img src="/wiki/images/b/b8/ETHZ-bg-modeling.png" width="1" height="1" alt="Menu image preload" /> | ||
+ | <img src="/wiki/images/3/3d/ETHZ-bg-achievements.png" width="1" height="1" alt="Menu image preload" /> | ||
+ | <img src="/wiki/images/e/ed/ETHZ-bg-team.png" width="1" height="1" alt="Menu image preload" /> | ||
+ | </div> | ||
+ | <div id="easteregg" style="position:absolute; left:200px; top:100px;display:none;z-index:99999999"> | ||
+ | <iframe title="YouTube video player" class="youtube-player" type="text/html" width="400" height="325" src="http://www.youtube.com/embed/n8FM8nyy_Fk?hd=1" frameborder="0"></iframe> | ||
+ | </div> | ||
<div id='title'> | <div id='title'> | ||
- | <div id=' | + | <div id='smocolilogo'> <a href='/Team:ETH_Zurich'> <img src='/wiki/images/5/5f/ETH_Zurich_iGEM_new.png'> </a> </div> |
- | <div id='bsselogo'> <a href='http://www.bsse.ethz.ch' target="_blank"><img src='/wiki/images/0/08/BSSE_small.png'></a> </div> | + | <!--<div id='bsselogo'> <a href='http://www.bsse.ethz.ch' target="_blank"><img src='/wiki/images/0/08/BSSE_small.png'></a> </div>--> |
- | <div id='ethlogo'> <a href='http://www.ethz.ch' target="_blank"> <img src='/wiki/images/d/da/ETH_Zurich_Logo.png'> </a> </div> | + | <div id='slogan'><b><a href="#" onclick="document.getElementById('easteregg').style.display='block'" style="text-decoration:none;color:#000000;">Can you feel the smoke tonight?</a></b></div> |
+ | <!-- <div id='ethlogo'> <a href='http://www.ethz.ch' target="_blank"> <img src='/wiki/images/d/da/ETH_Zurich_Logo.png'> </a> </div>--> | ||
<div id='igemlogo'> <a href='https://2011.igem.org'> <img src='/wiki/images/f/fb/IGEM_small.png'> </a> </div> | <div id='igemlogo'> <a href='https://2011.igem.org'> <img src='/wiki/images/f/fb/IGEM_small.png'> </a> </div> | ||
</div> | </div> | ||
Line 338: | Line 132: | ||
<div id='menuback'> | <div id='menuback'> | ||
<ul id='menulist'> | <ul id='menulist'> | ||
- | <li | + | <li id='overview' class='overview overviewTitle'><a href='/Team:ETH_Zurich' class='listhead'>Overview</a></li> |
- | <li id='biology'><a href='/Team:ETH_Zurich/Biology' class='listhead' >Biology</a></li> | + | <li id='biology' class='biology biologyTitle'><a href='/Team:ETH_Zurich/Biology' class='listhead' >Biology</a></li> |
- | <li id='modeling'><a href='/Team:ETH_Zurich/Modeling' class='listhead' >Modeling</a></li> | + | <li id='process' class='process processTitle'><a href='/Team:ETH_Zurich/Process/Microfluidics' class='listhead' >Microfluidics</a></li> |
- | <li id='achievements'><a href='/Team:ETH_Zurich/Achievements' class='listhead' > | + | <li id='modeling' class='modeling modelingTitle'><a href='/Team:ETH_Zurich/Modeling' class='listhead' >Modeling</a></li> |
- | <li id='team'><a href='/Team:ETH_Zurich/Team' class='listhead' >Team</a></li> | + | <li id='achievements' class='achievements achievementsTitle'><a href='/Team:ETH_Zurich/Achievements/Data_page' class='listhead' >Human practices</a></li> |
+ | <li id='team' class='team teamTitle'><a href='/Team:ETH_Zurich/Team' class='listhead' >Team</a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
<div id='headpic'> | <div id='headpic'> | ||
+ | <div id='overlayBack'></div> | ||
<div id='overlay'></div> | <div id='overlay'></div> | ||
+ | <div id='overlayFront'></div> | ||
<div id='headover'> | <div id='headover'> | ||
- | <p id='headtit'>SmoColi<span class='dark'> <span class='highlight'>|</span> Detect when <i>your</i> party is on</span></p> | + | <!--<p id='headtit'>SmoColi<span class='dark'> <span class='highlight'>|</span> Detect when <i>your</i> party is on</span></p>--> |
- | <ul class=' | + | <ul class='overviewSub submenu'> |
<li><a href='/Team:ETH_Zurich' class='listmain'>Introduction</a></li> | <li><a href='/Team:ETH_Zurich' class='listmain'>Introduction</a></li> | ||
<li><a href='/Team:ETH_Zurich/Overview/Project' class='listmain'>Project Idea</a></li> | <li><a href='/Team:ETH_Zurich/Overview/Project' class='listmain'>Project Idea</a></li> | ||
+ | <li><a href='/Team:ETH_Zurich/Overview/CircuitDesign' class='listmain'>Circuit Design</a></li> | ||
+ | <li><a href='/Team:ETH_Zurich/Achievements/Data_page' class='listmain'>Data page</a></li> | ||
</ul> | </ul> | ||
- | <ul class=' | + | <ul class='biologySub submenu'> |
<li><a href='/Team:ETH_Zurich/Biology' class='listmain'>Overview</a></li> | <li><a href='/Team:ETH_Zurich/Biology' class='listmain'>Overview</a></li> | ||
- | <li><a href='/Team:ETH_Zurich/Biology/Detector' class='listmain'> | + | <li><a href='/Team:ETH_Zurich/Biology/Detector' class='listmain'>Network Elements</a></li> |
- | <li><a href='/Team:ETH_Zurich/Biology/ | + | <li><a href='/Team:ETH_Zurich/Biology/MolecularMechanism' class='listmain'>Genetic Design</a></li> |
- | <li><a href='/Team:ETH_Zurich/Biology/ | + | <li><a href='/Team:ETH_Zurich/Biology/Validation' class='listmain'>Results</a></li> |
- | <ul class=' | + | <li> |
- | + | <ul class='biologySub submenu'> | |
- | + | <li><a href='/Team:ETH_Zurich/Biology/Cloning' class='listmain'>Material and Methods</a></li> | |
- | + | <li><a href='/Team:ETH_Zurich/Biology/Journal' class='listmain'>Lab journal</a></li> | |
- | + | ||
+ | </ul> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | <ul class=' | + | <ul class='modelingSub submenu'> |
- | <li><a href='/Team:ETH_Zurich/Modeling' class='listmain'>Overview</a></li> | + | <li><a href='/Team:ETH_Zurich/Modeling' class='listmain'>Overview</a></li> |
<li><a href='/Team:ETH_Zurich/Modeling/SingleCell' class='listmain'>Single-Cell Model</a></li> | <li><a href='/Team:ETH_Zurich/Modeling/SingleCell' class='listmain'>Single-Cell Model</a></li> | ||
- | <li><a href='/Team:ETH_Zurich/Modeling/Microfluidics' class='listmain'> | + | <li><a href='/Team:ETH_Zurich/Modeling/Analysis' class='listmain'>System Analysis</a></li> |
- | <li><a href='/Team:ETH_Zurich/Modeling/Combined' class='listmain'>Combined | + | <li><a href='/Team:ETH_Zurich/Modeling/Microfluidics' class='listmain'>Diffusion Model</a></li> |
+ | <li> | ||
+ | <ul class='modelingSub submenu'> | ||
+ | <li><a href='/Team:ETH_Zurich/Modeling/Combined' class='listmain'>Combined Model</a></li> | ||
+ | <li><a href='/Team:ETH_Zurich/Modeling/Parameters' class='listmain'>Parameters</a></li> | ||
+ | <li><a href='/Team:ETH_Zurich/Modeling/References' class='listmain'>References</a></li> | ||
+ | <!--<li><a href='/Team:ETH_Zurich/Modeling/Code' class='listmain'>Code</a></li>--> | ||
+ | <li><a href='/Team:ETH_Zurich/Achievements/Model_Results' class='listmain'>Results</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | <ul class=' | + | <ul class='processSub submenu'> |
- | <li><a href='/Team:ETH_Zurich/ | + | <li><a href='/Team:ETH_Zurich/Process/Microfluidics' class='listmain'>Channel Design</a></li> |
- | <li><a href='/Team:ETH_Zurich/ | + | <li><a href='/Team:ETH_Zurich/Process/Validation' class='listmain'>Evaluation</a></li> |
- | <li><a href='/Team:ETH_Zurich/ | + | <!--<li><a href='/Team:ETH_Zurich/Process/ModelVSExperiment' class='listmain'>Model VS Experiment</a></li>--> |
- | <li><a href='/Team:ETH_Zurich/Achievements/Model_Toolbox' class='listmain'>Model Toolbox</a></li> | + | </ul> |
+ | <ul class='achievementsSub submenu'> | ||
+ | <li><a href='/Team:ETH_Zurich/Biology/Safety' class='listmain'>Safety</a></li> | ||
+ | <li><a href='/Team:ETH_Zurich/Team/Human practices' class='listmain'>Outreach</a></li> | ||
+ | |||
+ | <li> | ||
+ | <ul class='achievementsSub submenu'> | ||
+ | <!--<li><a href='/Team:ETH_Zurich/Achievements/Model_Toolbox' class='listmain'>Model Toolbox</a></li>--> | ||
+ | </ul> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | <ul class=' | + | <ul class='teamSub submenu'> |
- | <li><a href='/Team:ETH_Zurich/Team/Media' class='listmain'> | + | <li><a href='/Team:ETH_Zurich/Team' class='listmain'>Overview</a></li> |
- | <li><a href='/Team:ETH_Zurich/Team/Acknowledgements' class='listmain'> | + | <li><a href='/Team:ETH_Zurich/Team/Media' class='listmain'>Photo Gallery</a></li> |
+ | <li><a href='/Team:ETH_Zurich/Team/Acknowledgements' class='listmain'>Acknowledgements</a></li> | ||
<li><a href='/Team:ETH_Zurich/Team/Brainstorming' class='listmain'>Brainstorming</a></li> | <li><a href='/Team:ETH_Zurich/Team/Brainstorming' class='listmain'>Brainstorming</a></li> | ||
- | <ul class=' | + | <li> |
- | + | <ul class='teamSub submenu'> | |
- | + | <li><a href='https://igem.org/Team.cgi?year=2011&team_name=ETH_Zurich' target='_blank' class='listmain'>Official Team Overview</a></li> | |
+ | <li><a href='/Team:ETH_Zurich/Team/Sponsors' class='listmain'>Sponsors</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
- | <script> | + | <script type="text/javascript"> |
$('.submenu').css('display', 'none'); | $('.submenu').css('display', 'none'); | ||
- | var overlay = $("# | + | var overlay = $("#overlayBack"); |
function runIt() { | function runIt() { | ||
Line 401: | Line 225: | ||
</html> | </html> | ||
- | |||
- | |||
__NOTOC__ | __NOTOC__ |
Latest revision as of 11:48, 13 October 2011