Template:CSU Template 1 top

From 2012.igem.org

(Difference between revisions)
Line 267: Line 267:
<script type="text/javascript">
<script type="text/javascript">
-
//Javascript link function
+
//*********VARIABLE DOCUMENTATION*********
-
function linkTo(url) {
+
//slideTime: length of slide (milliseconds); must be same as fadeTime for dropdown menu
-
window.location.href = url;
+
//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
-
//Simple function that performs startup scripts when prompted
+
//slideInc: slide Increments in pixels: > means smoother, more CPU-intensive transition
-
function startFunctions () {
+
//slideStayTime: length that each slide shows before fade (in milliseconds)
-
+
 
-
setTimeout('fade(1,false)', 2000);
+
//In order for fade to work correctly, opacity must be rounded to
-
menuBar(0);
+
//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***************************
//*******************************************************************
//*******************************************************************
-
 
-
//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
//Performs fade animation; main function
function fade(curElemID,isFading) {
function fade(curElemID,isFading) {
-
//Length that each slide shows before fade (in milliseconds)
+
var slideStayTime = 2000;
-
var slideTime = 2000;
+
-
+
-
//Length of fade (milliseconds)
+
var fadeTime = 1000;
var fadeTime = 1000;
-
 
-
//Fade Increments: > means smoother, more CPU-intensive transition
 
var fadeInc = 10;
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 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)',slideTime);
+
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 Project</dt>
+
                 <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

Retrieved from "http://2012.igem.org/Template:CSU_Template_1_top"