Team:Colorado State/Notebook

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">
 +
<!--
-
<!--START PAGE CONTENT-->
 
-
<a href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Notebook&amp;action=edit">Edit page</a>
 
-
<br />
 
-
<h1>Team Notebook</h1>
 
-
<p>Sub-projects for designing gluten-free beer</p>
 
-
<ul>
 
-
<li><a href="https://2012.igem.org/notebook_protocols">Protocols</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_journal">Journal Club</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_guy">Guy's Research</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_dave">Dave's Research</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_steven">Steven's Research</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_ryan">Ryan's Research</a></li>
 
-
    <li><a href="https://2012.igem.org/notebook_ethan">Ethan's Research</a></li>
 
-
</ul>
 
-
<h1>Calendar</h1>
 
-
<iframe src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=rams.colostate.edu_ncpcetd8c9cokcmf7kt2rkm8es%40group.calendar.google.com&amp;color=%232F6309&amp;ctz=America%2FDenver" style="border: 2px solid #CCC; width: 100%; height: 500px;" frameborder="0" scrolling="no"></iframe>
 
-
<!--END PAGE CONTENT-->
+
***************************************************************
 +
***************************************************************
 +
*********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>
 +
<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%;
 +
}
 +
 +
/*********CONTENT_MAIN FORMATTING*********/
 +
 +
#content_main a {
 +
font-weight: bold;
 +
color: #F1C900;
 +
text-decoration: none;
 +
}
 +
 +
#content_main a:hover {
 +
text-decoration: underline;
 +
}
 +
 +
#content_main h1, #content_main  h2, #content_main  h3, #content_main  h4, #content_main  h5 {
 +
margin-top: 12px;
 +
margin-bottom: 12px;
 +
padding: 12px;
 +
border: none;
 +
border-bottom: solid 1px #CCC;
 +
line-height: 120%;
 +
}
 +
 +
#content_main img {
 +
border: 2px solid #CCC;
 +
}
 +
 +
#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;
 +
}
 +
 +
/*********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;
 +
 +
}
 +
 +
//Simple function that performs startup scripts when prompted
 +
 +
function startFunctions () {
 +
 +
setTimeout('fade(1,false)', 2000);
 +
menuBar(0);
 +
 +
}
 +
 +
//*******************************************************************
 +
//************************SLIDESHOW SCRIPT***************************
 +
//*******************************************************************
 +
 +
//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(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
 +
 +
//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
 +
 +
//*******************************************************************
 +
//************************DROPDOWN SCRIPT****************************
 +
//*******************************************************************
 +
 +
var DDSPEED = 10;
 +
var DDTIMER = 15;
 +
 +
//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);
 +
  }
 +
}
 +
 +
//Collapse menu
 +
function ddCollapse(c){
 +
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
 +
}
 +
 +
//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);
 +
  }
 +
}
 +
 +
//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>
 +
<div style="border: solid red 1px;" id="menubar"></div>
 +
    <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a>
 +
    <div id="content_top">
 +
        <div id="slideshow">
 +
        <div style="position: absolute; top: 0; left: 0; height: 100%; width: 50%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;">
 +
            <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: absolute; height: 90%; top: 20px; left: 20px;" /></a>
 +
            </div>
 +
            <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>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</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 22:39, 20 July 2012

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