Team:Toronto/Attributions
From 2012.igem.org
(Difference between revisions)
(Prototype team page) |
|||
(One intermediate revision not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | < | + | <body> |
- | < | + | |
- | + | <!-- ============================================================= | |
+ | |||
+ | 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 :) . | ||
+ | ===================================================================--> | ||
+ | |||
+ | |||
+ | |||
+ | <!--==========================General Document Styling | ||
+ | And CSS for Contact Buttons================--> | ||
+ | <style> | ||
+ | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
+ | display:none;} | ||
+ | #top-section { | ||
+ | background-color:#ccff99; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center top; | ||
+ | height:800px ! important; | ||
+ | } | ||
+ | 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} | ||
+ | #fisheye_menu { | ||
+ | |||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: 10px; | ||
+ | height: 81px; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--==========================Javascript for Top Menu================--> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | var fisheyemenu = { | ||
+ | startSize : 55, | ||
+ | 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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--==========================Actual Wiki Stuff================--> | ||
+ | |||
+ | |||
+ | <div align=left style="margin-top:-775px; margin-left:-5px"> | ||
+ | <img src="http://igemtoronto.files.wordpress.com/2012/10/attributions.jpg" alt="Banner" width="977" height="205.3"/> | ||
</div> | </div> | ||
- | <div | + | |
- | + | ||
- | </ | + | |
- | < | + | <!--==========================Menu================--> |
- | + | ||
+ | <div class="container" style=" background: #147025; margin-top:-190px;"> | ||
+ | <ul id="fisheye_menu"> | ||
+ | <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> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <!--==========================Styling Sheet for Contact Buttons================--> | ||
- | + | <style rel='stylesheet' > | |
+ | /* | ||
+ | CSS-Tricks Example | ||
+ | by Chris Coyier | ||
+ | http://css-tricks.com | ||
+ | */ | ||
+ | * { margin: 0; padding: 0; margin-top:-20px } | ||
+ | |||
+ | |||
+ | #page-wrap { width: 370px; margin: 0px auto; } | ||
+ | |||
+ | h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 0px 0; } | ||
+ | a { text-decoration: none; } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <style> | ||
+ | .slide-up-boxes a { | ||
+ | display: block; | ||
+ | height: 130px; | ||
+ | margin: 0 0 20px 0; | ||
+ | background:#215E21; | ||
+ | border: 1px solid #ccc; | ||
+ | height: 65px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slide-up-boxes h5 { | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | height: 65px; | ||
+ | font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */ | ||
+ | opacity: 1; | ||
+ | -webkit-transition: all 0.2s linear; | ||
+ | -moz-transition: all 0.2s linear; | ||
+ | -o-transition: all 0.2s linear; | ||
+ | } | ||
+ | |||
+ | .slide-up-boxes a:hover h5 { | ||
+ | margin-top: -65px; | ||
+ | opacity: 0; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .slide-up-boxes div { | ||
+ | position: relative; | ||
+ | color: white; | ||
+ | font: 12px/15px Georgia, Serif; | ||
+ | height: 45px; | ||
+ | padding: 15px; | ||
+ | opacity: 0; | ||
+ | display: block; | ||
+ | -webkit-transform: rotate(6deg); | ||
+ | -webkit-transition: all 0.4s linear; | ||
+ | -moz-transform: rotate(6deg); | ||
+ | -moz-transition: all 0.4s linear; | ||
+ | -o-transform: rotate(6deg); | ||
+ | -o-transition: all 0.4s linear; | ||
+ | } | ||
+ | .slide-up-boxes a:hover div { | ||
+ | opacity: 1; | ||
+ | display: block; | ||
+ | -webkit-transform: rotate(0); | ||
+ | -moz-transform: rotate(0); | ||
+ | -o-transform: rotate(0); | ||
+ | } | ||
+ | .slide-up-boxes a:nth-child(3) div { background: #c73b1b url(http://igemtoronto.files.wordpress.com/2012/08/site.png) 17px 15px no-repeat; padding-left: 120px; } | ||
+ | .slide-up-boxes a:nth-child(1) div { background: #367db2 url(http://igemtoronto.files.wordpress.com/2012/08/facebook.png) 21px 10px no-repeat; padding-left: 90px; } | ||
+ | .slide-up-boxes a:nth-child(2) div { background: #393838 url(http://igemtoronto.files.wordpress.com/2012/08/email.png) 14px 16px no-repeat; padding-left: 133px; } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | <!--==========================Actual Contact Buttons================--> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--==========================Footer================--> | ||
+ | |||
+ | <div align=left style="margin-top:500px; margin-left:380px; position: absolute; z-index:99"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/> | ||
+ | </div> | ||
+ | |||
+ | <div align=left style="margin-top:600px; margin-left:-6px; position:absolute; z-index:98"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="125px"/> | ||
+ | </div> |
Latest revision as of 23:41, 1 October 2012