Team:Manchester
From 2013.igem.org
(Difference between revisions)
Line 18: | Line 18: | ||
[[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:#fff | ||
+ | } | ||
+ | p { | ||
+ | text-decoration: none; | ||
+ | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; | ||
+ | font-size: 1.25em; | ||
+ | line-height: 1.5em; | ||
+ | font-weight: 150; | ||
+ | color:#fff | ||
+ | } | ||
+ | |||
+ | |||
+ | .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> |
Revision as of 18:10, 17 June 2013