Team:Colorado State

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
-
<title>JavaScript menu_bar Menu Demo</title>
 
<style type="text/css">
<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 {
 +
visibility: hidden;
 +
height: 0;
 +
border: none;
 +
}
 +
 +
/*********PAGE FORMATTING*********/
 +
 +
* {
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 +
body {
 +
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed;
 +
height: 100%;
 +
width: 100%;
 +
}
 +
 +
#bodycontent {
 +
position: relative;
 +
top: 0;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 700px;
 +
height: 610px;
 +
background: url(https://lh6.googleusercontent.com/-Bz9Xal7nbX0/UAWcJiyGvXI/AAAAAAAAAMM/fZZe6dB7_Vg/s912/trans1.png) repeat-y top left;
-
#menu_bar * {
+
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/
-
padding: 0;
+
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-
margin: 0;
+
color: #CCC;  /*******COLOR*******/
-
}
+
}
 +
 
 +
#footer {
 +
position: absolute;
 +
width: 100%;
 +
bottom: 0;
 +
}
 +
 
 +
#content_main {
 +
padding: 40px;
 +
}
 +
 
 +
#side_bar {
 +
position: fixed;
 +
top: 250px;
 +
left: 0;
 +
width: 240px;
 +
height: 300px;
 +
z-index: 100;
 +
cursor: pointer;
 +
background: url(https://lh3.googleusercontent.com/-MtUojiC0LkI/UAWcImGPUPI/AAAAAAAAALw/wRt50IIRqwM/s300/tap1.png) no-repeat top left;
 +
}
 +
 
 +
#side_bar:hover {
 +
background: url(https://lh5.googleusercontent.com/-Lw3nwfFW7ws/UAWcI8XQ4ZI/AAAAAAAAAL4/W7-l1JR20TU/s300/tap2.png) no-repeat top left;
 +
}
 +
 
 +
a {
 +
font-weight: bold;
 +
color: #F1C900;
 +
text-decoration: none;
 +
}
 +
 
 +
a:hover {
 +
text-decoration: underline;
 +
}
 +
 
 +
/*********SLIDESHOW*********/
 +
 
 +
#slideshow {
 +
position: relative;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 200px;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
#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: 233px;
 +
display: none;
 +
background: #E9B300; /*******COLOR*******/
 +
z-index: 200;
 +
opacity: 0;
 +
}
 +
 
 +
#menu_bar ul {
 +
width: 229px;
 +
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">
 +
 
 +
//*******************************************************************
 +
//************************SLIDESHOW SCRIPT***************************
 +
//*******************************************************************
 +
 
 +
//Finds the next slide and returns its 'slide' + x id.
 +
function getNextSlide(curElemID) {
-
#menu_bar {
+
var nextElem = document.getElementById('slide' + (curElemID + 1));
-
float: left;
+
if (nextElem) {
-
padding-right: 5px;
+
var nextElemID = curElemID + 1;
-
}
+
} else {
 +
var nextElemID = 1;
 +
} //end if
-
#menu_bar dt {
+
return nextElemID;
-
width: 188px;
+
-
border: 2px solid #000;
+
-
padding: 8px;
+
-
font-weight: bold;
+
-
cursor: pointer;
+
-
background: #FFF;
+
-
}
+
-
#menu_bar dt:hover {
+
} //end function getNextSlide
-
background: #666;
+
 
-
}
+
//Changes menu_bar element in coordination with slides
 +
function menuBar(curElemID) {
-
#menu_bar dd {
+
nextElemID = getNextSlide(curElemID);
-
position: absolute;
+
var curMenuElem = document.getElementById(curElemID + '-ddheader');
-
overflow: hidden;
+
var nextMenuElem = document.getElementById(nextElemID + '-ddheader');
-
width: 208px;
+
-
display: none;
+
-
background: #fff;
+
-
z-index: 200;
+
-
opacity: 0;
+
-
}
+
-
#menu_bar ul {
+
//menu_bar item change actions go here
-
width: 204px;
+
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/
-
border: 2px solid #000;
+
-
list-style: none;
+
-
border-top: none;
+
-
}
+
-
#menu_bar li {
+
//Change last menu_bar item back to its normal state
-
display: inline;
+
curMenuElem.style.background = '#925F00'; /*******COLOR*******/
-
}
+
-
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {
+
} //end function menuBar
-
display: block;
+
 
