Template:CSU Template 1 top

From 2012.igem.org

(Difference between revisions)
 
(48 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;
 +
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));
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 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 484: 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 500: Line 491:
             <dl>
             <dl>
                 <dt id="ddHeader1" 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="ddContent1">
+
              <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 506: Line 497:
                 </dd>
                 </dd>
             </dl>
             </dl>
-
            </td>
+
        </td>
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="ddHeader2" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt>
+
                 <dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt>
                 <dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)">
                 <dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)">
                     <ul>
                     <ul>
Line 525: Line 516:
             <td>
             <td>
             <dl>
             <dl>
-
                 <dt id="ddHeader3" onMouseOver="ddMenu(3,1)" onMouseOut="ddMenu(3)">The Brewers</dt>
+
                 <dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt>
-
                 <dd id="ddContent3" onMouseOver="cancelHide(3)" onMouseOut="ddMenu(3)">
+
                 <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 540: 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