Template:CSU Template 1 top
From 2012.igem.org
(Difference between revisions)
(270 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <!-- | ||
+ | |||
+ | |||
+ | |||
+ | *************************************************************** | ||
+ | *************************************************************** | ||
+ | *********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************ | ||
+ | *************************************************************** | ||
+ | *************************************************************** | ||
+ | |||
+ | 2012 Colorado State iGEM Team Wiki Site | ||
+ | |||
+ | by Ethan Ho - Ethan.N.Ho@Gmail.com | ||
+ | |||
+ | All code is original, except the dropdown menu, which is modified | ||
+ | code. | ||
+ | |||
+ | Do not copy or in any way, shape, or form, use any of this code | ||
+ | without the explicit permission of Ethan Ho (reachable by above | ||
+ | E-mail). I'll probably say yes. | ||
+ | |||
+ | Be a good person. Obey the rules. | ||
+ | |||
+ | Peace out, | ||
+ | |||
+ | Ethan | ||
+ | |||
+ | |||
+ | |||
+ | --> | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | .editbutton { | ||
+ | visibility: hidden; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | If you want to edit each individual page, uncomment the following | ||
+ | line of code to reveal the handy "Edit page" buttons! | ||
+ | */ | ||
+ | |||
+ | .editbutton {visibility: visible; width: auto; height: auto;} | ||
/*********NOTES********* | /*********NOTES********* | ||
Line 41: | Line 84: | ||
body { | body { | ||
- | background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed; | + | background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800; |
background-size: 100% 100%; | background-size: 100% 100%; | ||
height: 100%; | height: 100%; | ||
Line 52: | Line 95: | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
+ | margin-bottom: 100px; | ||
padding: 0; | padding: 0; | ||
- | width: | + | width: 800px; |
height: auto; | height: auto; | ||
border: none; | border: none; | ||
Line 66: | Line 110: | ||
width: 100%; | width: 100%; | ||
bottom: 0; | bottom: 0; | ||
- | + | z-index: 1; | |
} | } | ||
#content_main { | #content_main { | ||
- | padding: 40px; | + | padding: 40px; |
+ | padding-top: 0; | ||
} | } | ||
- | + | /*********CONTENT_MAIN FORMATTING*********/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | # | + | #content_main a { |
font-weight: bold; | font-weight: bold; | ||
color: #F1C900; | color: #F1C900; | ||
Line 94: | Line 126: | ||
} | } | ||
- | # | + | #content_main a:hover { |
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
- | # | + | #content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 { |
- | + | margin-bottom: 12px; | |
- | + | padding: 12px; | |
- | height: | + | border: none; |
+ | border-bottom: solid 1px #CCC; | ||
+ | line-height: 120%; | ||
} | } | ||
- | + | #content_main img { | |
- | + | border: 2px solid #CCC; | |
- | border | + | } |
+ | |||
+ | #content_main ol, #content_main ul { | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | |||
+ | #content_main ul { | ||
+ | list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png); | ||
+ | } | ||
+ | |||
+ | #content_main td { | ||
+ | padding: 10px; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | #content_main table, #content_main th, #content_main td { | ||
+ | background: none; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #content_main table * { | ||
+ | color: #CCC; | ||
} | } | ||
Line 116: | Line 171: | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
- | height: | + | height: 270px; |
+ | overflow: hidden; | ||
} | } | ||
.slide { | .slide { | ||
position: absolute; | position: absolute; | ||
- | width: | + | right: 0; |
+ | float: right; | ||
+ | width: auto; | ||
height: 100%; | height: 100%; | ||
} | } | ||
Line 152: | Line 210: | ||
position: absolute; | position: absolute; | ||
overflow: hidden; | overflow: hidden; | ||
- | width: | + | width: 267px; |
display: none; | display: none; | ||
background: #E9B300; /*******COLOR*******/ | background: #E9B300; /*******COLOR*******/ | ||
- | z-index: | + | z-index: 4; |
opacity: 0; | opacity: 0; | ||
} | } | ||
#menu_bar ul { | #menu_bar ul { | ||
- | width: | + | width: 263px; |
border: 2px solid #925F00; /*******COLOR*******/ | border: 2px solid #925F00; /*******COLOR*******/ | ||
list-style: none; | list-style: none; | ||
Line 181: | Line 239: | ||
#menu_bar a:hover { | #menu_bar a:hover { | ||
background: #F1C900; /*******COLOR*******/ | background: #F1C900; /*******COLOR*******/ | ||
+ | } | ||
+ | |||
+ | .leftBorder { | ||
+ | border-left: solid 2px #CCC; | ||
} | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | //newOpac: sets new opacity | ||
//******************************************************************* | //******************************************************************* | ||
//************************SLIDESHOW SCRIPT*************************** | //************************SLIDESHOW SCRIPT*************************** | ||
//******************************************************************* | //******************************************************************* | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
//Performs fade animation; main function | //Performs fade animation; main function | ||
function fade(curElemID,isFading) { | function fade(curElemID,isFading) { | ||
- | // | + | //length that each slide shows before fade (in milliseconds) |
- | var | + | var slideStayTime = 3000; |
- | // | + | //length of fade (milliseconds) |
- | var fadeTime = | + | var fadeTime = 800; |
- | // | + | //number of fade loops: > means smoother, more CPU-intensive transition |
- | var | + | var numFadeLoops = 8; |
//In order for fade to work correctly, opacity must be rounded to | //In order for fade to work correctly, opacity must be rounded to | ||
//the appropriate number of decimal places. roundTo defines this. | //the appropriate number of decimal places. roundTo defines this. | ||
- | //For | + | //For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the |
//functional form. | //functional form. | ||
var roundTo = 1; | var roundTo = 1; | ||
Line 254: | Line 288: | ||
//next slide in the corresponding z-index (2). Slides that are | //next slide in the corresponding z-index (2). Slides that are | ||
//neither the current or next slide should have z-index = 1. | //neither the current or next slide should have z-index = 1. | ||
- | curElem.style.zIndex = | + | curElem.style.zIndex = 3; |
- | nextElem.style.zIndex = | + | nextElem.style.zIndex = 2; |
//Sets a preliminary opacities. Optional | //Sets a preliminary opacities. Optional | ||
curElem.style.opacity = 1; | curElem.style.opacity = 1; | ||
+ | curElem.style.filter = 'alpha(opacity=100)'; | ||
nextElem.style.opacity = 1; | nextElem.style.opacity = 1; | ||
+ | nextElem.style.filter = 'alpha(opacity=100)'; | ||
} //end if | } //end if | ||
//Fades out the current slide if it is not already completely faded yet | //Fades out the current slide if it is not already completely faded yet | ||
- | if (curElem.style.opacity > 0) { | + | if (parseFloat(curElem.style.opacity) > 0) { |
//Sets new opacity and reruns the function | //Sets new opacity and reruns the function | ||
- | var newOpac = (Math.round(roundNum * (curElem.style.opacity - (1/ | + | var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum; |
curElem.style.opacity = newOpac; | curElem.style.opacity = newOpac; | ||
- | + | curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')'; | |
+ | setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops)); | ||
//Current slide has faded completely | //Current slide has faded completely | ||
Line 275: | Line 312: | ||
//Sets the current slide to a hidden state with full opacity | //Sets the current slide to a hidden state with full opacity | ||
- | curElem.style.zIndex = | + | curElem.style.zIndex = 1; |
curElem.style.opacity = 1; | curElem.style.opacity = 1; | ||
+ | curElem.style.filter = 'alpha(opacity=100)'; | ||
//Sets next slide element. If there is no next slide, | //Sets next slide element. If there is no next slide, | ||
Line 284: | Line 322: | ||
//Starts next fade. isFading = false is a required parameter | //Starts next fade. isFading = false is a required parameter | ||
- | setTimeout( | + | setTimeout(function(){fade(nextElemID, false)}, slideStayTime); |
//Menu bar functions | //Menu bar functions | ||
Line 293: | Line 331: | ||
} //end function fade | } //end function fade | ||
- | + | //Finds the next slide and returns its 'slide' + x id. | |
- | + | function getNextSlide(curElemID) { | |
+ | |||
+ | var nextElem = document.getElementById('slide' + (curElemID + 1)); | ||
+ | if (nextElem) { | ||
+ | var nextElemID = curElemID + 1; | ||
+ | } else { | ||
+ | var nextElemID = 1; | ||
+ | } //end if | ||
+ | |||
+ | return nextElemID; | ||
+ | |||
+ | } //end function getNextSlide | ||
+ | |||
+ | //Changes menu_bar element in coordination with slides | ||
+ | function menuBar(curElemID) { | ||
+ | |||
+ | nextElemID = getNextSlide(curElemID); | ||
+ | var curMenuElem = document.getElementById('ddHeader' + curElemID); | ||
+ | var nextMenuElem = document.getElementById('ddHeader' + nextElemID); | ||
+ | |||
+ | //menu_bar item change actions go here | ||
+ | nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/ | ||
+ | |||
+ | //Change last menu_bar item back to its normal state | ||
+ | curMenuElem.style.background = '#925F00'; /*******COLOR*******/ | ||
+ | |||
+ | } //end function menuBar | ||
//******************************************************************* | //******************************************************************* | ||
Line 300: | Line 364: | ||
//******************************************************************* | //******************************************************************* | ||
- | var | + | var ddspeed = 10; |
- | var | + | var ddtimer = 15; |
- | // | + | //Main function to handle the mouse events |
- | function | + | function ddMain(id, direction) { |
- | + | ||
- | + | var headerElem = document.getElementById('ddHeader' + id); | |
- | + | var contentElem = document.getElementById('ddContent' + id); | |
- | + | clearInterval(contentElem.timer); | |
- | + | ||
- | + | if (direction == 1) { | |
- | + | clearTimeout(headerElem.timer); | |
- | + | if (contentElem.maxh <= contentElem.offsetHeight) { | |
- | + | if (contentElem.maxh) { | |
- | + | return; | |
- | + | } //end if | |
- | + | } else if (!contentElem.maxh) { | |
- | + | contentElem.style.display = 'block'; | |
- | + | contentElem.style.height = 'auto'; | |
- | + | contentElem.maxh = contentElem.offsetHeight; | |
- | + | contentElem.style.height = '0px'; | |
- | + | } //end if | |
- | + | contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer); | |
- | + | } else { | |
- | + | headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50); | |
- | } | + | } //end if |
+ | |||
+ | } //end function ddMain | ||
- | // | + | //Collapse menu |
- | function ddCollapse( | + | function ddCollapse(contentElem) { |
- | + | ||
- | } | + | contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer); |
+ | |||
+ | } //end function ddCollapse | ||
- | // | + | //Cancel the collapse if a user rolls over the dropdown |
- | function | + | function cancelCollapse(id) { |
- | + | ||
- | + | var headerElem = document.getElementById('ddHeader' + id); | |
- | + | var contentElem = document.getElementById('ddContent' + id); | |
- | + | clearTimeout(headerElem.timer); | |
- | + | clearInterval(contentElem.timer); | |
- | + | ||
- | + | if (contentElem.offsetHeight < contentElem.maxh) { | |
+ | contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer); | ||
+ | } //end if | ||
+ | |||
} | } | ||
- | // | + | //Incrementally expand/contract the dropdown and change the opacity |
- | function ddSlide( | + | function ddSlide(contentElem,direction) { |
- | + | ||
- | + | var curHeight = contentElem.offsetHeight; | |
- | + | ||
- | + | if (direction == 1) { | |
- | + | distance = Math.round((contentElem.maxh - curHeight) / ddspeed); | |
- | + | } else { | |
- | + | distance = Math.round(curHeight / ddspeed); | |
- | + | } //end if | |
- | + | ||
- | + | if (distance <= 1) { | |
- | + | if (direction == 1) { | |
- | + | distance = 1; | |
- | + | } //end if | |
- | + | } //end if | |
- | + | ||
- | + | contentElem.style.height = curHeight + (distance * direction) + 'px'; | |
- | + | contentElem.style.opacity = curHeight / contentElem.maxh; | |
- | + | contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')'; | |
- | + | ||
- | + | if (curHeight < 2) { | |
- | + | if (direction != 1) { | |
- | + | clearInterval(contentElem.timer); | |
- | } | + | } //end if |
- | + | } else if (curHeight > (contentElem.maxh - 2)) { | |
- | } | + | if (direction == 1) { |
+ | clearInterval(contentElem.timer); | ||
+ | } //end if | ||
+ | } //end if | ||
+ | } //end function ddSlide | ||
+ | |||
+ | //******************************************************************* | ||
+ | //************************MISC FUNCTIONS***************************** | ||
+ | //******************************************************************* | ||
+ | |||
+ | //Javascript link function | ||
+ | function linkTo(url) { | ||
+ | |||
+ | window.location.href = url; | ||
+ | |||
+ | } //end function linkTo | ||
+ | |||
+ | //Simple function that performs startup scripts when prompted | ||
+ | function startFunctions () { | ||
+ | |||
+ | setTimeout('fade(1,false)', 2000); | ||
+ | menuBar(0); | ||
+ | |||
+ | } //end function startFunctions | ||
</script> | </script> | ||
</head> | </head> | ||
- | <body | + | <body> |
+ | <img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="100" height="100" style="position: fixed; top: 10px; right: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /> | ||
+ | <div style="border: solid red 1px;" id="menubar"></div> | ||
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a> | <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a> | ||
<div id="content_top"> | <div id="content_top"> | ||
<div id="slideshow"> | <div id="slideshow"> | ||
- | + | <div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"> | |
- | <img id="slide1" class="slide" src="https:// | + | <a href="https://2012.igem.org/Team:Colorado_State"> |
- | <img id="slide2" class="slide" src="https:// | + | <div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"> |
- | <img id="slide3" class="slide" src="https:// | + | <img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /> |
+ | <img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /> | ||
+ | <img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | <img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /> | ||
+ | <img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /> | ||
+ | <img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /> | ||
</div> | </div> | ||
<table id="menu_bar" cellspacing="0"> | <table id="menu_bar" cellspacing="0"> | ||
Line 386: | Line 490: | ||
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt> |
- | + | <dd id="ddContent1"> | |
<ul> | <ul> | ||
- | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</ul> | </ul> | ||
</dd> | </dd> | ||
</dl> | </dl> | ||
- | + | </td> | |
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt> |
- | <dd id=" | + | <dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"> |
<ul> | <ul> | ||
- | <li><a href="https://2012.igem.org/Team:Colorado_State/ | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li> |
- | <li><a href="https://2012.igem.org/Team:Colorado_State/ | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li> |
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li> |
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li> |
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li> |
+ | <li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li> | ||
</ul> | </ul> | ||
</dd> | </dd> | ||
Line 415: | Line 516: | ||
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt> |
- | <dd id=" | + | <dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"> |
<ul> | <ul> | ||
- | <li><a href="https://2012.igem.org/Team:Colorado_State/Team">Team</a></li> | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li> |
+ | <li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li> | ||
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li> | <li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li> | ||
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li> |
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li> |
- | + | ||
</ul> | </ul> | ||
</dd> | </dd> | ||
Line 430: | Line 532: | ||
</table> | </table> | ||
</div> | </div> | ||
+ | <script type="text/javascript">startFunctions();</script> | ||
<div id="content_main"> | <div id="content_main"> | ||
+ | </html> |
Latest revision as of 14:25, 1 July 2013
|