Team:Manchester

From 2013.igem.org

(Difference between revisions)
Line 37: Line 37:
Please enjoy :) .
Please enjoy :) .
===================================================================-->
===================================================================-->
-
 
+
<!--==========================Javascript for MENU (written below)================-->
-
 
+
<script type="text/javascript">
-
<body>
+
var fisheyemenu = {
-
 
+
startSize : 65,
-
<!--==========================General Document Styling
+
endSize : 90,
-
And CSS for sliders================-->
+
imgType : ".png",
-
<style>  
+
init : function () {
-
 
+
var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
+
var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
-
    display:none;}
+
for(var j=0; j<titleElements.length; j++) {
-
#top-section {
+
titleElements[j].style.display = 'none';
-
background-repeat: no-repeat;
+
-
background-position: center top;
+
-
height:1220px ! important;
+
-
background:#215E21;
+
}
}
-
body {
+
for(var i=0; i<animElements.length; i++) {
-
    background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
+
var y = animElements[i];
-
    background-attachment: fixed;
+
y.style.width = fisheyemenu.startSize+'px';
-
    height:0px;
+
y.style.height = fisheyemenu.startSize+'px';
 +
fisheyemenu.imgSmall(y);
 +
animElements[i].onmouseover = changeSize;
 +
animElements[i].onmouseout = restoreSize;
}
}
-
#content{height:0px}
+
function changeSize() {
-
h1 a, h2 a, h3 a {
+
fisheyemenu.imgLarge(this);
-
text-decoration: none;
+
var x = this.parentNode.getElementsByTagName("span");
-
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+
x[0].style.display = 'block';
-
font-size: 1.75em;
+
if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
-
line-height: 1.5em;
+
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
-
font-weight: 200;
+
-
color:#fff
+
}
}
-
p {
+
function restoreSize() {
-
text-decoration: none;
+
var x = this.parentNode.getElementsByTagName("span");
-
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+
x[0].style.display = 'none';
-
font-size: 1.25em;
+
if (!this.currentWidth) return;
-
line-height: 1.5em;
+
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
-
font-weight: 150;
+
fisheyemenu.imgSmall(this);
-
color:#fff
+
}
}
-
 
+
},
-
 
+
resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
-
.slideshow {
+
if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
-
position: relative;
+
var actStep = 0;
-
min-height: 220px;  
+
elem.widthChangeMemInt = window.setInterval(
-
clear: both;
+
function() {
-
margin: 35px 0 25px;
+
elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
 +
elem.style.width = elem.currentWidth+"px";
 +
elem.style.height = elem.currentWidth+"px";
 +
actStep++;
 +
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
}
}
-
.slide {
+
,intervals)
-
  float: left;  
+
},
 +
easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {
 +
//Generic Animation Step Value Generator By www.hesido.com
 +
var delta = maxValue - minValue;
 +
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
 +
return Math.ceil(stepp)
 +
},
 +
imgSmall : function (obj) {
 +
imgSrc = obj.getAttribute("src");
 +
var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);
 +
var imgName = imgSrc.substr(0, typePos);
 +
obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);
 +
},
 +
