|
|
| Line 1: |
Line 1: |
| - |
| |
| | | | |
| | | | |
| Line 21: |
Line 20: |
| | | | |
| | [[File:mib.jpg|270px]] [[File:Uom-logo.jpg|270px|]] | | [[File:mib.jpg|270px]] [[File:Uom-logo.jpg|270px|]] |
| - |
| |
| - | <html>
| |
| - |
| |
| - |
| |
| - | The following was written by Moustafa Abdalla for iGEM UToronto.
| |
| - |
| |
| - |
| |
| - | Permission is granted, free of charge, to any person reading the code,
| |
| - | to use, copy, modify, merge, publish, distribute, sublicense, and/or
| |
| - | sell copies of the code, subject ONLY to the following condition:
| |
| - |
| |
| - | ******* 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;
| |
| - | }
| |
| - | body {
| |
| - | background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
| |
| - | background-attachment: fixed;
| |
| - | height:0px;
| |
| - | }
| |
| - | #content{height:0px}
| |
| - | h1 a, h2 a, h3 a {
| |
| - | text-decoration: none;
| |
| - | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
| |
| - | font-size: 1.75em;
| |
| - | line-height: 1.5em;
| |
| - | font-weight: 200;
| |
| - | color:990099
| |
| - | }
| |
| - | p {
| |
| - | text-decoration: none;
| |
| - | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
| |
| - | font-size: 1.25em;
| |
| - | line-height: 1.5em;
| |
| - | font-weight: 150;
| |
| - | color:990099
| |
| - | }
| |
| - |
| |
| - |
| |
| - | .slideshow {
| |
| - | position: relative;
| |
| - | min-height: 220px;
| |
| - | clear: both;
| |
| - | margin: 35px 0 25px;
| |
| - | }
| |
| - | .slide {
| |
| - | float: left;
| |
| - | }
| |
| - | .slide h3 a:hover {
| |
| - | text-decoration: none;
| |
| - | font-weight: bold;
| |
| - | }
| |
| - | .slide label {
| |
| - | background: #2F2F2F;
| |
| - | padding: 3px 7px;
| |
| - | border: 1px solid #215E21;
| |
| - | margin-right: 4px;
| |
| - | position: relative;
| |
| - | left: 1px;
| |
| - | top: 280px;
| |
| - | -webkit-transition: background-color .17s linear;
| |
| - | -moz-transition: background-color .17s linear;
| |
| - | transition: background-color .17s linear;
| |
| - | }
| |
| - | .slide [type=radio] {
| |
| - | display: none;
| |
| - | }
| |
| - | .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;
| |
| - | }
| |
| - |
| |
| - | [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;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | #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>
| |
| - |
| |
| - |
| |
| - | <!--==========================Javascript for MENU (written below)================-->
| |
| - | <script type="text/javascript">
| |
| - | var fisheyemenu = {
| |
| - | startSize : 65,
| |
| - | endSize : 90,
| |
| - | imgType : ".png",
| |
| - | init : function () {
| |
| - | var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
| |
| - | var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
| |
| - | for(var j=0; j<titleElements.length; j++) {
| |
| - | titleElements[j].style.display = 'none';
| |
| - | }
| |
| - | for(var i=0; i<animElements.length; i++) {
| |
| - | var y = animElements[i];
| |
| - | y.style.width = fisheyemenu.startSize+'px';
| |
| - | y.style.height = fisheyemenu.startSize+'px';
| |
| - | fisheyemenu.imgSmall(y);
| |
| - | animElements[i].onmouseover = changeSize;
| |
| - | animElements[i].onmouseout = restoreSize;
| |
| - | }
| |
| - | function changeSize() {
| |
| - | fisheyemenu.imgLarge(this);
| |
| - | var x = this.parentNode.getElementsByTagName("span");
| |
| - | x[0].style.display = 'block';
| |
| - | if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
| |
| - | fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
| |
| - | }
| |
| - | function restoreSize() {
| |
| - | var x = this.parentNode.getElementsByTagName("span");
| |
| - | x[0].style.display = 'none';
| |
| - | if (!this.currentWidth) return;
| |
| - | fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
| |
| - | fisheyemenu.imgSmall(this);
| |
| - | }
| |
| - | },
| |
| - | resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
| |
| - | if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
| |
| - | var actStep = 0;
| |
| - | elem.widthChangeMemInt = window.setInterval(
| |
| - | function() {
| |
| - | 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);
| |
| - | }
| |
| - | ,intervals)
| |
| - | },
| |
| - | 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);
| |
| - | }
| |
| - | }
| |
| - | // Add event with wide browser support
| |
| - | if ( typeof window.addEventListener != "undefined" )
| |
| - | window.addEventListener( "load", fisheyemenu.init, false );
| |
| - | else if ( typeof window.attachEvent != "undefined" )
| |
| - | window.attachEvent( "onload", fisheyemenu.init );
| |
| - | else {
| |
| - | if ( window.onload != null ) {
| |
| - | var oldOnload = window.onload;
| |
| - | window.onload = function ( e ) {
| |
| - | oldOnload( e );
| |
| - | fisheyemenu.init();
| |
| - | };
| |
| - | }
| |
| - | else
| |
| - | window.onload = fisheyemenu.init;
| |
| - | }
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - |
| |
| - | <body style="overflow-y:scroll;" >
| |
| - |
| |
| - | <!--==========================TOP MENU================-->
| |
| - |
| |
| - | <div class="container" style=" background: #147025; margin-top:-1240px;">
| |
| - | <div align=left style="margin-top:0px; margin-left:0px;">
| |
| - | <img src="https://static.igem.org/mediawiki/2012/5/5d/Toronto_green.jpg" alt="Background" width="965" height="130"/>
| |
| - | </div>
| |
| - |
| |
| - | <div style="margin-top:-125px">
| |
| - | <ul id="fisheye_menu">
| |
| - | <li> <font color=#147025> </font> </li>
| |
| - | <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>
| |
| - | <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>
| |
| - | <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>
| |
| - | <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>
| |
| - | <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>
| |
| - | <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>
| |
| - |
| |
| - |
| |
| - | <html>
| |
| | | | |
| | <html> | | <html> |
"
