|
|
| (43 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <script>
| |
| − | /* Hiding stupid stuff*/
| |
| − | $('#top_title').css('display', 'none');
| |
| − | $('#top_menu').css('display', 'none');
| |
| − | //$('#top_menu_14').css('display', 'none');
| |
| − | $('#HQ_page').css('display', 'none');
| |
| − | $('#top_menu_under').css('display', 'none');
| |
| − | $('#content').removeClass('mw-body');
| |
| − | $('#content').attr('role','dummy2')
| |
| − | $('#content').attr('id','dummy')
| |
| − | $('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
| |
| − | $('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
| |
| − | </script>
| |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <script>
| |
| − | $(body).css('display','none');
| |
| − | </script>
| |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
| |
| − | <script type="text/javascript">
| |
| − | if (typeof jQuery == 'undefined') {
| |
| − | document.write(unescape("%3Cscript src='js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
| |
| − | }
| |
| − | </script>
| |
| − | <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
| |
| − | <link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'>
| |
| − | <title>About Our Team</title>
| |
| − | </head>
| |
| − | <style>
| |
| | | | |
| − | #bars_item {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #sideMenu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | /* Enforces font on the entire page, colored black by default
| |
| − | Makes background off-white slightly to improve visibility with gray font */
| |
| − | font-family: 'Raleway', sans-serif;
| |
| − | color: black;
| |
| − | background-color: #FEFFFA;
| |
| − | overflow-x:hidden;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | }
| |
| − |
| |
| − | /* Navbar */
| |
| − | nav {
| |
| − | opacity: 1.0;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | line-height: 10px;
| |
| − | font-size: 20pt;
| |
| − | display: block;
| |
| − | background: #fff;
| |
| − | border-bottom: 1px solid black;
| |
| − | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
| |
| − | border-radius: 15px;
| |
| − | z-index: 1;
| |
| − | margin-top: 18px;
| |
| − | }
| |
| − |
| |
| − | nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | font-family: 'Exo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | a:visited {
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | list-style: none;
| |
| − | transition: all .5s ease;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − | display: inline;
| |
| − | margin-right: 20px;
| |
| − | }
| |
| − |
| |
| − | nav a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | /* Nav bar when more icon is clicked */
| |
| − |
| |
| − | #div-navResized {
| |
| − | font-size: 20pt;
| |
| − | position: fixed;
| |
| − | text-align: center;
| |
| − | display: none;
| |
| − | width: 100%;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | margin-top: 200px;
| |
| − | z-index: 3;
| |
| − | }
| |
| − |
| |
| − | #div-navResized a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | font-family: 'Exo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | #div-navResized ul {
| |
| − | list-style: none;
| |
| − | margin-right: 40px;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | #div-navResized ul li {
| |
| − | margin-top: 4px;
| |
| − | }
| |
| − |
| |
| − | #div-title {
| |
| − | z-index: -999;
| |
| − | }
| |
| − |
| |
| − | /* Permanent bottom bar */
| |
| − | #bot-nav {
| |
| − | background-color: #f9f9f9;
| |
| − | border-top: 1px solid #f5f5f5;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 75px;
| |
| − | bottom: -10px;
| |
| − | display: block;
| |
| − | color: black;
| |
| − | font-size: 12pt;
| |
| − | font-family: 'Lora', serif;
| |
| − | z-index: -1;
| |
| − | }
| |
| − |
| |
| − | #container {
| |
| − | width: 750px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | padding-right: 15px;
| |
| − | padding-left: 15px;
| |
| − | margin-top: -7px;
| |
| − | }
| |
| − |
| |
| − | #container img {
| |
| − | height: 20px;
| |
| − | width: 20px;
| |
| − | margin-top: -40px;
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | }
| |
| − |
| |
| − | #bot-nav img:hover {
| |
| − | -webkit-filter: grayscale(0%);
| |
| − | filter: grayscale(0%);
| |
| − | }
| |
| − |
| |
| − | #container ul {
| |
| − | text-align: center;
| |
| − | margin-top: -13px;
| |
| − | margin-right: -105px;
| |
| − | }
| |
| − |
| |
| − | #container li {
| |
| − | display: inline;
| |
| − | margin-right: -14px;
| |
| − | }
| |
| − |
| |
| − | #bot-nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | #copyright {
| |
| − | text-align: center;
| |
| − | padding-top: 24px;
| |
| − | }
| |
| − |
| |
| − | #contact:hover {
| |
| − | text-shadow: .1px .1px black;
| |
| − | }
| |
| − |
| |
| − | /* Resized bot-nav */
| |
| − |
| |
| − | h4, h5 {
| |
| − | font-family: 'Lora', serif;
| |
| − | font-weight: normal;
| |
| − | font-size: 12pt;
| |
| − | }
| |
| − |
| |
| − | #bot-navResized {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #bot-navResized img {
| |
| − | height: 20px;
| |
| − | width: 20px;
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | }
| |
| − |
| |
| − | #bot-navResized ul {
| |
| − | text-align: center;
| |
| − | margin-top: 6px;
| |
| − | }
| |
| − |
| |
| − | #bot-navResized li {
| |
| − | display: inline;
| |
| − | margin-right: -14px;
| |
| − | }
| |
| − |
| |
| − | #copyrightResized {
| |
| − | margin-top: -23px;
| |
| − | }
| |
| − |
| |
| − | #contactResized {
| |
| − | margin-top: -10px;
| |
| − | }
| |
| − |
| |
| − | #contactResized:hover {
| |
| − | text-shadow: .1px .1px black;
| |
| − | }
| |
| − |
| |
| − | /* Content */
| |
| − |
| |
| − | h1 { /* Centers the heading text on the page at different sizes */
| |
| − | color: #6B6B6B; /* makes the text centered and gray colored */
| |
| − | font-size: 56pt;
| |
| − | font-weight: 200;
| |
| − | text-align: center;
| |
| − | margin-top: 100px;
| |
| − | margin-bottom: 30px;
| |
| − | }
| |
| − |
| |
| − | /* Descriptions */
| |
| − |
| |
| − | h2 {
| |
| − | font-size: 18pt;
| |
| − | margin-left: 100px;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | color: #545454;
| |
| − | margin-top: 0px;
| |
| − | text-align: center;
| |
| − | font-size: 16pt;
| |
| − | line-height: 1.5;
| |
| − | max-width: 860px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | padding-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | #div-content p {
| |
| − | margin-left: 100px;
| |
| − | max-width: 500px;
| |
| − | font-size: 12pt;
| |
| − | line-height: 2;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | .description {
| |
| − | display: none;
| |
| − | float: left;
| |
| − | min-height: 600px;
| |
| − | }
| |
| − |
| |
| − | #table-selector {
| |
| − | /* formats the table containing nav elements to be centered, addes space on top / bottom */
| |
| − | width: 100%;
| |
| − | margin-top: 30px;
| |
| − | margin-bottom: 30px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | #table-selector th {
| |
| − | /* makes each cell of nav evenly spaced */
| |
| − | text-align: center;
| |
| − | width: 25%; /* modify when adding / deleting elements in nav */
| |
| − | }
| |
| − |
| |
| − | th p {
| |
| − | /* formats text inside table of navigational elements */
| |
| − | /* makes cursor emulate a link to show it's clickable */
| |
| − | font-size: 5vw;
| |
| − | font-weight: 400;
| |
| − | cursor: pointer;
| |
| − | padding: 5px 0px 15px 0px;
| |
| − | margin: 0 0 0 0;
| |
| − | }
| |
| − |
| |
| − | #div-content {
| |
| − | }
| |
| − |
| |
| − | th p:hover {
| |
| − | /* makes links bold when hovered to show it is a link */
| |
| − | font-weight: 800;
| |
| − | }
| |
| − |
| |
| − | #table-selector {
| |
| − | /* makes a single border between two cells rather than two */
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − |
| |
| − | .profiles {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #div-students {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .clickImage:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | /* creates a solid gray border between elements of navigational element */
| |
| − | .borderRight {
| |
| − | border-right: 2px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .borderLeft {
| |
| − | border-left: 2px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .borderRight {
| |
| − | border-bottom: 4px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .borderBoth {
| |
| − | border-left: 2px solid #A8A8A8;
| |
| − | border-right: 2px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .pull-right {
| |
| − | float: right !important;
| |
| − | }
| |
| − |
| |
| − | .pull-left {
| |
| − | float: left !important;
| |
| − | }
| |
| − |
| |
| − | /* Pushed class actives */
| |
| − | #img-more.pushed {
| |
| − | box-shadow: inset 1px 1px 1px 2px rgba(0, 0, 0, .3);
| |
| − | }
| |
| − |
| |
| − | #div-navResized.pushed {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #div-navResized.pushed a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | nav.pushed {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | body.pushed {
| |
| − | overflow-y: hidden;
| |
| − | }
| |
| − |
| |
| − | nav img.pushed {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Hides nav bar when scrolling */
| |
| − | .scrolled {
| |
| − | font-size: 10pt;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − |
| |
| − | /* animation when mouse is over Navbar */
| |
| − | .hover {
| |
| − | font-size: 20pt;
| |
| − | line-height: 40px;
| |
| − | }
| |
| − |
| |
| − | /* Images */
| |
| − |
| |
| − | /* Logo */
| |
| − | #img-logo {
| |
| − | width: 150px;
| |
| − | float: left;
| |
| − | position: fixed;
| |
| − | margin-top: 4px;
| |
| − | margin-left: 65px;
| |
| − | opacity: 1.0;
| |
| − | }
| |
| − |
| |
| − | /* iGEM logo */
| |
| − | #img-igemlogo {
| |
| − | width: 60px;
| |
| − | float: right;
| |
| − | position: fixed;
| |
| − | margin-top: 1px;
| |
| − | opacity: 1.0;
| |
| − | }
| |
| − |
| |
| − | /* More Icon */
| |
| − | #img-more {
| |
| − | position: fixed;
| |
| − | display: none;
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | margin-right: 0px;
| |
| − | right: 15px;
| |
| − | z-index: 2;
| |
| − | margin-top: -82px;
| |
| − | }
| |
| − |
| |
| − | /* Logos when more button is clicked */
| |
| − |
| |
| − | #img-logoResized {
| |
| − | width: 150px;
| |
| − | display: block;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | margin-top: -350px;
| |
| − | }
| |
| − | #img-igemlogoResized {
| |
| − | width: 60px;
| |
| − | display: block;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | margin-top: 139px;
| |
| − | }
| |
| − |
| |
| − | .centered {
| |
| − | margin-right: auto;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .clickImage {
| |
| − | width: 200px;
| |
| − | height: 128px;
| |
| − | border: 4px solid #FEFFFA;
| |
| − | }
| |
| − |
| |
| − | #table-advisors, #table-students {
| |
| − | margin-top: 50px;
| |
| − | margin-left: 700px;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .clickImageSmall {
| |
| − | display: none;
| |
| − | width: 80px;
| |
| − | height: 50px;
| |
| − | }
| |
| − |
| |
| − | .clickImageSmallS {
| |
| − | display: none;
| |
| − | width: 80px;
| |
| − | height: 50px;
| |
| − | }
| |
| − |
| |
| − | .clickImageSmall, .clickImageS, .clickImageSmallS:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .nospacing {
| |
| − | width: 80px;
| |
| − | padding: 0 0 0 0;
| |
| − | margin: 0 0 0 0;
| |
| − | }
| |
| − |
| |
| − | #table-navigator, #table-navigatorS {
| |
| − | margin-left: 709px;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .clickImageS {
| |
| − | width: 150px;
| |
| − | }
| |
| − |
| |
| − | .navigator {
| |
| − | background-color: #FEFFFA;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <body>
| |
| − | <nav>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/e/e3/16UMD-logoTemp.png" id="img-logo" width="128px">
| |
| − | <a href="https://2016.igem.org/Main_Page">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--igemlogo.png" id="img-igemlogo" width="128px">
| |
| − | </a>
| |
| − | <ul>
| |
| − | <a style="opacity: 0">Fix</a>
| |
| − | <li><a href="projects.html" class="hvr-float">Projects</a></li>
| |
| − | <li><a href="parts.html" class="hvr-float">Parts</a></li>
| |
| − | <li><a href="modeling.html" class="hvr-float">Modeling</a></li>
| |
| − | <li><a href="outreach.html" class="hvr-float">Outreach</a></li>
| |
| − | <li><a href="notebook.html" class="hvr-float">Notebook</a></li>
| |
| − | <li><a href="about.html" class="hvr-float">About Us</a></li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
| |
| − | <!-- Nav bar when more button is clicked -->
| |
| − | <div id="div-navResized">
| |
| − | <a href="https://2016.igem.org/Main_Page">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--igemlogo.png" id="img-igemlogoResized">
| |
| − | </a>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/e/e3/16UMD-logoTemp.png" id="img-logoResized">
| |
| − | <ul>
| |
| − | <li><a href="projects.html">Projects</a></li>
| |
| − | <li><a href="parts.html">Parts</a></li>
| |
| − | <li><a href="modeling.html">Modeling</a></li>
| |
| − | <li><a href="outreach.html">Outreach</a></li>
| |
| − | <li><a href="notebook.html">Notebook</a></li>
| |
| − | <li><a href="about.html">About Us</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!-- For nav bar scrolling + hovering -->
| |
| − | <script>
| |
| − | // Animation over top nav bar when mouse hovers
| |
| − | $('nav').mouseover(
| |
| − | function () {
| |
| − | $('#img-logo').css('transition', '.35s ease-in');
| |
| − | $('#img-logo').css('opacity', '1');
| |
| − | $('#img-igemlogo').css('transition', '.35s ease-in');
| |
| − | $('#img-igemlogo').css('opacity', '1');
| |
| − | $('nav ul').addClass("hover");
| |
| − | }
| |
| − | ),
| |
| − | $('nav').mouseout(
| |
| − | function () {
| |
| − | var scroll = $(window).scrollTop();
| |
| − | if (scroll > 0) {if ( $(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
| |
| − | $('#img-logo').css('transition', '.25s ease');
| |
| − | $('#img-logo').css('opacity', '0');
| |
| − | $('#img-igemlogo').css('transition', '.25s ease');
| |
| − | $('#img-igemlogo').css('opacity', '0');
| |
| − | $('nav ul').removeClass("hover");
| |
| − | $('nav').css('transition', '.5s ease');
| |
| − | }}}
| |
| − |
| |
| − | }
| |
| − | ),
| |
| − | // Window width effect on top nav bar
| |
| − | $(document).ready(function() {
| |
| − | function checkWidth() {
| |
| − | if ($(window).width() < 980 || $('nav').hasClass('pushed')){
| |
| − | $('nav li').css('display', 'none');
| |
| − | $('#img-more').css('display','block');
| |
| − | $('nav ul').addClass("hover");
| |
| − | $('#img-logo').css('transition', '.35s ease-in');
| |
| − | $('#img-logo').css('opacity', '1');
| |
| − | $('#img-igemlogo').css('transition', '.35s ease-in');
| |
| − | $('#img-igemlogo').css('opacity', '1')
| |
| − | } else {
| |
| − | $('nav li').css('display', 'inline');
| |
| − | $('#img-more').css('display','none');
| |
| − | $('nav ul').removeClass("hover");
| |
| − | if ($(window).scrollTop() > 0) {
| |
| − | $('#img-igemlogo').css('transition', '.25s ease');
| |
| − | $('#img-igemlogo').css('opacity', '0');
| |
| − | $('#img-logo').css('transition', '.25s ease');
| |
| − | $('#img-logo').css('opacity', '0');
| |
| − | $('nav ul').addClass("scrolled");
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | function checkBotNav() {
| |
| − | if ($(window).width() < 980){
| |
| − | $('#container').css('display', 'none');
| |
| − | $('#bot-navResized').css('display', 'block');
| |
| − | $('#bot-nav').css('height', '110px');
| |
| − | } else {
| |
| − | $('#container').css('display', 'block');
| |
| − | $('#bot-navResized').css('display', 'none');
| |
| − | $('#bot-nav').css('height', '75px');
| |
| − | }
| |
| − | }
| |
| − | //Page specific
| |
| − | function headerFontSize() {
| |
| − | if ($(window).width() < 645){
| |
| − | $('th p').css('font-size', '5vw');
| |
| − | } else {
| |
| − | $('th p').css('font-size', '24pt');
| |
| − | }
| |
| − | }
| |
| − | function checkContent() {
| |
| − | if ($(window).width() < 1180){
| |
| − | $('#table-students').css('margin-left', 'auto');
| |
| − | $('#table-advisors').css('margin-left', 'auto');
| |
| − | $('#table-navigator').css('margin-left', 'auto');
| |
| − | $('#table-navigatorS').css('margin-left', 'auto');
| |
| − | $('h2').css('text-align', 'center');
| |
| − | $('h2').css('margin-left', 'auto');
| |
| − | $('#div-content p').addClass('centered');
| |
| − | $('#div-content p').css('margin-left', 'auto');
| |
| − | $('.description').css('margin-top', '0px');
| |
| − | $('.description').css('width', '100%');
| |
| − | } else {
| |
| − | $('#table-students').css('margin-left', '700px');
| |
| − | $('#table-advisors').css('margin-left', '700px');
| |
| − | $('#table-navigator').css('margin-left', '709px');
| |
| − | $('#table-navigatorS').css('margin-left', '709px');
| |
| − | $('h2').css('text-align', 'inherit');
| |
| − | $('#div-content p').removeClass('centered');
| |
| − | $('#div-content p').css('margin-left', '100px');
| |
| − | $('h2').css('margin-left', '100px');
| |
| − | $('.description').css('margin-top', '-400px');
| |
| − | $('.description').css('width', '54.5%');
| |
| − | }
| |
| − | }
| |
| − | // Execute on load
| |
| − | checkWidth();
| |
| − | checkBotNav();
| |
| − | headerFontSize();
| |
| − | checkContent();
| |
| − | // Bind function to window resize
| |
| − | $(window).resize(checkWidth);
| |
| − | $(window).resize(checkBotNav);
| |
| − | $(window).resize(headerFontSize);
| |
| − | $(window).resize(checkContent);
| |
| − | });
| |
| − | // Resized nav bar effect when more icon is clicked
| |
| − | $('#img-more').click(function() {
| |
| − | $('#img-more').toggleClass('pushed');
| |
| − | $('#div-navResized').toggleClass('pushed');
| |
| − | $('nav').toggleClass('pushed');
| |
| − | $('nav img').toggleClass('pushed');
| |
| − | $('body').toggleClass('pushed');
| |
| − | if ($(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
| |
| − | $('nav li').css('display', 'inline');
| |
| − | $('#img-more').css('display','none');
| |
| − | $('nav ul').removeClass("hover");
| |
| − | $('#img-igemlogo').css('transition', '.25s ease');
| |
| − | $('#img-igemlogo').css('opacity', '0');
| |
| − | $('#img-logo').css('transition', '.25s ease');
| |
| − | $('#img-logo').css('opacity', '0');
| |
| − | }}
| |
| − | });
| |
| − | // Scrolling animation for top nav bar
| |
| − | var nav = $('nav ul');
| |
| − | $(window).scroll(function() {
| |
| − | var scroll = $(window).scrollTop();
| |
| − | if (scroll > 0) { if ( $(window).width() >= 980) {
| |
| − | nav.addClass("scrolled");
| |
| − | nav.removeClass("hover");
| |
| − | $('#img-logo').css('transition', '.25s ease');
| |
| − | $('#img-logo').css('opacity', '0');
| |
| − | $('#img-igemlogo').css('transition', '.25s ease');
| |
| − | $('#img-igemlogo').css('opacity', '0');
| |
| − | }} else {
| |
| − | nav.removeClass("scrolled");
| |
| − | $('#img-logo').css('transition', '.35s ease-in');
| |
| − | $('#img-logo').css('opacity', '1');
| |
| − | $('#img-igemlogo').css('transition', '.35s ease-in');
| |
| − | $('#img-igemlogo').css('opacity', '1');
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − | <h1>Our Team</h1>
| |
| − | <h3>UMaryland iGEM was founded in 2014 and won two gold medals since its founding. Composed of undergraduate students under the advising of graduate mentors and faculty members, UMaryland iGEM aims to train new scientists in the field of synthetic biology and to apply their knowledge in solving major local and global issues.</h3>
| |
| − | <table id="table-selector"> <!-- Table of navigational links -->
| |
| − | <thead>
| |
| − | <!-- .border classes signify where border needs to be drawn -->
| |
| − | <!-- navigator class trigger javascript on that element -->
| |
| − | <!-- data-select attribute sends to script which element -->
| |
| − | <!-- was clicked -->
| |
| − | <th class="borderRight navigator" id="th-students" data-select="students"><p>Students</p></th>
| |
| − | <th class="borderBoth navigator" id="th-advisors" data-select="advisors"><p>Advisors</p></th>
| |
| − | <th class="borderLeft navigator" id="th-acknowledgements" data-select="acknowledgements"><p>Acknowledgements</p></th>
| |
| − | </thead>
| |
| − | </table>
| |
| − | <div id="div-content">
| |
| − | <div id="div-students" class="profiles">
| |
| − | <table id="table-students">
| |
| − | <tbody>
| |
| − | <tr>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/1/1b/T--UMaryland--chaoyang.jpg" class="clickImageS" id="wang" data-select="chaoyang"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--chunmun.jpg" class="clickImageS" id="loke" data-select="chunmun"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/4/47/T--UMaryland--nancy.jpg" class="clickImageS" id="zhang" data-select="nancy"></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--maria.jpg" class="clickImageS" id="novitskaya" data-select="maria"></td>
| |
| − |
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/e/e2/T--UMaryland--seth.jpg" class="clickImageS" id="cohen" data-select="seth"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/8/8f/T--UMaryland--sangho.jpg" class="clickImageS" id="jee" data-select="sangho"></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--ben.png" class="clickImageS" id="walton" data-select="ben"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--jacob.png" class="clickImageS" id="premo" data-select="jacob"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--subhashini.jpg" class="clickImageS" id="arumugam" data-select="subhashini"></td>
| |
| − | </tr>
| |
| − | </tbody>
| |
| − | </table>
| |
| − | <table id="table-navigatorS">
| |
| − | <tbody>
| |
| − | <tr>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/1/1b/T--UMaryland--chaoyang.jpg" class="clickImageSmallS" id="chaoyangSmall" data-select="chaoyang" data-id="wang" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--chunmun.jpg" class="clickImageSmallS" id="chunmunSmall" data-select="chunmun" data-id="loke" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/4/47/T--UMaryland--nancy.jpg" class="clickImageSmallS" id="nancySmall" data-select="nancy" data-id="zhang" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--maria.jpg" class="clickImageSmallS" id="mariaSmall" data-select="maria" data-id="novitskaya" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/e/e2/T--UMaryland--seth.jpg" class="clickImageSmallS" id="sethSmall" data-select="seth" data-id="cohen" ></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/8/8f/T--UMaryland--sangho.jpg" class="clickImageSmallS" id="sanghoSmall" data-select="sangho" data-id="jee" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--ben.png" class="clickImageSmallS" id="benSmall" data-select="ben" data-id="walton" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--jacob.png" class="clickImageSmallS" id="jacobSmall" data-select="jacob" data-id="premo" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--subhashini.jpg" class="clickImageSmallS" id="subhashiniSmall" data-select="subhashini" data-id="arumugam" ></td>
| |
| − | </tr>
| |
| − | </tbody>
| |
| − | </table>
| |
| − | <div class="descriptions">
| |
| − | <div id="div-subhashini" class="description">
| |
| − | <h2>Subhashini Arumugam</h2>
| |
| − | <p>Subhashini Arumugam is a freshman bioengineering major that aspires to go to medical school someday. Besides science, she is very interested in learning languages, writing, and political activism. She is also very passionate about dance, yoga, making breakfast, and taking naps. She hopes to gain research experience and exposure to the many facets of synthetic biology through iGEM, and looks forward to contributing to the team's outreach projects.</p>
| |
| − | </div>
| |
| − | <div id="div-jacob" class="description">
| |
| − | <h2>Jacob Premo</h2>
| |
| − | <p>Jacob Premo is a freshman currently majoring in biochemistry and microbiology. He joined the UMaryland iGEM team in hopes of working with his peers on meaningful and unique research topics. After his undergraduate career, Jacob plans to pursue a PhD which he would like to put to use developing new medicines. Outside of his academic and research life Jacob enjoys reading books and watching sports.</p>
| |
| − | </div>
| |
| − | <div id="div-ben" class="description">
| |
| − | <h2>Ben Walton</h2>
| |
| − | <p>Ben is a first-year student at the University of Maryland and is majoring in Mechanical Engineering and minoring in Computer Science. At this point in college, he still does not know his career path, but hopes that the experience of iGEM will help to give him some ideas. Outside of school, Ben can be found playing cards or board games with friends, reading, or slack-lining. Very recently, he has developed an interest in snorkeling and scuba diving.</p>
| |
| − | </div>
| |
| − | <div id="div-sangho" class="description">
| |
| − | <h2>SangHo Jee</h2>
| |
| − | <p>SangHo is a freshman biochemistry and neurobiology & physiology double major in the Integrated Life Sciences program, who primarily joined iGEM to work on their wiki and website design, while gaining exposure to how the wet labs work. He hopes to one day attend medical school in the future but is interested in research as well. Outside of iGEM he enjoys web programming, reading the news, and playing video games.</p>
| |
| − | </div>
| |
| − | <div id="div-seth" class="description">
| |
| − | <h2>Seth Cohen</h2>
| |
| − | <p>Seth is a freshman biochemistry major at the University of Maryland, but he's switching into bioengineering. Outside of science his favorite things to do are play basketball and write fiction. His favorite food is probably pizza and his favorite animal is definitely the elephant. Another kind of interesting fact about him is that he is vegetarian. That's pretty much all you need to know about Seth!<p>
| |
| − | </div>
| |
| − | <div id="div-maria" class="description">
| |
| − | <h2>Maria Novitskaya</h2>
| |
| − | <p>Introducing Maria Novitskaya! Maria is a rising sophomore majoring in Neurobiology and Physiology and plans to minor in either Business, Computer Science, or Spanish. Outside of iGEM, Maria is involved in Circle K International and is training to be an Integrated Life Sciences section leader and an Images tour guide...go Terps! Aside from science, Maria is passionate about the color green, loves watching movies and documentaries, and makes great guacamole.<p>
| |
| − | </div>
| |
| − | <div id="div-nancy" class="description">
| |
| − | <h2>Nancy Zhang</h2>
| |
| − | <p>Presenting Nancy Zhang! Nancy is a freshman majoring in Neurology & Physiology and is also a part of the ILS program in the Honors College. Aside from her strong focus in science, Nancy has a great passion for art and devotes her spare time to arts, crafts and sculpture, therefore she brings an artistic touch in addition to years of research experience. She hopes to be able to unite different disciplines like engineering, graphic design, and wet lab work in research to help the team create a strong project this year!<p>
| |
| − | </div>
| |
| − | <div id="div-chaoyang" class="description">
| |
| − | <h2>Chaoyang Wang</h2>
| |
| − | <p>Chaoyang is a freshman studying Neurobiology and Physiology with a minor in Music Performance in the Integrated Life Sciences Program. Aspiring to become a surgeon one day, Chaoyang is an Executive Board Member of the American Medical Student Association. He has researched 2 summers at an Adult Stem Cell lab at the NIH and hopes to contribute his lab experience to the iGEM team.</p>
| |
| − | <p>Chaoyang has also recently partaken in an Alternative Spring Break to New York City to join the movement to end the stigma against HIV and AIDS. Outside of academics, he enjoys playing piano and has played in various renowned locales, including Carnegie Hall and the Millennium Stage at the Kennedy Center. Among his many wins are first prize at the 29th annual International Young Artist Piano Competition. Chaoyang also enjoys taking artsy pictures and loves hanging out with friends. <p>
| |
| − | </div>
| |
| − | <div id="div-chunmun" class="description">
| |
| − | <h2>Chun Mun Loke</h2>
| |
| − | <p>Hailing from Singapore and Australia, Chun Mun's strong interest in genetic engineering prompted him to join iGEM. He hopes to conduct research in this field after attaining an MD/PhD. Outside of school, he is a self proclaimed piano prodigy, having won consecutive local competitions and finalizing in international ones. He can solve a Rubik's cube in a very slow average of 17 seconds and is an avid video gamer. He is actually not a weeaboo as some aspects of his profile may suggest.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="div-advisors" class="profiles">
| |
| − | <table id="table-advisors">
| |
| − | <tbody>
| |
| − | <tr>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/d/dd/T--UMaryland--Dr.Eisenstein.png" class="clickImage" id="Eisenstein" data-select="Ed"></td>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--Dr.Kahn.png" class="clickImage" id="Kahn" data-select="Jason"></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td><img src="https://static.igem.org/mediawiki/2016/9/91/T--UMaryland--Dr.Quimby.png" class="clickImage" id="Quimby" data-select="Boots"></td>
| |
| − | </tr>
| |
| − | </tbody>
| |
| − | </table>
| |
| − | <table id="table-navigator">
| |
| − | <tbody>
| |
| − | <tr>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/d/dd/T--UMaryland--Dr.Eisenstein.png" class="clickImageSmall" id="EdSmall" data-select="Ed" data-id="Eisenstein" ></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--Dr.Kahn.png" class="clickImageSmall" id="JasonSmall" data-select="Jason" data-id="Kahn"></td>
| |
| − | <td class="nospacing"><img src="https://static.igem.org/mediawiki/2016/9/91/T--UMaryland--Dr.Quimby.png" class="clickImageSmall" id="BootsSmall" data-select="Boots" data-id="Quimby"></td>
| |
| − | </tr>
| |
| − | </tbody>
| |
| − | </table>
| |
| − | <div class="descriptions">
| |
| − | <div id="div-Ed" class="description">
| |
| − | <h2>Dr. Edward Eisenstein</h2>
| |
| − | <p> Edward Eisenstein is a Fellow in the Institute for Bioscience and
| |
| − | Biotechnology Research and an Associate Professor in the Fischell Department
| |
| − | of Bioengineering at the University of Maryland. Trained in modern structural
| |
| − | enzymology, his current research interests are focused on protein and biosystem
| |
| − | engineering for discovery and application in plants and microorganisms.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div id="div-Jason" class="description">
| |
| − | <h2>Dr. Jason Kahn</h2>
| |
| − | <p> Jason D. Kahn is a biophysical chemist who studies protein-nucleic acid
| |
| − | interaction and engineering. He is best known for studies of DNA looping,
| |
| − | bending, twisting, and cyclization, as well as hybridization thermodynamics
| |
| − | for modified bases. He teaches a variety of chemistry, biochemistry, and
| |
| − | molecular biology courses, which he credits for initiating his interest in
| |
| − | synthetic biology. Dr. Kahn was a graduate student at UC Berkeley and a
| |
| − | post-doc at Yale before coming to Maryland in 1994.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div id="div-Boots" class="description">
| |
| − | <h2>Dr. Booth "Boots" Quimby</h2>
| |
| − | <p> Dr. Quimby is Associate Director of the Integrated Life Sciences
| |
| − | honors program in the Honors College at the University of Maryland.
| |
| − | Prior to joining the Department of Cell Biology and Molecular Genetics
| |
| − | at UMD as a full-time instructor, she earned her Master's of Arts in
| |
| − | teaching from the University of South Carolina, after which she taught
| |
| − | high school science in Atlanta, Georgia for eight years. She then returned
| |
| − | to graduate school and received her doctorate in genetics and molecular biology
| |
| − | from Emory University.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="bot-nav">
| |
| − | <div id="container">
| |
| − | <div class="pull-left">
| |
| − | <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a>
| |
| − | </div>
| |
| − | <p id="copyright">© University of Maryland iGEM 2016</p>
| |
| − | <div class="pull-right">
| |
| − | <ul id="social-media">
| |
| − | <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
| |
| − | <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="bot-navResized">
| |
| − | <a href="mailto:umarylandigem@gmail.com"><h4 id="contactResized"> Contact Us </h4></a>
| |
| − | <h5 id="copyrightResized">© University of Maryland iGEM 2016</h5>
| |
| − | <ul id="social-mediaResized">
| |
| − | <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
| |
| − | <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </body>
| |
| − | <script>
| |
| − | var clickedT = '';
| |
| − | var current ='';
| |
| − | var currentT = 'students';
| |
| − | var lastStudents = '';
| |
| − | var lastAdvisors = '';
| |
| − | // sets initial display to be purpose
| |
| − | $('.navigator').click( function() { // when any element with .class is clicked, trigger function
| |
| − | var selectedT = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | if (selectedT != currentT) { // only change display / trigger animation if clicking different nav
| |
| − | changeText(selectedT, lastAdvisors, lastStudents)
| |
| − | }
| |
| − | })
| |
| − |
| |
| − | function changeText(selectedT, lastAdvisors, lastStudents) {
| |
| − | $('.navigator').css('border-bottom','1px solid #A8A8A8'); // make all navigational element have no bottom border
| |
| − | $('#th-' + selectedT).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
| |
| − | $('.profiles').css('display','none');
| |
| − | $('#div' + selectedT).css('margin-left', '60px') // slighly shifts right all text to set up for animation
| |
| − | $('#div-' + selectedT).css('display','block');
| |
| − | var returned = (selectedT == 'advisors') ? lastAdvisors : lastStudents;
| |
| − | $('#div-' + returned).css('display','block');
| |
| − | $('#div-' + returned).animate({ marginLeft: '0px'}, 200);
| |
| − | $('#div-' + selectedT).animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
| |
| − | currentT = selectedT; // sets the current display
| |
| − | location.hash = currentT;
| |
| − | }
| |
| − |
| |
| − | var dir = location.hash; // grabs the anchor (text following the #)
| |
| − | var n = dir.indexOf('?'); // and initially sets the page
| |
| − | dir = dir.substring(0, n != -1 ? n : dir.length);
| |
| − | dir = dir.replace('#','');
| |
| − | if (dir == '') {
| |
| − | dir = 'students';
| |
| − | }
| |
| − | changeText(dir)
| |
| − |
| |
| − | $('.profiles .clickImage').click( function() {
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | if (selected != current) {
| |
| − | $('.description').css('display','none'); // hides all text
| |
| − | $('.description').css('margin-left', '60px')
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200);
| |
| − | $('.clickImage').css('display', 'none')
| |
| − | $(this).css('display', 'block');
| |
| − | $(this).parent().attr('colspan', '3');
| |
| − | $(this).animate({ width: '430px', height: '280px'}, 600);
| |
| − | current = selected;
| |
| − | lastAdvisors = current;
| |
| − | $('.clickImageSmall').css('display','inline');
| |
| − | }
| |
| − | });
| |
| − | $('.profiles .clickImageSmall').click( function() {
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | var id = $(this).attr('data-id');
| |
| − | if (selected != current) { // only change display / trigger animation if clicking different nav
| |
| − | $('.description').css('display','none'); // hides all text
| |
| − | $('.description').css('margin-left', '60px')
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200);
| |
| − | $('.clickImage').css('display', 'none')
| |
| − | $('#' + id).css({ 'width': '200px', 'height': '128px' })
| |
| − | $('#' + id).css('display', 'block');
| |
| − | $('#' + id).parent().attr('colspan', '3');
| |
| − | $('#' + id).animate({ width: '430px', height: '280px'}, 600);
| |
| − | current = selected;
| |
| − | lastAdvisors = current;
| |
| − | $('.clickImageSmall').css('display','inline');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $('.profiles .clickImageS').click( function() {
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | if (selected != current) {
| |
| − | $('.description').css('display','none'); // hides all text
| |
| − | $('.description').css('margin-left', '60px')
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200);
| |
| − | $('.clickImageS').css('display', 'none')
| |
| − | $(this).css('display', 'block');
| |
| − | $(this).parent().attr('colspan', '3');
| |
| − | $(this).animate({ width: '430px', height: '280px'}, 600);
| |
| − | current = selected;
| |
| − | lastStudents = current;
| |
| − | $('.clickImageSmallS').css('display','inline');
| |
| − | }
| |
| − | });
| |
| − | $('.profiles .clickImageSmallS').click( function() {
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | var id = $(this).attr('data-id');
| |
| − | if (selected != current) { // only change display / trigger animation if clicking different nav
| |
| − | $('.description').css('display','none'); // hides all text
| |
| − | $('.description').css('margin-left', '60px')
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200);
| |
| − | $('#div-' + selected).animate({ marginBottom: '400px'}, 200);
| |
| − | $('.clickImageS').css('display', 'none')
| |
| − | $('#' + id).css({ 'width': '150px', 'height': '133px' })
| |
| − | $('#' + id).css('display', 'block');
| |
| − | $('#' + id).parent().attr('colspan', '3');
| |
| − | $('#' + id).animate({ width: '430px', height: '280px'}, 600);
| |
| − | current = selected;
| |
| − | lastStudents = current;
| |
| − | lastClicked = 'students'// sets the current display
| |
| − | $('.clickImageSmallS').css('display','inline');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $('#bars_item').css('display','none');
| |
| − | $('#sideMenu').css('display','none');
| |
| − | $('#iGEM').css('display','block');
| |
| − | </script>
| |