-
padding: 5px;
+
//Performs fade animation; main function
-
color: #000;
+
function fade(curElemID,isFading) {
-
text-decoration: none;
+
-
background: #FFF;
+
-
width: 194px;
+
-
}
+
-
#menu_bar a:hover {
+
//Length that each slide shows before fade (in milliseconds)
-
background: #666;
+
var slideTime = 2000;
-
color: #000;
+
-
}
+
-
#menu_bar .underline {
+
//Length of fade (milliseconds)
-
border-bottom: 1px solid #000;
+
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
-
</style>
+
</script>
<script type="text/javascript">
<script type="text/javascript">
 +
 +
//*******************************************************************
 +
//************************DROPDOWN SCRIPT****************************
 +
//*******************************************************************
 +
var DDSPEED = 10;
var DDSPEED = 10;
var DDTIMER = 15;
var DDTIMER = 15;
Line 127: Line 330:
   }
   }
}
}
-
 
-
var TINY={};
 
-
 
-
function T$(i){return document.getElementById(i)}
 
-
function T$$(e,p){return p.getElementsByTagName(e)}
 
-
TINY.fader=function(){
 
-
function fade(n,p){this.n=n; this.init(p)}
 
-
fade.prototype.init=function(p){
 
-
var s=T$(p.id), u=this.u=T$$('dt',s), l=u.length, i=this.l=this.c=this.z=0;
 
-
if(p.navid&&p.activeclass){this.g=T$$('dt',T$(p.navid)); this.s=p.activeclass}
 
-
s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
 
-
for(i;i<l;i++){
 
-
if(u[i].parentNode==s){
 
-
u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
 
-
u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
 
-
}
 
-
}
 
-
this.pos(p.position||0,this.a?1:0,p.visible)
 
-
},
 
-
fade.prototype.auto=function(){
 
-
this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
 
-
},
 
-
fade.prototype.move=function(d,a){
 
-
var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
 
-
},
 
-
fade.prototype.pos=function(i,a,v){
 
-
var p=this.u[i]; this.z++; p.style.zIndex=this.z;
 
-
clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
 
-
if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
 
-
if(this.g) {
 
-
for(var x=0;x<this.l;x++) {
 
-
if (i==x) {
 
-
//this.g[x].className=x==i?this.s:'';
 
-
//********CURRENT MENU ITEM STYLE GOES HERE**************
 
-
this.g[x].style.background='#666';
 
-
} else {
 
-
//********OFF MENU ITEM STYLE GOES HERE**************
 
-
this.g[x].style.background='#FFF';
 
-
}
 
-
}
 
-
}
 
-
p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
 
-
},
 
-
fade.prototype.fade=function(i,a){
 
-
var p=this.u[i];
 
-
if(p.o>=100){
 
-
clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
 
-
}else{
 
-
p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
 
-
}
 
-
};
 
-
return{fade:fade}
 
-
}();
 
</script>
</script>
</head>
</head>
-
<body>
+
<body onLoad="fade(1,false); menuBar(0);">
-
<dl id="menu_bar">
+
<div id="csu_content">
-
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">menu_bar One</dt>
+
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a>
-
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
+
<div id="bodycontent">
-
    <ul>
+
<div id="content_top">
-
      <li><a href="#" class="underline">Navigation Item 1</a></li>
+
        <div id="slideshow">
-
      <li><a href="#" class="underline">Navigation Item 2</a></li>
+
      <img src="https://lh3.googleusercontent.com/-ZigNmO_3Dg4/UAWcIJbtgZI/AAAAAAAAALg/istDqjXyEk8/s832/csu_logo.png" style="position: absolute; z-index: 200; width: 200px; top: 20px; right: 20px;" />
-
      <li><a href="#" class="underline">Navigation Item 3</a></li>
+
            <img id="slide1" class="slide" src="https://lh4.googleusercontent.com/-icdH9nCgILg/UAWcJDs6qlI/AAAAAAAAAMA/I9cf4OFNE9E/s800/temp1.jpg" style="z-index: 30;" />
