"
Template:CSU Template 1 top
From 2012.igem.org
html xmlns="http://www.w3.org/1999/xhtml"> <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; }
body {
background: url(
) top left fixed;
height: 100%;
width: 100%;
}
- content {
position: relative;
top: -10px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 700px;
height: 610px;
border: none;
background: url(
) repeat top left;
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/ font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", sans-serif; color: #CCC; /*******COLOR*******/ }
- footer {
position: absolute; width: 100%; bottom: 0; }
- content_main {
padding: 40px; }
- side_bar {
position: fixed;
top: 100px;
left: 0;
width: 240px;
height: 300px;
z-index: 100;
cursor: pointer;
background: url(
) no-repeat top left;
}
- side_bar:hover {
background: url(
) no-repeat top left;
}
- content a {
font-weight: bold; color: #F1C900; text-decoration: none; }
- content 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; 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: 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) {
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
</script> <script type="text/javascript">
//******************************************************************* //************************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 the 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 onLoad="fade(1,false); menuBar(0);"> <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a>
<img src="" style="position: absolute; z-index: 200; width: 200px; top: 20px; right: 20px;" /> <img id="slide1" class="slide" src="
" style="z-index: 30;" /> <img id="slide2" class="slide" src="
" /> <img id="slide3" class="slide" src="
" />
|
|
|
