Template:CSU Template 1 top

From 2012.igem.org

(Difference between revisions)
 
(49 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, with the exception of the dropdown menu
+
All code is original, except the dropdown menu, which is modified
-
Javascript and HTML code, 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:
}
}
-
/*************************************************************
+
/*
-
***********************HEY YOU! YA, YOU!!*********************
+
-
**************************************************************
+
-
 
+
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: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) 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;
-
}
 
-
 
-
#side_bar {
 
-
position: fixed;
 
-
top: 100px;
 
-
right: 0;
 
-
width: 200px;
 
-
height: 250px;
 
-
z-index: 100;
 
-
cursor: pointer;
 
-
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;
 
-
background-size: 100% 100%;
 
-
}
 
-
 
-
#side_bar:hover {
 
-
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;
 
-
background-size: 100% 100%;
 
}
}
Line 197: Line 172:
width: 100%;
width: 100%;
height: 270px;
height: 270px;
 +
overflow: hidden;
}
}
.slide {
.slide {
position: absolute;
position: absolute;
-
width: 100%;
+
right: 0;
 +
float: right;
 +
width: auto;
height: 100%;
height: 100%;
-
background-size: auto 100%;
 
}
}
Line 236: Line 213:
display: none;
display: none;
background: #E9B300; /*******COLOR*******/
background: #E9B300; /*******COLOR*******/
-
z-index: 200;
+
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 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 = 30;
+
curElem.style.zIndex = 3;
-
nextElem.style.zIndex = 20;
+
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;
-
setTimeout(function() {fade(curElemID)}, (fadeTime/numFadeLoops));
+
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 = 10;
+
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(function() {fade(nextElemID, false)}, slideStayTime);
+
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(curElemID + '-ddheader');
+
var curMenuElem = document.getElementById('ddHeader' + curElemID);
-
var nextMenuElem = document.getElementById(nextElemID + '-ddheader');
+
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 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 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: 50%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;">
+
         <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"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a>
+
             <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>
-
             <div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div>
+
             <img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" />
-
             <div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div>
+
             <img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" />
-
             <div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div>
+
             <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="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 495: Line 497:
                 </dd>
                 </dd>
             </dl>
             </dl>
-
            </td>
+
        </td>
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="2-ddheader" onMouseOver="ddMenu('2',1)" onMouseOut="ddMenu('2',-1)">The Brew</dt>
+
                 <dt id="ddHeader2" class="leftBorder" 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 516:
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="3-ddheader" onMouseOver="ddMenu('3',1)" onMouseOut="ddMenu('3',-1)">The Brewers</dt>
+
                 <dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt>
-
                 <dd id="3-ddcontent" onMouseOver="cancelHide('3')" onMouseOut="ddMenu('3',-1)">
+
                 <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>
+
<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

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