|
|
| Line 142: |
Line 142: |
| | #div-title { | | #div-title { |
| | z-index: -999; | | z-index: -999; |
| − | }
| |
| − |
| |
| − | /* Permanent bottom bar */
| |
| − | #bot-nav {
| |
| − | background-color: #f9f9f9;
| |
| − | border-top: 1px solid #f5f5f5;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 75px;
| |
| − | margin-top: 20px;
| |
| − | 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: -22px;
| |
| − | }
| |
| − |
| |
| − | #container li {
| |
| − | display: inline;
| |
| − | margin-right: -14px;
| |
| − | }
| |
| − |
| |
| − | #bot-nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | #copyright {
| |
| − | text-align: center;
| |
| − | padding-top: 24px;
| |
| − | padding-right: 63px;
| |
| − | }
| |
| − |
| |
| − | #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;
| |
| | } | | } |
| | | | |
| Line 546: |
Line 442: |
| | <div class="insideText"><p class="h4" >Interlab Study</p><p class="h5" >coming soon!</p></div> | | <div class="insideText"><p class="h4" >Interlab Study</p><p class="h5" >coming soon!</p></div> |
| | <img id="img-interlab" src="https://static.igem.org/mediawiki/2016/9/91/T--UMaryland--interlabcircle.jpeg" /> | | <img id="img-interlab" src="https://static.igem.org/mediawiki/2016/9/91/T--UMaryland--interlabcircle.jpeg" /> |
| − | </a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- End of #div-circles -->
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div></div>
| |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <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=Exo|Lora' rel='stylesheet' type='text/css'>
| |
| − |
| |
| − | <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
| |
| − | <link href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css' rel='stylesheet' type='text/css'>
| |
| − | <title>2nd Annual Mid-Atlantic Meet-up</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <style>
| |
| − | #bars_item {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #sideMenu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | padding: 0 0 0 0;
| |
| − | border: none;
| |
| − | margin: 0 0 0 0;
| |
| − | background: transparent;
| |
| − | font-family: Raleway;
| |
| − | }
| |
| − |
| |
| − | #top_title {
| |
| − | display: none;
| |
| − | line-height: inherit;
| |
| − | }
| |
| − |
| |
| − | #sideMenu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Navbar and body setup */
| |
| − | body {
| |
| − | background-color: black;
| |
| − | font-family: 'Lora', serif;
| |
| − | overflow-x: hidden;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | /* 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-bottom-left-radius: 5px;
| |
| − | border-bottom-right-radius: 5px;
| |
| − | z-index: 1;
| |
| − | margin-top: 18px;
| |
| − | }
| |
| − |
| |
| − | element.style {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | font-family: 'Exo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | nav a:visited {
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | nav a:hover {
| |
| − | opacity: .7;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | list-style: none;
| |
| − | transition: all .5s ease;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − | display: inline;
| |
| − | margin-right: 20px;
| |
| − | }
| |
| − |
| |
| − | /* 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;
| |
| − | }
| |
| − |
| |
| − | /* Background of page */
| |
| − |
| |
| − | html {
| |
| − | background-color: rgba(0, 0, 0, 0.06);
| |
| − | }
| |
| − |
| |
| − | /* Classes */
| |
| − |
| |
| − | .description {
| |
| − | margin-top: 200px;
| |
| − | min-width: 970px;
| |
| − | }
| |
| − |
| |
| − | .border {
| |
| − | border-bottom: 1px black;
| |
| − | }
| |
| − |
| |
| − | .image {
| |
| − | position: relative;
| |
| − | width: 100%; /* for IE 6 */
| |
| − | }
| |
| − |
| |
| − | /* 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;
| |
| − | }
| |
| − |
| |
| − | /* 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: -11px;
| |
| − | }
| |
| − |
| |
| − | #img-UMD {
| |
| − | z-index: -999;
| |
| − | margin-left: -8px;
| |
| − | margin-top: -12px;
| |
| − | height: 600px;
| |
| − | }
| |
| − |
| |
| − | /* Logos when more button is clicked */
| |
| − |
| |
| − | #img-logoResized {
| |
| − | width: 200px;
| |
| − | display: block;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | margin-top: -165px;
| |
| − | padding-right: 40px;
| |
| − | }
| |
| − |
| |
| − | /* Start Page Specific CSS */
| |
| − |
| |
| − | .h1 { /* Centers the heading text on the page at different sizes */
| |
| − | color: white; /* makes the text centered and gray colored */
| |
| − | font-size: 56pt;
| |
| − | font-weight: 200;
| |
| − | text-align: center;
| |
| − | margin-top: 30px;
| |
| − | border-bottom: none;
| |
| − | line-height: 1em;
| |
| − | }
| |
| − |
| |
| − | .h3 {
| |
| − | color: white;
| |
| − | font-size: 20pt;
| |
| − | font-weight: 400;
| |
| − | text-align: center;
| |
| − | max-width: 80%;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | line-height: 1.25em;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* makes circles display horizontally at a fixed width,
| |
| − | turns div from rectangle to circle */
| |
| − | .circle {
| |
| − | display: inline-block;
| |
| − | margin-left: 45px;
| |
| − | width: 260px;
| |
| − | height: 260px;
| |
| − | overflow: hidden;
| |
| − | -webkit-border-radius: 50%;
| |
| − | -moz-border-radius: 50%;
| |
| − | border-radius: 50%;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | /* makes the actual image inside circle the same width as .circle */
| |
| − | .circle img {
| |
| − | width:260px;
| |
| − | }
| |
| − |
| |
| − | /* Triggers darkening of the image within .circle when hovered */
| |
| − | .circle img:hover {
| |
| − | opacity: 0.4;
| |
| − | }
| |
| − |
| |
| − | /* moves all circles down and centered on the page */
| |
| − | #div-circles {
| |
| − | margin-top: 30px;
| |
| − | margin-bottom: 10px;
| |
| − | width: 960px;
| |
| − | margin-left: auto;
| |
| − | margin-right:auto;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* Creates initially invisible text that overlay the circles, positioned over it */
| |
| − | .insideText {
| |
| − | color: white;
| |
| − | position: absolute;
| |
| − | opacity: 0;
| |
| − | z-index: 99999;
| |
| − | margin-top: 55px;
| |
| − | margin-left: 30px;
| |
| − | }
| |
| − |
| |
| − | /* Formats the text inside the circles that show up when darkened */
| |
| − | .h4 {
| |
| − | color: white;
| |
| − | font-size: 24pt;
| |
| − | font-weight: 200;
| |
| − | line-height: 1.5em;
| |
| − | margin-bottom: 15px;
| |
| − | max-width: 200px;
| |
| − | text-align: center;
| |
| − | margin-top: 15px;
| |
| − | }
| |
| − |
| |
| − | .h5 {
| |
| − | color: white;
| |
| − | font-size: 16pt;
| |
| − | font-weight: 200;
| |
| − | line-height: 1.5em;
| |
| − | margin-bottom: 15px;
| |
| − | max-width: 200px;
| |
| − | text-align: center;
| |
| − | margin-top: 15px;
| |
| − | }
| |
| − |
| |
| − | /* Prevents the overlay text links from being blue and underlined */
| |
| − | #div-circles a {
| |
| − | text-decoration: none;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #education, #h5-education {
| |
| − | margin-left: 25px;
| |
| − | margin-top: 35px;
| |
| − | }
| |
| − |
| |
| − | #div-pic {
| |
| − | /* sets the background image above the main text */
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 40px;
| |
| − | min-width: 960px;
| |
| − | max-width: 1200px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-top: 20px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | #div-text {
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | /* Hiding stupid stuff*/
| |
| − | $(document).ready(function() {
| |
| − | $('#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');
| |
| − | });
| |
| − | $('#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>
| |
| − | <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="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
| |
| − | <!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>-->
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/about">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">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoResized">
| |
| − | <ul>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
| |
| − | <!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>-->
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
| |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div id="div-text"> <!-- Start of main text of page -->
| |
| − | <!-- Heading text -->
| |
| − | <div id="div-pic">
| |
| − | <p class="h1">Outreach</p>
| |
| − | <p class="h3">UMaryland iGEM went beyond the laboratory and engaged with nearby universities and the surrounding community about methane, global warming, and synthetic biology</p>
| |
| − | </div>
| |
| − | <!-- Contains all of the circles to be clicked on -->
| |
| − | <div id="div-circles">
| |
| − | <div id="div-humanpractices" class="circle">
| |
| − | <!-- Class 'circle' makes div from rectangle into circle -->
| |
| − | <a href="#"> <!--https://2016.igem.org/Team:UMaryland/humanpractices-->
| |
| − | <!-- Makes the entire circle clickable -->
| |
| − | <div class="insideText"><p class="h4">Human Practices</p><p class="h5">coming soon!</p></div>
| |
| − | <img id="img-humanpractices" src="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--humanpracticescircle.png" />
| |
| − | </a>
| |
| − | </div>
| |
| − | <div id="div-meetup" class="circle">
| |
| − | <a href="https://2016.igem.org/Team:UMaryland/meetup">
| |
| − | <div class="insideText"><p class="h4">Mid-Atlantic Meet-up</p></div>
| |
| − | <img id="img-meetup" src="https://static.igem.org/mediawiki/2016/d/dd/T--UMaryland--meetupcircle.png" />
| |
| − | </a>
| |
| − | </div>
| |
| − | <div id="div-education" class="circle">
| |
| − | <a href="#"> <!--https://2016.igem.org/Team:UMaryland/education-->
| |
| − | <div class="insideText"><p class="h4" id="education">Education</p><p class="h5" id="h5-education">coming soon!</p></div>
| |
| − | <img id="img-education" src="https://static.igem.org/mediawiki/2016/d/d6/T--UMaryland--education.png" />
| |
| | </a> | | </a> |
| | </div> | | </div> |
| Line 1,119: |
Line 574: |
| | | | |
| | </style> | | </style> |
| − | <script src="http://dfcb.github.io/BigVideo.js/bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
| |
| − | <script src="http://vjs.zencdn.net/5.10.7/video.js"></script>
| |
| − | <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
| |
| − | <script src="http://dfcb.github.io/BigVideo.js/bower_components/BigVideo/lib/bigvideo.js"></script>
| |
| − | <script>
| |
| − | $(function() {
| |
| − | var BV = new $.BigVideo();
| |
| − | BV.init();
| |
| − | BV.show('https://static.igem.org/mediawiki/2016/c/cd/T--UMaryland--outreach.webm',{ambient:true});
| |
| − | });
| |
| − | $('.linkText').click( function() { $(this).css('text-decoration','none'); $(this).focusout();});
| |
| − | </script>
| |
| − | <script>
| |
| − |
| |
| − | $('.linkText').click( function() { $(this).css('text-decoration','none'); $(this).focusout();});
| |
| − | </script>
| |
| − | <!-- For nav bar scrolling + hovering + window resize effects-->
| |
| − | <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');
| |
| − | }
| |
| − | }
| |
| − | // Execute on load
| |
| − | checkWidth();
| |
| − | checkBotNav();
| |
| − | // Bind event listener
| |
| − | $(window).resize(checkWidth);
| |
| − | $(window).resize(checkBotNav);
| |
| − | });
| |
| − | // 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');
| |
| − | 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');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(body).css('display','block');
| |
| − | </script>
| |
| − | <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js">
| |
| − | </script>
| |
| − | <script>
| |
| − | $('.circle').hover( //when hovering over any circle trigger script
| |
| − | function() {
| |
| − | $(this).css('background-color','black'); //makes the circle background black to darken img
| |
| − | $(this).children().children('.insideText').css('opacity','100'); //makes inside text visible
| |
| − | $(this).children().children('img').css('opacity','.4'); //decreases opacity of img to simulate darkening
| |
| − | },
| |
| − | function() {
| |
| − | $(this).css('background-color','#FEFFFA'); //makes the circle background white to not show
| |
| − | $(this).children().children('.insideText').css('opacity','0'); //makes inside text invisible
| |
| − | $(this).children().children('img').css('opacity','100'); //increase opacity of img to return to normal
| |
| − | }
| |
| − | )
| |
| − | $('.insideText').hover(
| |
| − | function() {
| |
| − | $(this).children('.h4').css('font-weight','400') //makes heading 'hok/sok' or 'side projects' bold when hovered over
| |
| − | $(this).siblings('img').css('opacity','.4');}, //makes img darkened when hovering over the text
| |
| − | function() {
| |
| − | $(this).children('.h4').css('font-weight','200') //returns everything to normal
| |
| − | }
| |
| − | )
| |
| − | </script>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| | <script src="http://dfcb.github.io/BigVideo.js/bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script> | | <script src="http://dfcb.github.io/BigVideo.js/bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script> |
| | <script src="http://vjs.zencdn.net/5.10.7/video.js"></script> | | <script src="http://vjs.zencdn.net/5.10.7/video.js"></script> |
