Team:Colorado State

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
-
{{CSU_Template_1_top}}
 
<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, with the exception of the dropdown menu
 +
Javascript and HTML code, which is modified.
 +
 +
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).
 +
 +
Be a good person. Obey the rules.
 +
 +
Peace out,
 +
 +
Ethan
 +
 +
 +
 +
-->
 +
<head>
 +
<link rel="shortcut icon" href="https://lh4.googleusercontent.com/-HcHixwJE_io/UAmNLdW12GI/AAAAAAAAAQQ/732H1k0OCog/s40/icon.png">
 +
<style type="text/css">
 +
 +
/*********NOTES*********
 +
 +
-Colors
 +
-DC8800-Medium
 +
-E9B300-Medium/Light
 +
-925F00-Dark
 +
-F1C900-Light
 +
-BDAF77-Créme/white
 +
-423600-Gold with grey overlay (27%)
 +
 +
*/
 +
 +
/*********HIDE iGEM STUFF*********/
 +
 +
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {
 +
z-index: 1;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
visibility: hidden;
 +
width: 0;
 +
height: 0;
 +
border: none;
 +
}
 +
 +
/*********PAGE FORMATTING*********/
 +
 +
#globalWrapper *, * {
 +
border-spacing: 0;
 +
border-collapse: collapse;
 +
padding: 0;
 +
margin: 0;
 +
margin-left: 0;
 +
margin-top: 0;
 +
color: #CCC;
 +
}
 +
 +
body {
 +
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;
 +
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/
 +
background-size: 100% 100%;
 +
height: 100%;
 +
width: 100%;
 +
}
 +
 +
#content {
 +
position: relative;
 +
top: -10px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
    margin-bottom: 100px;
 +
padding: 0;
 +
width: 800px;
 +
height: auto;
 +
border: none;
 +
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;
 +
 +
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/
 +
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
}
 +
 +
#footer {
 +
position: absolute;
 +
width: 100%;
 +
bottom: 0;
 +
}
 +
 +
#content_main {
 +
padding: 40px;
 +
}
 +
 +
#side_bar {
 +
position: fixed;
 +
top: 100px;
 +
right: 0;
 +
width: 200px;
 +
height: 250px;
 +
z-index: 100;
 +
cursor: pointer;
 +
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;
 +
background-size: 100% 100%;
 +
}
 +
 +
#side_bar:hover {
 +
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;
 +
background-size: 100% 100%;
 +
}
 +
 +
#hiddenEdit {
 +
position: absolute;
 +
top: 3px;
 +
left: 3px;
 +
visibility: visible;
 +
z-index: 500;
 +
border: solid red 1px;
 +
}
 +
 +
#hiddenEdit:hover {
 +
visibility: visible;
 +
}
 +
 +
/*********CONTENT_MAIN FORMATTING*********/
 +
 +
#content_main a {
 +
font-weight: bold;
 +
color: #F1C900;
 +
text-decoration: none;
 +
}
 +
 +
#content_main a:hover {
 +
text-decoration: underline;
 +
}
 +
 +
#content_main h1, h2, h3, h4, h5 {
 +
margin-top: 12px;
 +
margin-bottom: 12px;
 +
padding: 12px;
 +
border-bottom: solid 1px #CCC;
 +
}
 +
 +
#content_main img {
 +
border: 2px solid #CCC;
 +
}
 +
 +
#content_main ol, #content_main ul {
 +
margin-left: 50px;
 +
}
 +
 +
#content_main ul {
 +
list-style-image: url(https://lh5.googleusercontent.com/-tL65Tu-6HPc/UAmA2UCSaGI/AAAAAAAAAQE/Ns0PPcBL0Yk/s5/bullet1.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;
 +
}
 +
 +
/*********SLIDESHOW*********/
 +
 +
#slideshow {
 +
position: relative;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 270px;
 +
}
 +
 +
.slide {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
/*********DROPDOWN CSS**********/
 +
 +
#menu_bar td {
 +
width: 33%;
 +
}
 +
 +
#menu_bar {
 +
width: 100%;
 +
overflow: hidden;
 +
color: #CCC; /*******COLOR*******/
 +
text-align: center;
 +
background: none;
 +
margin: 0;
 +
}
 +
 +