imgLarge : function (obj) {
 +
imgSrc = obj.getAttribute("src");
 +
var typePos = imgSrc.indexOf("_small", 0);
 +
var imgName = imgSrc.substr(0, typePos);
 +
obj.setAttribute("src", imgName+fisheyemenu.imgType);
}
}
-
.slide h3 a:hover {
 
-
text-decoration: none;
 
-
font-weight: bold;
 
}
}
-
.slide label {
+
// Add event with wide browser support
-
     background: #2F2F2F;  
+
if ( typeof window.addEventListener != "undefined" )
-
    padding: 3px 7px;
+
     window.addEventListener( "load", fisheyemenu.init, false );
-
     border: 1px solid #215E21;
+
else if ( typeof window.attachEvent != "undefined" )
-
    margin-right: 4px;
+
     window.attachEvent( "onload", fisheyemenu.init );
-
     position: relative;
+
else {
-
    left: 1px;
+
     if ( window.onload != null ) {
-
    top: 280px;
+
        var oldOnload = window.onload;
-
    -webkit-transition: background-color .17s linear;
+
        window.onload = function ( e ) {
-
      -moz-transition: background-color .17s linear;
+
            oldOnload( e );
-
            transition: background-color .17s linear;
+
            fisheyemenu.init();
-
}
+
        };
-
.slide [type=radio] {
+
    }
-
display: none;  
+
    else
-
}
+
        window.onload = fisheyemenu.init;
-
.content {
+
-
position: absolute;
+
-
top: -1px;
+
-
left: -400px;
+
-
background: #215E21;
+
-
width: 500px;
+
-
padding: 20px;
+
-
border: 1px solid #215E21;
+
-
opacity: 0;
+
-
  height: 100%;
+
-
-webkit-transition: all .6s linear;
+
-
  -moz-transition: all .6s linear;
+
-
            transition: all .6s linear;
+
}
}
 +
</script>
-
[type=radio]:checked ~ label {
 
-
background: #215E21;
 
-
border-bottom: 1px solid #215E21;
 
-
z-index: 2;
 
-
}
 
-
[type=radio]:checked ~ label ~ .content {
 
-
z-index: 1;
 
-
opacity: 1;
 
-
left: 0;
 
-
}​
 
 +
<body style="overflow-y:scroll;" >
-
#fisheye_menu {
+
<!--==========================TOP MENU================-->
-
list-style: none;
+
-
padding: 0;
+
-
margin: 10px;
+
-
height: 140px;
+
-
}
+
-
#fisheye_menu li {
+
-
position: relative;
+
-
display: block;
+
-
float: left;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#fisheye_menu span {
+
-
position: absolute;
+
-
top: 100%;
+
-
left: 0;
+
-
text-align: center;
+
-
width: 95px;
+
-
padding: 1px;
+
<div class="container" style=" background: #147025; margin-top:-1240px;">
-
 
+
<div align=left style="margin-top:0px; margin-left:0px;">
-
margin: 0;
+
<img src="https://static.igem.org/mediawiki/2012/5/5d/Toronto_green.jpg" alt="Background" width="965" height="130"/>
-
border: solid 1px #bbb;
+
</div>
-
color: #333;
+
-
background: #eee;
+
<div style="margin-top:-125px">
-
}
+
<ul id="fisheye_menu">
-
#fisheye_menu a {
+
<li> <font color=#147025> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </font> </li>
-
text-decoration: none;
+
<li><a href="https://2012.igem.org/Team:Toronto" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_home.png" alt="" /><span> <font size=3><b>Home </span></a> </li>
-
margin: 0;
+
<li><a href="https://2012.igem.org/Team:Toronto/Contact" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_email.png" alt="" /><span>Contact</span></a></li>
-
padding: 0;
+
<li><a href="https://2012.igem.org/Team:Toronto/Team" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_teamicon.png" alt="" /><span>Team</span></a></li>
-
}
+
<li><a href="https://2012.igem.org/Team:Toronto/Project" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_projecticon.png" alt="" /><span>Project</span></a> </li>
-
#fisheye_menu img {
+
<li><a href="https://2012.igem.org/Team:Toronto/Notebook" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_notebook.png" alt="" /><span>Notebook</span></a></li>
-
border: 0;
+
<li><a href="https://2012.igem.org/Team:Toronto/Attributions" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_history.png" alt="" /><span>Attributions </span></a></li>
-
vertical-align: top;
+
<li><a href="https://2012.igem.org/Team:Toronto/HumanPractice" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_outreach.png" alt="" /><span>Human Practice (Safety & Outreach)</span></a></li>
-
}
+
<li><a href="https://2012.igem.org/Main_Page" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_igemlogo.png" alt="" /><span>iGEM 2012 Home</span></a></li>
-
 
+
</ul> </font></b> </div>
-
 
+
</div>
-
 
