Template:CSU Template 1 top

From 2012.igem.org

(Difference between revisions)
Line 323: Line 323:
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;
curElem.style.opacity = newOpac;
curElem.style.opacity = newOpac;
-
setTimeout(function() {fade(curElemID)}, (fadeTime/numFadeLoops));
+
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));
//Current slide has faded completely
//Current slide has faded completely
Line 338: Line 338:
//Starts next fade.  isFading = false is a required parameter
//Starts next fade.  isFading = false is a required parameter
-
setTimeout(function() {fade(nextElemID, false)}, slideStayTime);
+
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);
//Menu bar functions
//Menu bar functions
Line 380: Line 380:
//*******************************************************************
//*******************************************************************
-
var DDSPEED = 10;
+
var ddspeed = 10;
-
var DDTIMER = 15;
+
var ddtimer = 15;
//Main function to handle the mouse events
//Main function to handle the mouse events
-
function ddMenu(id,d){
+
function ddMain(id, direction) {
-
  var h = document.getElementById(id + '-ddheader');
+
-
  var c = document.getElementById(id + '-ddcontent');
+
var headerElem = document.getElementById('ddHeader' + id);
-
  clearInterval(c.timer);
+
var contentElem = document.getElementById('ddContent' + id);
-
  if(d == 1){
+
clearInterval(contentElem.timer);
-
clearTimeout(h.timer);
+
-
if (c.maxh <= c.offsetHeight) {
+
if (direction == 1) {
-
if (c.maxh) {
+
clearTimeout(headerElem.timer);
-
return;
+
if (contentElem.maxh <= contentElem.offsetHeight) {
-
}
+
if (contentElem.maxh) {
-
}
+
return;
-
else if(!c.maxh){
+
} //end if
-
  c.style.display = 'block';
+
} else if (!contentElem.maxh) {
-
  c.style.height = 'auto';
+
contentElem.style.display = 'block';
-
  c.maxh = c.offsetHeight;
+
contentElem.style.height = 'auto';
-
  c.style.height = '0px';
+
contentElem.maxh = contentElem.offsetHeight;
-
}
+
contentElem.style.height = '0px';
-
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
} //end if
-
  }else{
+
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);
-
h.timer = setTimeout(function(){ddCollapse(c)},50);
+
} else {
-
  }
+
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);
-
}
+
} //end if
 +
 +
} //end function ddMain
//Collapse menu
//Collapse menu
-
function ddCollapse(c){
+
function ddCollapse(contentElem) {
-
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
+
-
}
+
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);
 +
 +
} //end function ddCollapse
//Cancel the collapse if a user rolls over the dropdown
//Cancel the collapse if a user rolls over the dropdown
-
function cancelHide(id){
+
function cancelCollapse(id) {
-
  var h = document.getElementById(id + '-ddheader');
+
-
  var c = document.getElementById(id + '-ddcontent');
+
var headerElem = document.getElementById('ddHeader' + id);
-
  clearTimeout(h.timer);
+
var contentElem = document.getElementById('ddContent' + id);
-
  clearInterval(c.timer);
+
clearTimeout(headerElem.timer);
-
  if(c.offsetHeight < c.maxh){
+
clearInterval(contentElem.timer);
-
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
-
  }
+
if (contentElem.offsetHeight < contentElem.maxh) {
 +
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);
 +
} //end if
 +
}
}
//Incrementally expand/contract the dropdown and change the opacity
//Incrementally expand/contract the dropdown and change the opacity
-
function ddSlide(c,d){
+
function ddSlide(contentElem,direction) {
-
  var currh = c.offsetHeight;
+
-
  var dist;
+
var curHeight = contentElem.offsetHeight;
-
  if(d == 1){
+
-
dist = (Math.round((c.maxh - currh) / DDSPEED));
+
if (direction == 1) {
-
  }else{
+
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);
-
dist = (Math.round(currh / DDSPEED));
+
} else {
-
  }
+
distance = Math.round(curHeight / ddspeed);
-
  if(dist <= 1){
+
} //end if
-
  if ( d == 1) {
+
-
  dist = 1;
+
if (distance <= 1) {
-
  }
+
if (direction == 1) {
-
  }
+
distance = 1;
-
  c.style.height = currh + (dist * d) + 'px';
+
} //end if
-
  c.style.opacity = currh / c.maxh;
+
} //end if
-
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
+
-
  if (currh < 2) {
+
contentElem.style.height = curHeight + (distance * direction) + 'px';
-
if (d != 1) {
+
contentElem.style.opacity = curHeight / contentElem.maxh;
-
clearInterval(c.timer);
+
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';
-
}
+
-
  } else if (currh > (c.maxh - 2)) {
+
if (curHeight < 2) {
-
if (d == 1) {
+
if (direction != 1) {
-
clearInterval(c.timer);
+
clearInterval(contentElem.timer);
-
}
+
} //end if
-
  }
+
} else if (curHeight > (contentElem.maxh - 2)) {
-
}
+
if (direction == 1) {
 +
clearInterval(contentElem.timer);
 +
} //end if
 +
} //end if
 +
} //end function ddSlide
//*******************************************************************
//*******************************************************************
Line 488: Line 499:
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="1-ddheader" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt>
+
                 <dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt>
-
                 <dd id="1-ddcontent">
+
                 <dd id="ddContent1">
                     <ul>
                     <ul>
                     <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li>
                     <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li>
Line 498: Line 509:
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="2-ddheader" onMouseOver="ddMenu('2',1)" onMouseOut="ddMenu('2',-1)">The Brew</dt>
+
                 <dt id="ddHeader2" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt>
-
                 <dd id="2-ddcontent" onMouseOver="cancelHide('2')" onMouseOut="ddMenu('2',-1)">
+
                 <dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)">
                     <ul>
                     <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/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="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/Results">Results</a></li>
                         <li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li>
Line 514: Line 525:
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="3-ddheader" onMouseOver="ddMenu('3',1)" onMouseOut="ddMenu('3',-1)">The Brewers</dt>
+
                 <dt id="ddHeader3" onMouseOver="ddMenu(3,1)" onMouseOut="ddMenu(3)">The Brewers</dt>
-
                 <dd id="3-ddcontent" onMouseOver="cancelHide('3')" onMouseOut="ddMenu('3',-1)">
+
                 <dd id="ddContent3" onMouseOver="cancelHide(3)" onMouseOut="ddMenu(3)">
                     <ul>
                     <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/Team">Meet the Students</a></li>

Revision as of 17:27, 31 July 2012

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