-
      <li><a href="#" class="underline">Navigation Item 4</a></li>
+
            <img id="slide2" class="slide" src="https://lh5.googleusercontent.com/-jdDeA36YR_A/UAWcJqulWEI/AAAAAAAAAMU/qAn0y-b6j1w/s912/temp2.jpg" />
-
      <li><a href="#">Navigation Item 5</a></li>
+
            <img id="slide3" class="slide" src="https://lh3.googleusercontent.com/--Ra__21nthQ/UAWcJVWY7CI/AAAAAAAAAME/lrW_S_gHgL8/s800/temp3.jpg" />
-
    </ul>
+
        </div>
-
  </dd>
+
        <table id="menu_bar" cellspacing="0">
-
</dl>
+
        <tr>
 +
            <td>
 +
            <dl>
 +
                <dt id="1-ddheader" onMouseOver="ddMenu('1',1)" onMouseOut="ddMenu('1',-1)">Project Brew</dt>
 +
                <dd id="1-ddcontent" onMouseOver="cancelHide('1')" onMouseOut="ddMenu('1',-1)">
 +
                    <ul>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State">Home</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</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/Safety">Safety</a></li>
 +
                    </ul>
 +
                </dd>
 +
            </dl>
 +
            </td>
 +
            <td>
 +
            <dl>
 +
                <dt id="2-ddheader" onMouseOver="ddMenu('2',1)" onMouseOut="ddMenu('2',-1)">The Brew</dt>
 +
                <dd id="2-ddcontent" onMouseOver="cancelHide('2')" onMouseOut="ddMenu('2',-1)">
 +
                    <ul>
 +
                        <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>
 +
                        <li><a href="#">Navigation Item 3</a></li>
 +
                        <li><a href="#">Navigation Item 4</a></li>
 +
                        <li><a href="#">Navigation Item 5</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">Team</a></li>
 +
                        <li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li>
 +
                        <li><a href="#">Navigation Item 3</a></li>
 +
                        <li><a href="#">Navigation Item 4</a></li>
 +
                        <li><a href="#">Navigation Item 5</a></li>
 +
                    </ul>
 +
                </dd>
 +
            </dl>
 +
            </td>
 +
        </tr>
 +
        </table>
 +
    </div>
 +
    <div id="content_main">
 +
    <a href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State&amp;action=edit">Edit page</a>
 +
        <br>
 +
    <a href="http://rclouse145.wix.com/2012csuigem#!home/mainPage">http://rclouse145.wix.com/2012csuigem#!home/mainPage</a>
 +
        <br>
 +
    <p>Duis nonsequ ismodol et oreetuer iril dolore facidunt, vulluptat volore consecte dolesed dolor velit ver adionse ot magnisc illandi et gniamet, vendre feum veniamc onullutpatin hent ipit wisi esse dolesting ero dunt utpatin vel ipit, quation ullum aut prat. Am autet, quatet nos od minci euip enim deles sequisl et ullutat augait facilla ad ea autpatie eui blan henim adte facip eugait lametue rostis nonsenibh exeriliquat incin heniam, secte at dolesequat nulla facilit la consectet nim iusto dunt utpatin vel ipit, quation magnis do et nit augiatie erat.</p>
 +
    </div>
 +
    <div id="footer">
 +
    <img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;" />
 +
    <img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; width: 100%; height: auto; z-index: 5;"/>
 +
</div>
 +
</div>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 17:49, 17 July 2012

Edit page
http://rclouse145.wix.com/2012csuigem#!home/mainPage

Duis nonsequ ismodol et oreetuer iril dolore facidunt, vulluptat volore consecte dolesed dolor velit ver adionse ot magnisc illandi et gniamet, vendre feum veniamc onullutpatin hent ipit wisi esse dolesting ero dunt utpatin vel ipit, quation ullum aut prat. Am autet, quatet nos od minci euip enim deles sequisl et ullutat augait facilla ad ea autpatie eui blan henim adte facip eugait lametue rostis nonsenibh exeriliquat incin heniam, secte at dolesequat nulla facilit la consectet nim iusto dunt utpatin vel ipit, quation magnis do et nit augiatie erat.

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