+
-
 
+
-
#stuff {
+
-
overflow: hidden;
+
-
width: 853px;
+
-
height: 204px;
+
-
-webkit-box-shadow: 0px 0px 50px 10px #215E21;
+
-
  -moz-box-shadow: 0px 0px 50px 10px #215E21;
+
-
    box-shadow: 0px 0px 50px 10px #215E21;
+
-
}
+
-
#stuff-inside {
+
-
width:10000px;
+
-
height: 204px;
+
-
}
+
-
 
+
-
.pag {
+
-
width: 853px;
+
-
height: 204px;
+
-
float: left;
+
-
}
+
-
#stuff-inside-1:target #stuff-inside {
+
-
-webkit-transition: all 400ms ease;
+
-
    -moz-transition: all 400ms ease;
+
-
    -o-transition: all 400ms ease;
+
-
                transition: all 400ms ease;
+
-
margin-left: 0px;
+
-
}
+
-
 
+
-
#stuff-inside-2:target #stuff-inside {
+
-
-webkit-transition: all 400ms ease;
+
-
    -moz-transition: all 400ms ease;
+
-
    -o-transition: all 400ms ease;
+
-
                transition: all 400ms ease;
+
-
margin-left: -853px;
+
-
}
+
-
#stuff-inside-3:target #stuff-inside {
+
-
-webkit-transition: all 400ms ease;
+
-
    -moz-transition: all 400ms ease;
+
-
    -o-transition: all 400ms ease;
+
-
                transition: all 400ms ease;
+
-
margin-left: -1706px;
+
-
}
+
-
 
+
-
#stuff-inside-4:target #stuff-inside {
+
-
-webkit-transition: all 400ms ease;
+
-
    -moz-transition: all 400ms ease;
+
-
    -o-transition: all 400ms ease;
+
-
                transition: all 400ms ease;
+
-
margin-left: -2559px;
+
-
}
+
-
 
+
-
#stuff-inside-5:target #stuff-inside {
+
-
    -webkit-transition: all 400ms ease;
+
-
    -moz-transition: all 400ms ease;
+
-
    -o-transition: all 400ms ease;
+
-
                transition: all 400ms ease;
+
-
margin-left: -3412px;
+
-
}
+
-
.pag-info {
+
-
height: 40px;
+
-
background-color: #215E21;
+
-
opacity:0.9;
+
-
position: relative;
+
-
margin-top: 0px;
+
-
bottom: 50px;
+
-
color: #147025;
+
-
padding-left: 20px;
+
-
padding-top: 20px;
+
-
}
+
-
#nav {
+
-
list-style-type: none;
+
-
width: 156px;
+
-
height: 16px;
+
-
margin: 0 auto;
+
-
margin-top: 20px;
+
-
padding: 0;
+
-
color:#215E21;
+
-
}
+
-
.click {
+
-
float: left;
+
-
background: #74C365;
+
-
width: 16px;
+
-
height: 16px;
+
-
-webkit-border-radius: 8px;
+
-
  -moz-border-radius: 8px;
+
-
            border-radius: 8px;
+
-
margin-left: 5px;
+
-
margin-right: 5px;
+
-
}
+
-
.click:hover {
+
-
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
+
-
  -moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
+
-
            box-shadow: inset 0px 0px 2px 2px #d4d4d4;
+
-
}
+
-
.click:active {
+
-
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
+
-
  -moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
+
-
            box-shadow: inset 0px 0px 2px 2px #7a7a7a;
+
-
}
+
-
.click a {
+
-
display: block;
+
-
width: 16px;
+
-
height: 16px;
+
-
}
+
-
li {
+
-
    list-style: none;
+
-
}
+
-
</style>
+

Revision as of 18:27, 17 June 2013

TempLogo.png


We're working on our iGem Wiki page right now - Please check back later!

Logo.jpg
300px-Logo finished.png


Mib.jpg       Uom-logo.jpg

Background

Retrieved from "http://2013.igem.org/Team:Manchester"