#menu_bar dt {
 +
text-align: center;
 +
width: 100%;
 +
padding: 8px;
 +
font-weight: bold;
 +
cursor: pointer;
 +
background: #925F00; /*******COLOR*******/
 +
}
 +
 +
#menu_bar dd {
 +
position: absolute;
 +
overflow: hidden;
 +
width: 267px;
 +
display: none;
 +
background: #E9B300; /*******COLOR*******/
 +
z-index: 200;
 +
opacity: 0;
 +
}
 +
 +
#menu_bar ul {
 +
width: 263px;
 +
border: 2px solid #925F00; /*******COLOR*******/
 +
list-style: none;
 +
border-top: none;
 +
}
 +
 +
#menu_bar li {
 +
display: inline;
 +
}
 +
 +
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {
 +
display: block;
 +
padding: 5px;
 +
text-decoration: none;
 +
width: 100%;
 +
color: #925F00; /*******COLOR*******/
 +
border-top: 1px solid #925F00; /*******COLOR*******/
 +
}
 +
 +
#menu_bar a:hover {
 +
background: #F1C900; /*******COLOR*******/
 +
}
 +
 +
</style>
 +
<script type="text/javascript">
 +
 +
//Javascript link function
 +
 +
function linkTo(url) {
 +
 +
window.location.href = url;
 +
 +
}
-
<!--HIDDEN EDIT BOX-->
+
//Simple function that performs startup scripts when prompted
-
<div id="hiddenEdit">
+
function startFunctions () {
-
    Edit:
+
-
    <a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit">top</a>&nbsp;
+
setTimeout('fade(1,false)', 2000);
-
    <a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_bottom&action=edit">bottom</a>&nbsp;
+
menuBar(0);
-
    <a href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State&amp;action=edit">page</a>
+
-
</div>
+
}
-
<!--START PAGE CONTENT-->
+
//*******************************************************************
-
<a href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State&amp;action=edit">page</a>
+
//************************SLIDESHOW SCRIPT***************************
-
<h1>Our Gluten-Free Mission</h1>
+
//*******************************************************************
-
<img src="http://static.wix.com/media/5bd9eb_7ef5fd654f20a317552cf2933f9f5671.jpg_srz_375_240_85_22_0.50_1.20_0.00_jpg_srz" width="250" style="float: right; border: solid #CCC 2px; margin-left: 15px;" />
+
//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
-
<p>&nbsp;&nbsp;&nbsp;&nbsp;If you have Celiac Disease or are Gluten-Intolerant (and are over 21), stop what you are doing right now. Your prayers for a great tasting gluten-free beer have finally been answered, or at least are in the process of being answered. Think of it as a delay in the mailroom. All of those nights when your friends were taunting you with the ice cold, delicious, golden liquid that gives courage to even the most faint of heart are quickly coming to an end. Your desire to enjoy a "cold one" without having a gut-wrenching reaction should be fullfilled by the end of the summer. The CSU iGEM team is working on producing a "gluten-free" beer that can be brewed from wheat or barley so you can savor that same great taste you know and love. So cross your fingers, bust out your lucky rabbits foot, and watch out for black cats because we are gearing up for something big, and it has never been done before.</p>
+
//Changes menu_bar element in coordination with slides
 +
