Team:Colorado State/Notebook

From 2012.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
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 class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Notebook&amp;action=edit">Edit page</a>
 +
<br />
 +
<h1>Team Notebook</h1>
 +
<img src="http://0.tqn.com/d/chemistry/1/0/E/1/1/chemistry-glassware.jpg" width="250" style="float: right; margin-left: 15px;" />
-
***************************************************************
+
<ul>
-
***************************************************************
+
<li><a href="https://2012.igem.org/notebook_protocols">Protocols</a></li>
-
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************
+
-
***************************************************************
+
-
***************************************************************
+
-
2012 Colorado State iGEM Team Wiki Site
+
</ul>
-
by Ethan Ho - Ethan.N.Ho@Gmail.com
+
<!--END PAGE CONTENT-->
-
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}}

Latest revision as of 23:35, 27 September 2013

Edit page

Team Notebook



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