Team:UCSF/ContactUs1
From 2013.igem.org
(Difference between revisions)
(7 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
<style type="text/css"> | <style type="text/css"> | ||
/*** | /*** | ||
- | Minimal header: | + | Minimal header: |
- | + | Thanks a lot to 2012 Calgary team for snippets of their code! | |
- | Thanks a lot to | + | |
Check out their wikis at: | Check out their wikis at: | ||
- | + | https://2012.igem.org/Team:Calgary | |
- | https://2012.igem.org/Team: | + | |
***/ | ***/ | ||
Line 104: | Line 102: | ||
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
border: 0; | border: 0; | ||
- | font-weight: | + | font-weight: normal; |
} | } | ||
- | + | p1, p2, p3, div.thumb div div.thumbcaption{ | |
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
color: black; | color: black; | ||
- | |||
- | |||
} | } | ||
Line 134: | Line 130: | ||
} | } | ||
- | + | a:link, | |
a:visited{ | a:visited{ | ||
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
- | color: # | + | color: #4E9600; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | + | a:hover, | |
a:active{ | a:active{ | ||
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
- | color: # | + | color: #4E9600; |
text-decoration:underline; | text-decoration:underline; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
/***Body styling***/ | /***Body styling***/ | ||
h1{ | h1{ | ||
- | font-size: 2. | + | font-size: 2.2em; |
+ | line-height: 1.2em; | ||
+ | color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
h2{ | h2{ | ||
- | font-size: | + | font-size: 2.0em; |
+ | line-height: 1em; | ||
+ | //color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
h3{ | h3{ | ||
- | font-size: 1. | + | font-size: 1.8em; |
+ | line-height: 1em; | ||
+ | //margin: 0px 15px; | ||
+ | //font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | color: #008000; | ||
+ | } | ||
+ | h4{ | ||
+ | font-size: 1.8em; | ||
+ | //color: #008000; | ||
+ | //margin: 0px 20px; | ||
+ | //font-weight: bold; | ||
+ | } | ||
+ | p1{ | ||
+ | font-size: 1.5em; | ||
+ | line-height: 1.5em; | ||
+ | //color: #008000; | ||
+ | //font-weight: bold; | ||
+ | } | ||
+ | p2{ | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | p3{ | ||
+ | font-size: 1.2em; | ||
} | } | ||
+ | #pagetitle{ | ||
+ | border-bottom: 2px solid black; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | #bodycontainer h2{ | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | #bodycontainer p{ | ||
+ | margin-left: 20px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | #bodycontainer{ | ||
+ | margin-left: 220px; | ||
+ | } | ||
+ | #bodycontainer ul{ | ||
+ | margin-left: 5.0em; | ||
+ | } | ||
+ | #bodycontainer li{ | ||
+ | font-family: Georgia, Serif; | ||
+ | } | ||
#box1{ | #box1{ | ||
- | width: | + | width: 750px; |
+ | height: 1500px; | ||
background: #fffff; | background: #fffff; | ||
float: left; | float: left; | ||
- | margin-left: | + | margin-left: 215px; |
+ | margin-top: 15px; | ||
} | } | ||
- | # | + | |
+ | </style> | ||
+ | |||
+ | <!------------------------------Context Styles--------------------------------> | ||
+ | <style> | ||
+ | #mission {width: 500px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
+ | #opensource {width:306px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
+ | #rightcontent {width:800px; float:right; background-color: #F5F5F5; margin-left: 8px; margin-top:10px;} | ||
+ | #photos {float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} | ||
+ | #leftcontenttext{float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} | ||
+ | #rightcontenttext {float:right; background-color: #FFFFFF; margin-left:15px; padding:10px; margin-top:0px;} | ||
+ | #description{float:right; background-color: #FFFFFF; margin-right:-5px; margin-top:-5px;} | ||
+ | //#flickr{width:755px; float:right;} | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!---------------------------------Sidebar------------------------------------------> | ||
+ | <!--Thanks a lot to 2012 SJTU-BioX-Shanghai team for snippets of their code! | ||
+ | Check out their wikis at: | ||
+ | https://2012.igem.org/Team:SJTU-BioX-Shanghai | ||
+ | --> | ||
+ | |||
+ | <!-------------------------------Sidebar Styles--------------------------------> | ||
+ | <style type="text/css"> | ||
+ | div.sdmenu { | ||
+ | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
+ | font-size: 1.3em; | ||
+ | padding-bottom: 5px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | div.sdmenu div { | ||
+ | background-color: #67A15A; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | div.sdmenu div.collapsed { | ||
+ | height: 30px;} | ||
+ | div.sdmenu div span { | ||
+ | display: block; | ||
+ | padding: 6px 25px; | ||
+ | width: 160px; | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | background: url(/wiki/images/f/f7/12SJTU_floatnav_expanded.gif) no-repeat 10px center; | ||
+ | cursor: default; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | div.sdmenu div:hover{ | ||
+ | background-color: #69C800; | ||
+ | } | ||
+ | div.sdmenu div.collapsed span { | ||
+ | background-image: url(/wiki/images/2/20/12SJTU_floatnav_collapsed.gif); | ||
+ | } | ||
+ | div.sdmenu div a { | ||
+ | padding: 5px 10px; | ||
+ | background: #D6EADC; | ||
+ | display: block; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | color: #1E3A00; | ||
+ | } | ||
+ | div.sdmenu div a.current { | ||
+ | background : #C0DCA4; | ||
+ | } | ||
+ | div.sdmenu div a:hover { | ||
+ | background : #4E9600 url(/wiki/images/2/2d/12SJTU_floatnav_linkarrow.gif) no-repeat right center; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | .floatbox{ | ||
+ | position:absolute; | ||
+ | width:160px; | ||
+ | height:00px; | ||
+ | background:#FFFFFF | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <!-------------------------------Sidebar JavaScripts-----------------------------> | ||
+ | <script type="text/javascript" > | ||
+ | function SDMenu(id) { | ||
+ | if (!document.getElementById || !document.getElementsByTagName) | ||
+ | return false; | ||
+ | this.menu = document.getElementById(id); | ||
+ | this.submenus = this.menu.getElementsByTagName("div"); | ||
+ | this.remember = true; | ||
+ | this.speed = 20; | ||
+ | this.markCurrent = true; | ||
+ | this.oneSmOnly = false; | ||
+ | } | ||
+ | SDMenu.prototype.init = function() { | ||
+ | var mainInstance = this; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | this.submenus[i].getElementsByTagName("span")[0].onclick= function() { | ||
+ | mainInstance.toggleMenu(this.parentNode); | ||
+ | }; | ||
+ | if (this.markCurrent) { | ||
+ | var links = this.menu.getElementsByTagName("a"); | ||
+ | for (var i = 0; i < links.length; i++) | ||
+ | if (links[i].href == document.location.href) { | ||
+ | links[i].className = "current"; | ||
+ | break; | ||
+ | } | ||
} | } | ||
- | + | if (this.remember) { | |
- | + | var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); | |
+ | var match = regex.exec(document.cookie); | ||
+ | if (match) { | ||
+ | var states = match[1].split(""); | ||
+ | for (var i = 0; i < states.length; i++) | ||
+ | this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); | ||
+ | } | ||
} | } | ||
- | < | + | }; |
+ | SDMenu.prototype.toggleMenu = function(submenu) { | ||
+ | if (submenu.className == "collapsed") | ||
+ | this.expandMenu(submenu); | ||
+ | else | ||
+ | this.collapseMenu(submenu); | ||
+ | this.collapseOthers(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.expandMenu = function(submenu) { | ||
+ | var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var links = submenu.getElementsByTagName("a"); | ||
+ | |||
+ | for (var i = 0; i < links.length; i++) | ||
+ | fullHeight += links[i].offsetHeight; | ||
+ | var moveBy = Math.round(this.speed * links.length); | ||
+ | |||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight + moveBy; | ||
+ | if (newHeight < fullHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = ""; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | this.collapseOthers(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseMenu = function(submenu) { | ||
+ | var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); | ||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight - moveBy; | ||
+ | if (newHeight > minHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = "collapsed"; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseOthers = function(submenu) { | ||
+ | if (this.oneSmOnly) { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i] != submenu){ if (this.submenus[i].className != "collapsed"){ | ||
+ | this.collapseMenu(this.submenus[i]);}} | ||
+ | } | ||
+ | }; | ||
+ | SDMenu.prototype.expandAll = function() { | ||
+ | var oldOneSmOnly = this.oneSmOnly; | ||
+ | this.oneSmOnly = false; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className == "collapsed") | ||
+ | this.expandMenu(this.submenus[i]); | ||
+ | this.oneSmOnly = oldOneSmOnly; | ||
+ | }; | ||
+ | SDMenu.prototype.collapseAll = function() { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className != "collapsed") | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | }; | ||
+ | SDMenu.prototype.memorize = function() { | ||
+ | if (this.remember) { | ||
+ | var states = new Array(); | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | states.push(this.submenus[i].className == "collapsed" ? 0 : 1); | ||
+ | var d = new Date(); | ||
+ | d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); | ||
+ | document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/"; | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | // <![CDATA[ | ||
+ | var myMenu; | ||
+ | window.onload = function () { | ||
+ | myMenu = new SDMenu("my_menu"); | ||
+ | myMenu.oneSmOnly = true; | ||
+ | myMenu.remember = false; | ||
+ | myMenu.init(); | ||
+ | myMenu.expandMenu(myMenu.submenus[0]); | ||
+ | }; | ||
+ | // ]]> | ||
+ | </script> | ||
+ | |||
+ | |||
</head> | </head> | ||
+ | |||
+ | |||
<body> | <body> | ||
- | |||
- | |||
- | < | + | <!------------------------------------Sidebar-------------------------------------> |
- | < | + | <div class="floatbox" id="12SJTU_floatnav" style="top:200px; left:2px;"> |
- | + | <table border="0" width="150" cellspacing="0" cellpadding="0"> | |
- | + | <tr> | |
- | + | <td width="100%"> | |
+ | |||
+ | <!--Team Sidebar--> | ||
+ | <div style="float: left" id="my_menu" class="sdmenu"> | ||
+ | <div class="collapsed"> | ||
+ | <span>About Us</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content1">Biotechnology Program at Abraham Lincoln High School (ALHS)</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content2">Peking University and UCSF iGEM Exchange</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content3">Returning Team Members</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content4">UC Berkeley Cal Teach Program</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content5">HHMI EXROP</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Members</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Team1#content1">First Year Team Members</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Team1#content2">Super Buddies/Second Year iGEM Team</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Advisors</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Advisors1">Advisors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Memtors</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Mentors&Instructors1">Mentors & Instructors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Profile</span> | ||
+ | <a href="https://igem.org/Team.cgi?year=2013&team_name=UCSF">Official Profile</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Contact Us</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/ContactUs1">Contact Us</a> | ||
+ | </div> | ||
</div> | </div> | ||
- | < | + | <!--Span: Contact Us--> |
- | < | + | <script type="text/javascript"> |
- | + | // <![CDATA[ | |
- | < | + | var myMenu; |
- | + | window.onload = function () { | |
- | + | myMenu = new SDMenu("my_menu"); | |
- | + | myMenu.oneSmOnly = true; | |
- | + | myMenu.remember = false; | |
- | + | myMenu.init(); | |
- | + | myMenu.expandMenu(myMenu.submenus[5]); | |
- | + | }; | |
- | </ | + | // ]]> |
+ | </script> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | var id = function (o) { return document.getElementById(o) } | ||
+ | var scroll = function (o) { | ||
+ | var space = id(o).offsetTop; | ||
+ | id(o).style.top = space + 'px'; | ||
+ | void function () { | ||
+ | var goTo = 0; | ||
+ | var roll = setInterval(function () { | ||
+ | var height = document.documentElement.scrollTop + document.body.scrollTop + space; | ||
+ | var top = parseInt(id(o).style.top); | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 98) { | ||
+ | height = height - 50; | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 198) { | ||
+ | height = height - 50; | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 298) { | ||
+ | height = height - 50; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | if (height != top) { | ||
+ | goTo = height - parseInt((height - top) * 0.9); | ||
+ | id(o).style.top = goTo + 'px'; | ||
+ | } | ||
+ | }, 30); | ||
+ | } () | ||
+ | } | ||
+ | scroll('12SJTU_floatnav'); | ||
+ | </script> | ||
+ | <!------------------------------------End Sidebar-------------------------------------> | ||
+ | <div id="box1" align="justify"> | ||
+ | <!------------------------------------Context-------------------------------------> | ||
+ | <h4><center>Contact the 2013 UCSF iGEM team: ucsf-igem-2013 at googlegroups dot com</center></h4> | ||
+ | |||
+ | <h4><center>Reach us on <a href="http://www.facebook.com/pages/UCSF-iGEM-Alumni/290769630936213" target="_blank">Facebook</a> or <a href="http://twitter.com/iGEM_UCSF" target="_blank">Twitter</a>!</center></h4> | ||
+ | |||
+ | |||
+ | |||
+ | <!------------------------------------End Context-------------------------------------> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 20:28, 28 October 2013