http://2012.igem.org/wiki/index.php?title=Special:Contributions/Csempeck&feed=atom&limit=50&target=Csempeck&year=&month=
2012.igem.org - User contributions [en]
2024-03-28T20:50:17Z
From 2012.igem.org
MediaWiki 1.16.0
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2013-07-01T14:25:31Z
<p>Csempeck: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
z-index: 1;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 3;<br />
nextElem.style.zIndex = 2;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 1;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<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')" /><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<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%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<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%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Csempeck