function menuBar(curElemID) {
 +
 +
nextElemID = getNextSlide(curElemID);
 +
var curMenuElem = document.getElementById(curElemID + '-ddheader');
 +
var nextMenuElem = document.getElementById(nextElemID + '-ddheader');
 +
 +
//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
-
<h1>More Than a Great Beer</h1>
+
//Performs fade animation; main function
 +
function fade(curElemID,isFading) {
 +
 +
//Length that each slide shows before fade (in milliseconds)
 +
var slideTime = 2000;
 +
 +
//Length of fade (milliseconds)
 +
var fadeTime = 1000;
 +
 +
//Fade Increments: > means smoother, more CPU-intensive transition
 +
var fadeInc = 10;
 +
 +
//In order for fade to work correctly, opacity must be rounded to
 +
//the appropriate number of decimal places.  roundTo defines this.
 +
//For fadeInc < 20, roundTo = 1 will suffice.  roundNum is the
 +
//functional form.
 +
var roundTo = 1;
 +
var roundNum = Math.pow(10, roundTo);
 +
 +
//Fetches the current slide element
 +
var curElem = document.getElementById('slide' + curElemID);
 +
 +
//Performs pre-fade functions. Function must be called with isFading = false.
 +
if (isFading == false) {
 +
 +
//Fetches the next slide element.  If there is no next slide,
 +
//return to slide1.
 +
var nextElem = document.getElementById('slide' + (curElemID + 1));
 +
if (!nextElem) {
 +
var nextElem = document.getElementById('slide1');
 +
} //end if
 +
 +
//Brings current slide to front/fading z-index (3) and puts the
 +
//next slide in the corresponding z-index (2).  Slides that are
 +
//neither the current or next slide should have z-index = 1.
 +
curElem.style.zIndex = 30;
 +
nextElem.style.zIndex = 20;
 +
 +
//Sets a preliminary opacities. Optional
 +
curElem.style.opacity = 1;
 +
nextElem.style.opacity = 1;
 +
 +
} //end if
 +
 +
//Fades out the current slide if it is not already completely faded yet
 +
if (curElem.style.opacity > 0) {
 +
 +
//Sets new opacity and reruns the function
 +
var newOpac = (Math.round(roundNum * (curElem.style.opacity - (1/fadeInc)))) / roundNum;
 +
curElem.style.opacity = newOpac;
 +
setTimeout('fade(' + curElemID + ')', (fadeTime/fadeInc));
 +
 +
//Current slide has faded completely
 +
} else {
 +
 +
//Sets the current slide to a hidden state with full opacity
 +
curElem.style.zIndex = 10;
 +
curElem.style.opacity = 1;
 +
 +
//Sets next slide element.  If there is no next slide,
 +
//return to slide1.
 +
 +
nextElemID = getNextSlide(curElemID);
 +
 +
//Starts next fade.  isFading = false is a required parameter
 +
setTimeout('fade(' + nextElemID + ',false)',slideTime);
 +
 +
//Menu bar functions
 +
menuBar(curElemID);
 +
 +
} //end if
 +
 +
} //end function fade
-
<img src="http://static.wix.com/media/5bd9eb_299a61aed7aee9a8fe1c2e1ca33ea264.jpg_srz_275_207_85_22_0.50_1.20_0.00_jpg_srz" width="250" style="float: left; border: solid #CCC 2px; margin-right: 15px;" />
+
//*******************************************************************
 +
//************************DROPDOWN SCRIPT****************************
 +
//*******************************************************************
-
<p>&nbsp;&nbsp;&nbsp;&nbsp;A gluten-free beer isn't the only thing we are working on. We are also designing primers for New Belgium Brewery, developing a novel gluten-detecting assay, and creating a computer-modeled simulation for the breakdown of gluten in beer. All of these various components have us teaming up with some of the best in the business, so don't forget to visit our sponsor and attribution pages.​</p>
+
var DDSPEED = 10;
 +
var DDTIMER = 15;
-
<br /><br /><br /><br /><br />
+
//Main function to handle the mouse events
 +
function ddMenu(id,d){
 +
  var h = document.getElementById(id + '-ddheader');
 +
  var c = document.getElementById(id + '-ddcontent');
 +
  clearInterval(c.timer);
 +
  if(d == 1){
 +
clearTimeout(h.timer);
 +
if (c.maxh <= c.offsetHeight) {
 +
if (c.maxh) {
 +
return;
 +
}
 +
}
 +
else if(!c.maxh){
 +
  c.style.display = 'block';
 +
  c.style.height = 'auto';
 +
  c.maxh = c.offsetHeight;
 +
  c.style.height = '0px';
 +
}
 +
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 +
  }else{
 +
h.timer = setTimeout(function(){ddCollapse(c)},50);
 +
  }
 +
}
-
<h1>RamStrong</h1>
+
//Collapse menu
 +
function ddCollapse(c){
 +
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
 +
}
-
<p>&nbsp;&nbsp;&nbsp;&nbsp;We proudly roam the steepest and most treacherous mountain sides, looking for adventure, and exploring whatever comes our way. We do not back down from challenges, instead we charge them head on. Although we do occasionally clash heads, we power through our disagreements, because... we are the CSU Rams!!!</p>
+
//Cancel the collapse if a user rolls over the dropdown
 +
function cancelHide(id){
 +
  var h = document.getElementById(id + '-ddheader');
 +
  var c = document.getElementById(id + '-ddcontent');
 +
  clearTimeout(h.timer);
 +
  clearInterval(c.timer);
 +
  if(c.offsetHeight < c.maxh){
 +
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 +
  }
 +
}
-
<!--END PAGE CONTENT-->
+
//Incrementally expand/contract the dropdown and change the opacity
 +
function ddSlide(c,d){
 +
  var currh = c.offsetHeight;
 +
  var dist;
 +
  if(d == 1){
 +
dist = (Math.round((c.maxh - currh) / DDSPEED));
 +
  }else{
 +
dist = (Math.round(currh / DDSPEED));
 +
  }
 +
  if(dist <= 1){
 +
  if ( d == 1) {
 +
  dist = 1;
 +
  }
 +
  }
 +
  c.style.height = currh + (dist * d) + 'px';
 +
  c.style.opacity = currh / c.maxh;
 +
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
 +
  if (currh < 2) {
 +
if (d != 1) {
 +
clearInterval(c.timer);
 +
}
 +
  } else if (currh > (c.maxh - 2)) {
 +
if (d == 1) {
 +
clearInterval(c.timer);
 +
}
 +
  }
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
    <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a>
 +
    <a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh4.googleusercontent.com/-itFA3bOb7Oc/UAh1hcN2XrI/AAAAAAAAAPU/ZXSorjhz1F4/s512/team_logo.png" style="position: fixed; z-index: 200; width: 200px; top: 20px; left: 20px;" /></a>
 +
    <div id="content_top">
 +
        <div id="slideshow">
 +
            <img id="slide1" class="slide" src="https://lh4.googleusercontent.com/-icdH9nCgILg/UAWcJDs6qlI/AAAAAAAAAMA/I9cf4OFNE9E/s800/temp1.jpg" style="z-index: 30;" />
 +
            <img id="slide2" class="slide" src="https://lh5.googleusercontent.com/-jdDeA36YR_A/UAWcJqulWEI/AAAAAAAAAMU/qAn0y-b6j1w/s912/temp2.jpg" />
 +
            <img id="slide3" class="slide" src="https://lh3.googleusercontent.com/--Ra__21nthQ/UAWcJVWY7CI/AAAAAAAAAME/lrW_S_gHgL8/s800/temp3.jpg" />
 +
        </div>
 +
        <table id="menu_bar" cellspacing="0">
 +
        <tr>
 +
            <td>
 +
            <dl>
 +
                <dt id="1-ddheader" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt>
 +
                <dd id="1-ddcontent">
 +
                    <ul>
 +
                    <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li>
 +
                    </ul>
 +
                </dd>
 +
            </dl>
 +
            </td>
 +
            <td>
 +
            <dl>
 +
                <dt id="2-ddheader" onMouseOver="ddMenu('2',1)" onMouseOut="ddMenu('2',-1)">The Project</dt>
 +
                <dd id="2-ddcontent" onMouseOver="cancelHide('2')" onMouseOut="ddMenu('2',-1)">
 +
                    <ul>
 +
                    <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/Parts">Parts Submitted to the Registry</a></li>
 +
                        <li><a href="#">Results</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li>
 +
                        <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>
 +
                    </ul>
 +
                </dd>
 +
            </dl>
 +
            </td>
 +
            <td>
 +
            <dl>
 +
                <dt id="3-ddheader" onMouseOver="ddMenu('3',1)" onMouseOut="ddMenu('3',-1)">The Brewers</dt>
 +
                <dd id="3-ddcontent" onMouseOver="cancelHide('3')" onMouseOut="ddMenu('3',-1)">
 +
                    <ul>
 +
                        <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/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://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li>
 +
                    </ul>
 +
                </dd>
 +
            </dl>
 +
            </td>
 +
        </tr>
 +
        </table>
 +
    </div>
 +
    <script type="text/javascript">startFunctions();</script>
 +
    <div id="content_main">
</html>
</html>
-
{{CSU_Template_1_bottom}}
 

Revision as of 19:26, 20 July 2012

Retrieved from "http://2012.igem.org/Team:Colorado_State"