Template:CSU Template 1 top
From 2012.igem.org
(Difference between revisions)
(57 intermediate revisions not shown) | |||
Line 14: | Line 14: | ||
by Ethan Ho - Ethan.N.Ho@Gmail.com | by Ethan Ho - Ethan.N.Ho@Gmail.com | ||
- | All code is original, | + | All code is original, except the dropdown menu, which is modified |
- | + | code. | |
Do not copy or in any way, shape, or form, use any of this code | Do not copy or in any way, shape, or form, use any of this code | ||
without the explicit permission of Ethan Ho (reachable by above | without the explicit permission of Ethan Ho (reachable by above | ||
- | E-mail). | + | E-mail). I'll probably say yes. |
Be a good person. Obey the rules. | Be a good person. Obey the rules. | ||
Line 39: | Line 39: | ||
} | } | ||
- | /* | + | /* |
- | + | ||
- | + | ||
- | + | ||
If you want to edit each individual page, uncomment the following | If you want to edit each individual page, uncomment the following | ||
line of code to reveal the handy "Edit page" buttons! | line of code to reveal the handy "Edit page" buttons! | ||
*/ | */ | ||
- | |||
- | |||
.editbutton {visibility: visible; width: auto; height: auto;} | .editbutton {visibility: visible; width: auto; height: auto;} | ||
- | |||
- | |||
- | |||
/*********NOTES********* | /*********NOTES********* | ||
Line 93: | Line 85: | ||
body { | body { | ||
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800; | background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800; | ||
- | |||
background-size: 100% 100%; | background-size: 100% 100%; | ||
height: 100%; | height: 100%; | ||
Line 119: | Line 110: | ||
width: 100%; | width: 100%; | ||
bottom: 0; | bottom: 0; | ||
+ | z-index: 1; | ||
} | } | ||
Line 124: | Line 116: | ||
padding: 40px; | padding: 40px; | ||
padding-top: 0; | padding-top: 0; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 197: | Line 172: | ||
width: 100%; | width: 100%; | ||
height: 270px; | height: 270px; | ||
+ | overflow: hidden; | ||
} | } | ||
.slide { | .slide { | ||
position: absolute; | position: absolute; | ||
- | width: | + | right: 0; |
+ | float: right; | ||
+ | width: auto; | ||
height: 100%; | height: 100%; | ||
- | |||
} | } | ||
Line 236: | Line 213: | ||
display: none; | display: none; | ||
background: #E9B300; /*******COLOR*******/ | background: #E9B300; /*******COLOR*******/ | ||
- | z-index: | + | z-index: 4; |
opacity: 0; | opacity: 0; | ||
} | } | ||
Line 262: | Line 239: | ||
#menu_bar a:hover { | #menu_bar a:hover { | ||
background: #F1C900; /*******COLOR*******/ | background: #F1C900; /*******COLOR*******/ | ||
+ | } | ||
+ | |||
+ | .leftBorder { | ||
+ | border-left: solid 2px #CCC; | ||
} | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | |||
//newOpac: sets new opacity | //newOpac: sets new opacity | ||
Line 277: | Line 257: | ||
//length that each slide shows before fade (in milliseconds) | //length that each slide shows before fade (in milliseconds) | ||
- | var slideStayTime = | + | var slideStayTime = 3000; |
//length of fade (milliseconds) | //length of fade (milliseconds) | ||
- | var fadeTime = | + | var fadeTime = 800; |
//number of fade loops: > means smoother, more CPU-intensive transition | //number of fade loops: > means smoother, more CPU-intensive transition | ||
- | var numFadeLoops = | + | var numFadeLoops = 8; |
//In order for fade to work correctly, opacity must be rounded to | //In order for fade to work correctly, opacity must be rounded to | ||
Line 308: | Line 288: | ||
//next slide in the corresponding z-index (2). Slides that are | //next slide in the corresponding z-index (2). Slides that are | ||
//neither the current or next slide should have z-index = 1. | //neither the current or next slide should have z-index = 1. | ||
- | curElem.style.zIndex = | + | curElem.style.zIndex = 3; |
- | nextElem.style.zIndex = | + | nextElem.style.zIndex = 2; |
//Sets a preliminary opacities. Optional | //Sets a preliminary opacities. Optional | ||
curElem.style.opacity = 1; | curElem.style.opacity = 1; | ||
+ | curElem.style.filter = 'alpha(opacity=100)'; | ||
nextElem.style.opacity = 1; | nextElem.style.opacity = 1; | ||
+ | nextElem.style.filter = 'alpha(opacity=100)'; | ||
} //end if | } //end if | ||
Line 323: | Line 305: | ||
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; | ||
- | + | curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')'; | |
+ | setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops)); | ||
//Current slide has faded completely | //Current slide has faded completely | ||
Line 329: | Line 312: | ||
//Sets the current slide to a hidden state with full opacity | //Sets the current slide to a hidden state with full opacity | ||
- | curElem.style.zIndex = | + | curElem.style.zIndex = 1; |
curElem.style.opacity = 1; | curElem.style.opacity = 1; | ||
+ | curElem.style.filter = 'alpha(opacity=100)'; | ||
//Sets next slide element. If there is no next slide, | //Sets next slide element. If there is no next slide, | ||
Line 338: | Line 322: | ||
//Starts next fade. isFading = false is a required parameter | //Starts next fade. isFading = false is a required parameter | ||
- | setTimeout( | + | setTimeout(function(){fade(nextElemID, false)}, slideStayTime); |
//Menu bar functions | //Menu bar functions | ||
Line 365: | Line 349: | ||
nextElemID = getNextSlide(curElemID); | nextElemID = getNextSlide(curElemID); | ||
- | var curMenuElem = document.getElementById( | + | var curMenuElem = document.getElementById('ddHeader' + curElemID); |
- | var nextMenuElem = document.getElementById( | + | var nextMenuElem = document.getElementById('ddHeader' + nextElemID); |
//menu_bar item change actions go here | //menu_bar item change actions go here | ||
Line 380: | Line 364: | ||
//******************************************************************* | //******************************************************************* | ||
- | var | + | var ddspeed = 10; |
- | var | + | var ddtimer = 15; |
//Main function to handle the mouse events | //Main function to handle the mouse events | ||
- | function | + | function ddMain(id, direction) { |
- | + | ||
- | + | var headerElem = document.getElementById('ddHeader' + id); | |
- | + | var contentElem = document.getElementById('ddContent' + id); | |
- | + | clearInterval(contentElem.timer); | |
- | + | ||
- | + | if (direction == 1) { | |
- | + | clearTimeout(headerElem.timer); | |
- | + | if (contentElem.maxh <= contentElem.offsetHeight) { | |
- | + | if (contentElem.maxh) { | |
- | + | return; | |
- | + | } //end if | |
- | + | } else if (!contentElem.maxh) { | |
- | + | contentElem.style.display = 'block'; | |
- | + | contentElem.style.height = 'auto'; | |
- | + | contentElem.maxh = contentElem.offsetHeight; | |
- | + | contentElem.style.height = '0px'; | |
- | + | } //end if | |
- | + | contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer); | |
- | + | } else { | |
- | + | headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50); | |
- | } | + | } //end if |
+ | |||
+ | } //end function ddMain | ||
//Collapse menu | //Collapse menu | ||
- | function ddCollapse( | + | function ddCollapse(contentElem) { |
- | + | ||
- | } | + | 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 | + | function cancelCollapse(id) { |
- | + | ||
- | + | var headerElem = document.getElementById('ddHeader' + id); | |
- | + | var contentElem = document.getElementById('ddContent' + id); | |
- | + | clearTimeout(headerElem.timer); | |
- | + | clearInterval(contentElem.timer); | |
- | + | ||
- | + | 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( | + | function ddSlide(contentElem,direction) { |
- | + | ||
- | + | var curHeight = contentElem.offsetHeight; | |
- | + | ||
- | + | if (direction == 1) { | |
- | + | distance = Math.round((contentElem.maxh - curHeight) / ddspeed); | |
- | + | } else { | |
- | + | distance = Math.round(curHeight / ddspeed); | |
- | + | } //end if | |
- | + | ||
- | + | if (distance <= 1) { | |
- | + | if (direction == 1) { | |
- | + | distance = 1; | |
- | + | } //end if | |
- | + | } //end if | |
- | + | ||
- | + | contentElem.style.height = curHeight + (distance * direction) + 'px'; | |
- | + | contentElem.style.opacity = curHeight / contentElem.maxh; | |
- | + | contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')'; | |
- | + | ||
- | + | if (curHeight < 2) { | |
- | + | if (direction != 1) { | |
- | + | 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 473: | Line 468: | ||
</head> | </head> | ||
<body> | <body> | ||
- | <div style="border: solid red 1px;" id="menubar"></div> | + | <img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="100" height="100" style="position: fixed; top: 10px; right: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /> |
+ | <div style="border: solid red 1px;" id="menubar"></div> | ||
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a> | <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a> | ||
<div id="content_top"> | <div id="content_top"> | ||
<div id="slideshow"> | <div id="slideshow"> | ||
- | <div style="position: absolute; top: 0; left: 0; height: 100%; width: | + | <div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"> |
- | <a href="https://2012.igem.org/Team:Colorado_State">< | + | <a href="https://2012.igem.org/Team:Colorado_State"> |
+ | <div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"> | ||
+ | <img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /> | ||
+ | <img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /> | ||
+ | <img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /> | ||
+ | </div> | ||
+ | </a> | ||
</div> | </div> | ||
- | < | + | <img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /> |
- | < | + | <img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /> |
- | < | + | <img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /> |
</div> | </div> | ||
<table id="menu_bar" cellspacing="0"> | <table id="menu_bar" cellspacing="0"> | ||
Line 488: | Line 490: | ||
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt> |
- | + | <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 495: | Line 497: | ||
</dd> | </dd> | ||
</dl> | </dl> | ||
- | + | </td> | |
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt> |
- | <dd id=" | + | <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/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=" | + | <li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li> |
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li> | <li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</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/Modeling">Modeling</a></li> | ||
Line 514: | Line 516: | ||
<td> | <td> | ||
<dl> | <dl> | ||
- | <dt id=" | + | <dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt> |
- | <dd id=" | + | <dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(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> | ||
+ | <li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li> | ||
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li> | <li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li> | ||
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li> | <li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li> | ||
Line 529: | Line 532: | ||
</table> | </table> | ||
</div> | </div> | ||
- | + | <script type="text/javascript">startFunctions();</script> | |
<div id="content_main"> | <div id="content_main"> | ||
</html> | </html> |
Latest revision as of 14:25, 1 July 2013
|