Template:CSU Template 1 top
From 2012.igem.org
(Difference between revisions)
Line 267: | Line 267: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | // | + | //*********VARIABLE DOCUMENTATION********* |
- | + | //slideTime: length of slide (milliseconds); must be same as fadeTime for dropdown menu | |
- | + | //fadeTime: length of fade (milliseconds); must be same as slideTime for dropdown menu | |
- | + | //fadeInc: fade Increments in opacity units: > means smoother, more CPU-intensive transition | |
- | // | + | //slideInc: slide Increments in pixels: > means smoother, more CPU-intensive transition |
- | + | //slideStayTime: length that each slide shows before fade (in milliseconds) | |
- | + | ||
- | + | //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. | |
+ | |||
+ | //newOpac: sets new opacity | ||
//******************************************************************* | //******************************************************************* | ||
//************************SLIDESHOW SCRIPT*************************** | //************************SLIDESHOW SCRIPT*************************** | ||
//******************************************************************* | //******************************************************************* | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
//Performs fade animation; main function | //Performs fade animation; main function | ||
function fade(curElemID,isFading) { | function fade(curElemID,isFading) { | ||
- | + | var slideStayTime = 2000; | |
- | var | + | |
- | + | ||
- | + | ||
var fadeTime = 1000; | var fadeTime = 1000; | ||
- | |||
- | |||
var fadeInc = 10; | var fadeInc = 10; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
var roundTo = 1; | var roundTo = 1; | ||
var roundNum = Math.pow(10, roundTo); | var roundNum = Math.pow(10, roundTo); | ||
Line 362: | Line 325: | ||
//Fades out the current slide if it is not already completely faded yet | //Fades out the current slide if it is not already completely faded yet | ||
- | if (curElem.style.opacity > 0) { | + | if (parseFloat(curElem.style.opacity) > 0) { |
//Sets new opacity and reruns the function | //Sets new opacity and reruns the function | ||
- | var newOpac = (Math.round(roundNum * (curElem.style.opacity - (1/fadeInc)))) / roundNum; | + | var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/fadeInc)))) / roundNum; |
curElem.style.opacity = newOpac; | curElem.style.opacity = newOpac; | ||
setTimeout('fade(' + curElemID + ')', (fadeTime/fadeInc)); | setTimeout('fade(' + curElemID + ')', (fadeTime/fadeInc)); | ||
Line 382: | Line 345: | ||
//Starts next fade. isFading = false is a required parameter | //Starts next fade. isFading = false is a required parameter | ||
- | setTimeout('fade(' + nextElemID + ',false)', | + | setTimeout('fade(' + nextElemID + ',false)',slideStayTime); |
//Menu bar functions | //Menu bar functions | ||
Line 390: | Line 353: | ||
} //end function fade | } //end function fade | ||
+ | |||
+ | //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 | ||
//******************************************************************* | //******************************************************************* | ||
Line 465: | Line 457: | ||
} | } | ||
} | } | ||
+ | |||
+ | //******************************************************************* | ||
+ | //************************MISC FUNCTIONS***************************** | ||
+ | //******************************************************************* | ||
+ | |||
+ | //Javascript link function | ||
+ | function linkTo(url) { | ||
+ | |||
+ | window.location.href = url; | ||
+ | |||
+ | } //end function linkTo | ||
+ | |||
+ | //Simple function that performs startup scripts when prompted | ||
+ | function startFunctions () { | ||
+ | |||
+ | setTimeout('fade(1,false)', 2000); | ||
+ | menuBar(0); | ||
+ | |||
+ | } //end function startFunctions | ||
</script> | </script> | ||
Line 494: | Line 505: | ||
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id="2-ddheader" onMouseOver="ddMenu('2',1)" onMouseOut="ddMenu('2',-1)">The | + | <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)"> | <dd id="2-ddcontent" onMouseOver="cancelHide('2')" onMouseOut="ddMenu('2',-1)"> | ||
<ul> | <ul> |
Revision as of 20:54, 24 July 2012