Team:Manchester

From 2013.igem.org

(Difference between revisions)
Line 21: Line 21:
<html>
<html>
-
<!--==========================Javascript for MENU (written below)================-->
+
<html>
-
<script type="text/javascript">
+
 
-
var fisheyemenu = {
+
<!-- =============================================================
-
startSize : 65,
+
 
-
endSize : 90,
+
The following was written by Moustafa Abdalla for iGEM UToronto.
-
imgType : ".png",
+
 
-
init : function () {
+
 
-
var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
+
Permission is granted, free of charge, to any person reading the code,
-
var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or
-
for(var j=0; j<titleElements.length; j++) {
+
sell copies of the code, subject ONLY to the following condition:
-
titleElements[j].style.display = 'none';
+
 
 +
******* This permission notice shall be included in all copies or
 +
substantial portions of the code. *********
 +
 
 +
Please enjoy :) .
 +
===================================================================-->
 +
 
 +
 
 +
<body>
 +
 
 +
<!--==========================General Document Styling
 +
And CSS for sliders================-->
 +
<style>
 +
 
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
 +
    display:none;}
 +
#top-section {
 +
background-repeat: no-repeat;
 +
background-position: center top;
 +
height:1220px ! important;
 +
background:#215E21;
}
}
-
for(var i=0; i<animElements.length; i++) {
+
body {
-
var y = animElements[i];
+
    background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
-
y.style.width = fisheyemenu.startSize+'px';
+
    background-attachment: fixed;
-
y.style.height = fisheyemenu.startSize+'px';
+
    height:0px;
-
fisheyemenu.imgSmall(y);
+
-
animElements[i].onmouseover = changeSize;
+
-
animElements[i].onmouseout = restoreSize;
+
}
}
-
function changeSize() {
+
#content{height:0px}
-
fisheyemenu.imgLarge(this);
+
h1 a, h2 a, h3 a {
-
var x = this.parentNode.getElementsByTagName("span");
+
text-decoration: none;
-
x[0].style.display = 'block';
+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-
if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
+
font-size: 1.75em;
-
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
+
line-height: 1.5em;
 +
font-weight: 200;
 +
color:#fff
}
}
-
function restoreSize() {
+
p {
-
var x = this.parentNode.getElementsByTagName("span");
+
text-decoration: none;
-
x[0].style.display = 'none';
+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-
if (!this.currentWidth) return;
+
font-size: 1.25em;
-
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
+
line-height: 1.5em;
-
fisheyemenu.imgSmall(this);
+
font-weight: 150;
 +
color:#fff
}
}
-
},
+
 
-
resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
+
 
-
if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
+
.slideshow {
-
var actStep = 0;
+
position: relative;
-
elem.widthChangeMemInt = window.setInterval(
+
min-height: 220px;  
-
function() {
+
clear: both;
-
elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
+
margin: 35px 0 25px;
-
elem.style.width = elem.currentWidth+"px";
+
-
elem.style.height = elem.currentWidth+"px";
+
-
actStep++;
+
-
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
+
}
}
-
,intervals)
+
.slide {
-
},
+
  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;
}
}
-
// Add event with wide browser support
+
.slide label {
-
if ( typeof window.addEventListener != "undefined" )
+
     background: #2F2F2F;  
-
     window.addEventListener( "load", fisheyemenu.init, false );
+
    padding: 3px 7px;
-
else if ( typeof window.attachEvent != "undefined" )
+
     border: 1px solid #215E21;
-
     window.attachEvent( "onload", fisheyemenu.init );
+
    margin-right: 4px;
-
else {
+
     position: relative;
-
     if ( window.onload != null ) {
+
    left: 1px;
-
        var oldOnload = window.onload;
+
    top: 280px;
-
        window.onload = function ( e ) {
+
    -webkit-transition: background-color .17s linear;
-
            oldOnload( e );
+
      -moz-transition: background-color .17s linear;
-
            fisheyemenu.init();
+
            transition: background-color .17s linear;
-
        };
+
}
-
    }
+
.slide [type=radio] {
-
    else
+
display: none;  
-
        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 {
 +
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;
 +
 
 +
margin: 0;
 +
border: solid 1px #bbb;
 +
color: #333;
 +
background: #eee;
 +
}
 +
#fisheye_menu a {
 +
text-decoration: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#fisheye_menu img {
 +
border: 0;
 +
vertical-align: top;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
#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:26, 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

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