|
|
| (24 intermediate revisions by 2 users not shown) |
| Line 33: |
Line 33: |
| | #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled { | | #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled { |
| | width: 100%; | | width: 100%; |
| − | height: 100%;
| |
| | padding: 0 0 0 0; | | padding: 0 0 0 0; |
| | border: none; | | border: none; |
| Line 39: |
Line 38: |
| | background: transparent; | | background: transparent; |
| | font-family: Raleway !important; | | font-family: Raleway !important; |
| | + | min-width: 1000px; |
| | + | min-height: 500px; |
| | } | | } |
| | | | |
| Line 52: |
Line 53: |
| | /* Navbar and body setup */ | | /* Navbar and body setup */ |
| | body { | | body { |
| − | overflow:hidden; | + | overflow: normal; |
| | } | | } |
| | | | |
| Line 61: |
Line 62: |
| | #UMD-content { | | #UMD-content { |
| | font-family: Raleway !important; | | font-family: Raleway !important; |
| − | margin-top: 100px; | + | min-width: 1000px; |
| − | margin-left: 50px;
| + | |
| − | margin-right: 50px;
| + | |
| | color: white; | | color: white; |
| | font-weight: 300; | | font-weight: 300; |
| − | overflow: hidden; | + | |
| | } | | } |
| | | | |
| Line 80: |
Line 79: |
| | | | |
| | #nav { | | #nav { |
| − | position: absolute; | + | margin-right: 2%; |
| − | right: 100px;
| + | margin-left: auto; |
| − | left: auto; | + | width: 810px; |
| − | top: 100px; | + | |
| − | display: block;
| + | |
| | } | | } |
| | | | |
| Line 104: |
Line 101: |
| | font-size: 20pt !important; | | font-size: 20pt !important; |
| | line-height: 1.5em !important; | | line-height: 1.5em !important; |
| − | text-align: left !important;
| |
| − | }
| |
| − |
| |
| − | #small {
| |
| − | font-size: 14pt !important;
| |
| − | position: absolute !important;
| |
| − | display: block !important;
| |
| − | bottom: 40px !important;
| |
| − | top: auto !important;
| |
| − | right: 100px;
| |
| − | left: auto;
| |
| − | font-family: Raleway !important;
| |
| | text-align: left !important; | | text-align: left !important; |
| | } | | } |
| Line 132: |
Line 117: |
| | | | |
| | .notOutline { | | .notOutline { |
| − | margin-top: 140px; | + | margin-left: 50px; |
| | min-height: 400px; | | min-height: 400px; |
| | + | min-width: 1000px; |
| | } | | } |
| | | | |
| Line 142: |
Line 128: |
| | padding-right: 0px !important; | | padding-right: 0px !important; |
| | text-decoration: none !important; | | text-decoration: none !important; |
| − | }
| |
| − |
| |
| − |
| |
| − | #img-arrow {
| |
| − | position: absolute;
| |
| − | top: 7px;
| |
| − | right: 0px;
| |
| − | left: auto;
| |
| − | }
| |
| − |
| |
| − | .prompt {
| |
| − | font-size: 12pt;
| |
| − | font-weight: 400;
| |
| − | line-height: 1em;
| |
| − | margin-right: 40px;
| |
| − | min-width: 85px;
| |
| − | }
| |
| − |
| |
| − | .prompt:hover, #img-arrow:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | @media all and (max-height: 800px) {
| |
| − | .tour {
| |
| − | top: 325px;
| |
| − | bottom: auto;
| |
| − | }
| |
| − |
| |
| − | #small {
| |
| − | top: 550px;
| |
| − | bottom: auto;
| |
| − | }
| |
| | } | | } |
| | | | |
| Line 197: |
Line 151: |
| | } | | } |
| | | | |
| − | .background { | + | .background2 { |
| | background-color: rgba(0,0,0, 0.7); | | background-color: rgba(0,0,0, 0.7); |
| − | padding: 0px 5px 0px 5px; | + | padding: 5px 0px 4px 0px; |
| | } | | } |
| | | | |
| | + | .background3 { |
| | + | background-color: rgba(0,0,0, 0.7); |
| | + | padding: 5px 10px 5px 10px; |
| | + | } |
| | + | |
| | + | #navContainer { |
| | + | position: relative; |
| | + | width: 100%; |
| | + | height: 25px; |
| | + | margin-top: 80px; |
| | + | margin-bottom: 120px; |
| | + | min-width: 1000px; |
| | + | } |
| | + | |
| | + | |
| | + | #small { |
| | + | font-size: 14pt !important; |
| | + | display: block !important; |
| | + | font-family: Raleway !important; |
| | + | margin-right: 2%; |
| | + | margin-left: auto; |
| | + | width: 500px; |
| | + | |
| | + | } |
| | + | |
| | + | .smallContainer { |
| | + | width: 100%; |
| | + | min-width: 1000px; |
| | + | height: 30px; |
| | + | margin-top: 120px; |
| | + | |
| | + | } |
| | </style> | | </style> |
| | <div id="UMD-content"> | | <div id="UMD-content"> |
| | + | <div id="navContainer"> |
| | <div class="hide"> | | <div class="hide"> |
| − | <nav id="nav"><span class="background"> | + | <nav id="nav"> |
| | <ul> | | <ul> |
| | <li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li> | | <li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li> |
| − | <li><a href="https://2016.igem.org/Team:UMaryland/Parts_Collection">Parts</a></li> | + | <li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li> |
| | <li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li> | | <li><a href="https://2016.igem.org/Team:UMaryland/Model">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/outreach">Outreach</a></li> |
| Line 214: |
Line 201: |
| | <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li> | | <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li> |
| | </ul> | | </ul> |
| − | </span></nav> | + | </nav> |
| | + | </div> |
| | </div> | | </div> |
| | <div class="notOutline"> | | <div class="notOutline"> |
| Line 222: |
Line 210: |
| | <p id="h3"><span class="background2">Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change</span></p> | | <p id="h3"><span class="background2">Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change</span></p> |
| | </div> | | </div> |
| | + | <div class="smallContainer"> |
| | <div class="hide"> | | <div class="hide"> |
| | <p id="small"><span class="background">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline;">Instagram</a> for updates!</span></p> | | <p id="small"><span class="background">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline;">Instagram</a> for updates!</span></p> |
| | </div> | | </div> |
| − | </div>
| |
| − | <div class="tour">
| |
| − | <p class="prompt" onclick="transition()">Take our <br />virtual tour!</p>
| |
| − | <img onclick="transition()" src="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--arrow.png" id="img-arrow" width="32px"/>
| |
| − | </div>
| |
| − | <!--<div class="covervid-wrapper">
| |
| − | <video class="covervid-video" autoplay loop>
| |
| − | <source src="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--landfill.webm" type="video/webm">
| |
| − | <source src="https://static.igem.org/mediawiki/2016/0/03/T--UMaryland--landfill.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | </div>-->
| |
| − | <div id="div-frame1" class="div-frame"></div>
| |
| − | <div id="div-frame2" class="div-frame"></div>
| |
| − | <div class="tourGuide">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoNav">
| |
| − | <p id="guideLine1" class="guideText">Welcome to the virtual tour for the 2016 UMaryland iGEM Project: Biosequestration of Methane!</p>
| |
| − | <p id="guideLine2" class="guideText">We have a lot to show you about our work and are excited to show you what we have done!</p>
| |
| − | <p id="guideLine3" class="guideText">Click next to proceed through the tour!</p>
| |
| − | <a class="guideProceed" onclick="slideshowProceed()">Next →</a>
| |
| | </div> | | </div> |
| | </div> | | </div> |
| | + | </div> |
| | <style> | | <style> |
| − | .guideProceed {
| |
| − | position: absolute;
| |
| − | color: blue !important;
| |
| − | text-decoration: underline;
| |
| − | right: 250px;
| |
| − | left: auto;
| |
| − | top: 55px;
| |
| − | font-weight: 800;
| |
| − | bottom: auto;
| |
| − | cursor: pointer;
| |
| − | display: none;
| |
| − | font-size: 12pt !important;
| |
| − | }
| |
| − |
| |
| − | .tourGuide {
| |
| − | font-size: 12pt !important;
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 12px;
| |
| − | bottom: auto;
| |
| − | height: 120px;
| |
| − | width: 100%;
| |
| − | left: 0px;
| |
| − | right: auto;
| |
| − | background-color: white;
| |
| − | -webkit-box-shadow: 0px 5px 15px 0px rgba(94, 94, 94, 0.5);
| |
| − | -moz-box-shadow: 0px 5px 15px 0px rgba(94, 94, 94, 0.5);
| |
| − | box-shadow: 0px 5px 15px 0px rgba(94, 94, 94, 0.5);
| |
| − | }
| |
| − |
| |
| − | .guideText {
| |
| − | margin-top: 12px !important;
| |
| − | display: none;
| |
| − | font-weight: 400;
| |
| − | margin-left: 400px;
| |
| − | color: black;
| |
| − | max-width: 800px;
| |
| − | }
| |
| − |
| |
| | #img-logoNav{ | | #img-logoNav{ |
| | display: none; | | display: none; |
| Line 292: |
Line 224: |
| | width: 260px; | | width: 260px; |
| | float: left; | | float: left; |
| − | }
| |
| − |
| |
| − | .div-frame {
| |
| − | position: absolute;
| |
| − | overflow: hidden;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0px;
| |
| − | left: 0px;
| |
| − | z-index: -999;
| |
| − | }
| |
| − |
| |
| − | .tourFrame {
| |
| − | display: none;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0px;
| |
| − | left: 0px;
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | .covervid-wrapper {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | z-index: -999;
| |
| | } | | } |
| | </style> | | </style> |
| | </div> | | </div> |
| | <script> | | <script> |
| − | var height = $(document).outerHeight(true);
| |
| − | var width = $(document).outerWidth(true);
| |
| − | var slide = 0;
| |
| − | var frame1 = '';
| |
| − | var frame2 = '';
| |
| − |
| |
| − | resizeVid();
| |
| − | checkMargin();
| |
| − |
| |
| − | $( window ).resize(function() {
| |
| − | resizeVid();
| |
| − | checkMargin();
| |
| − | })
| |
| − |
| |
| − | function resizeVid() {
| |
| − | $('.covervid-video').css("width","");
| |
| − | $('.covervid-video').css("height","");
| |
| − | height = $(document).outerHeight(true);
| |
| − | width = $(document).outerWidth(true);
| |
| − | ratio = width / height;
| |
| − | if (ratio < 1.777777777777) {
| |
| − | $('.covervid-video').css('height', height+20)
| |
| − | } else if (ratio >= 1.777777777777) {
| |
| − | $('.covervid-video').css('width',width+20)
| |
| − | }
| |
| − | }
| |
| | | | |
| | | | |
| Line 395: |
Line 273: |
| | } | | } |
| | | | |
| − | function transition() {
| |
| − | $('nav, #small, #h3, #h2, .tour').animateCss('fadeOutDown');
| |
| − | timeoutID = window.setTimeout(loading, 1000);
| |
| − | }
| |
| − |
| |
| − | function loading() {
| |
| − | $('nav, #small, #h3, #h2, .hide, .tour').css('display','none');
| |
| − | $('#h2').removeClass('animated ' + 'fadeOutDown');
| |
| − | $('#h2').css('padding-top','80px');
| |
| − | $('#h2').text('Loading virtual tour');
| |
| − | $('#h2').animateCss('fadeInUp');
| |
| − | $('#h2').css('display','block');
| |
| − | slide = 1
| |
| − | var dest = 'projects'
| |
| − | timeoutID = window.setTimeout(frameLoad(slide,dest,1,0), 4000);
| |
| − | timeoutID2 = window.setTimeout(setPeriod, 800);
| |
| − | }
| |
| − |
| |
| − | function setPeriod() {
| |
| − | text = $('#h2').text();
| |
| − | var loadText = ''
| |
| − | switch(text) {
| |
| − | case 'Loading virtual tour':
| |
| − | loadText = 'Loading virtual tour.';
| |
| − | break;
| |
| − | case 'Loading virtual tour.':
| |
| − | loadText = 'Loading virtual tour..';
| |
| − | break;
| |
| − | case 'Loading virtual tour..':
| |
| − | loadText = 'Loading virtual tour...';
| |
| − | break;
| |
| − | case 'Loading virtual tour...':
| |
| − | loadText = 'Loading virtual tour....';
| |
| − | break;
| |
| − | case 'Loading virtual tour....':
| |
| − | loadText = 'Loading virtual tour.....';
| |
| − | break;
| |
| − | case 'Loading virtual tour.....':
| |
| − | loadText = 'Loading virtual tour.';
| |
| − | break;
| |
| − | }
| |
| − | text = $('#h2').text(loadText);
| |
| − | timeoutID2 = window.setTimeout(setPeriod, 800);
| |
| − | }
| |
| − |
| |
| − | function destroyVid() {
| |
| − | $('nav, #small, #h3, #h2, #img-logo, .hide, .tour').remove();
| |
| − | $('.covervid-wrapper').remove();
| |
| − | timeoutID = window.setTimeout(slide1p1, 800);
| |
| − | }
| |
| − |
| |
| − | var slidePosition = 1
| |
| − |
| |
| − | function showText(textArray, destination){
| |
| − | var textLines = [
| |
| − | $('#guideLine1'),
| |
| − | $('#guideLine2'),
| |
| − | $('#guideLine3')
| |
| − | ];
| |
| − | var iteratation = 1
| |
| − | var maxIteration = textLines.length;
| |
| − | timeoutID = window.setTimeout(animateText(iteration, maxIteration, textLines, textArray, destination), 800);
| |
| − | }
| |
| − |
| |
| − | function animateText(iteration, maxIteration, textLines, textArray, destination) {
| |
| − | textLine[iteration].animateCss('fadeInUp');
| |
| − | textLine[iteration].css('display','block');
| |
| − | waitText(iteration, maxIteration, textLines , textArray);
| |
| − | iteration += 1;
| |
| − | if (iteration > maxIteration) {
| |
| − | timeoutID = window.setTimeout(preLoadFrame(destination), 800);
| |
| − | } else {
| |
| − | timeoutID = window.setTimeout(animateText(iteration, maxIteration,textLines, textArray, destination), 800);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function preLoadFrame() {
| |
| − | var frame1 = $('#div-frame1').children('.tourFrame')
| |
| − | var frame2 =
| |
| − | $(frameSwitch).html('<iframe class="tourFrame" src="https://2016.igem.org/Team:UMaryland/'+dest+'"></iframe>');
| |
| − | }
| |
| − |
| |
| − | function slideshowProceed() {
| |
| − | if (slidePosition == 2) slide2p1();
| |
| − | if (slidePosition == 3) slide3p0();
| |
| − | if (slidePosition == 4) slide4p0();
| |
| − | window.location.hash = 'slide'+slidePosition+'p1';
| |
| − | }
| |
| − |
| |
| − | function slide1p1() {
| |
| − | $('#img-logoNav, #guideLine1').animateCss('fadeInUp');
| |
| − | $('#img-logoNav, #guideLine1').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide1p2, 800);
| |
| − | }
| |
| − |
| |
| − | function slide1p2() {
| |
| − | $('#guideLine2').animateCss('fadeInUp');
| |
| − | $('#guideLine2').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide1p3, 800);
| |
| − | }
| |
| − |
| |
| − | function slide1p3() {
| |
| − | $('#guideLine3, .guideProceed').animateCss('fadeInUp');
| |
| − | $('#guideLine3, .guideProceed').css('display','block');
| |
| − | slidePosition = 2
| |
| − | }
| |
| − |
| |
| − | function slide2p1() {
| |
| − | $('.guideText').css('display','none');
| |
| − | $('#guideLine1').text('Our project involves creating a strain of E. coli that converts methane into methanol');
| |
| − | $('#guideLine1').animateCss('fadeInUp');
| |
| − | $('#guideLine1').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide2p2, 800);
| |
| − | }
| |
| − |
| |
| − | function slide2p2() {
| |
| − | $('#guideLine2').text('This is done using genes from methanotrophic bacteria that code for the protein sMMO');
| |
| − | $('#guideLine2').animateCss('fadeInUp');
| |
| − | $('#guideLine2').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide2p3, 800);
| |
| − | }
| |
| − |
| |
| − | function slide2p3() {
| |
| − | $('#guideLine3').text('We also include genes in a coculture to convert methanol into cellular metabolites and carbon dioxide');
| |
| − | $('#guideLine3').animateCss('fadeInUp');
| |
| − | $('#guideLine3').css('display','block');
| |
| − | slidePosition = 3
| |
| − | frameLoad(3, 'about', 0, 0)
| |
| − | }
| |
| − |
| |
| − | function slide3p0() {
| |
| − | if (frame2 == 'about') {
| |
| − | $.when(frameLoad(3, 'about', 1, 1)).done(function(frameDestroy) {
| |
| − | slide3p1(frameDestroy)
| |
| − | });
| |
| − | } else {
| |
| − | $.when(frameLoad(3, 'about', 1, 0)).done(function(frameDestroy) {
| |
| − | slide3p1(frameDestroy)
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function slide3p1(frameDestroy) {
| |
| − | //$(frameDestroy).html('');
| |
| − | $('.guideText').css('display','none');
| |
| − | $('#guideLine1').text('Our team is comprised of undergraduate students under the advising of graduate students and faculty');
| |
| − | $('#guideLine1').animateCss('fadeInUp');
| |
| − | $('#guideLine1').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide3p2, 800);
| |
| − | }
| |
| − |
| |
| − | function slide3p2() {
| |
| − | $('#guideLine2').text('Many of our lab members were freshmen who had their first experience with synthetic biology');
| |
| − | $('#guideLine2').animateCss('fadeInUp');
| |
| − | $('#guideLine2').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide3p3, 800);
| |
| − | }
| |
| − |
| |
| − | function slide3p3() {
| |
| − | $('#guideLine3').text('We also had returning members who trained our incoming members');
| |
| − | $('#guideLine3').animateCss('fadeInUp');
| |
| − | $('#guideLine3').css('display','block');
| |
| − | slidePosition = 4
| |
| − | frameLoad(4, 'education', 0, 0)
| |
| − | }
| |
| − |
| |
| − | function slide4p0() {
| |
| − | if (frame1 == 'education') {
| |
| − | $.when(frameLoad(3, 'education', 1, 1)).done(function(frameDestroy) {
| |
| − | slide4p1(frameDestroy)
| |
| − | });
| |
| − | } else {
| |
| − | $.when(frameLoad(3, 'education', 1, 0)).done(function(frameDestroy) {
| |
| − | slide4p1(frameDestroy)
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function slide4p1(frameDestroy) {
| |
| − | $(frameDestroy).html('');
| |
| − | $('.guideText').css('display','none');
| |
| − | $('#guideLine1').text('We placed emphasis on furthering the dialogue with the public about synthetic biology');
| |
| − | $('#guideLine1').animateCss('fadeInUp');
| |
| − | $('#guideLine1').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide3p2, 800);
| |
| − | }
| |
| − |
| |
| − | function slide4p2() {
| |
| − | $('#guideLine2').text('We volunteered at Port Discovery at the Building with Biology Event');
| |
| − | $('#guideLine2').animateCss('fadeInUp');
| |
| − | $('#guideLine2').css('display','block');
| |
| − | timeoutID = window.setTimeout(slide3p3, 800);
| |
| − | }
| |
| − |
| |
| − | function slide4p3() {
| |
| − | $('#guideLine3').text('As well as presenting at River Hill High School about iGEM and synthetic biology.');
| |
| − | $('#guideLine3').animateCss('fadeInUp');
| |
| − | $('#guideLine3').css('display','block');
| |
| − | slidePosition = 5
| |
| − | frameLoad(5, 'meetup', 0, 0)
| |
| − | }
| |
| − |
| |
| − | function checkMargin() {
| |
| − | var width = $(window).outerWidth(true);
| |
| − | var height = $(window).outerHeight(true);
| |
| − |
| |
| − | if (width < 1350) {
| |
| − | $('.tour').css('left', '1130px')
| |
| − | $('.tour').css('right', 'auto')
| |
| − | $('.tour').css('min-width', '100px')
| |
| − |
| |
| − | $('#nav').css('left', '700px')
| |
| − | $('#nav').css('right', 'auto')
| |
| − | $('#nav').css('min-width', '600px')
| |
| − |
| |
| − | $('#small').css('left', '820px')
| |
| − | $('#small').css('right', 'auto')
| |
| − | $('#small').css('min-width', '430px')
| |
| − | } else {
| |
| − |
| |
| − | $('.tour').css('left', 'auto')
| |
| − | $('.tour').css('right', '150px')
| |
| − | $('.tour').css('min-width', '')
| |
| − |
| |
| − | $('#nav').css('left', 'auto')
| |
| − | $('#nav').css('right', '100px')
| |
| − | $('#nav').css('min-width', '')
| |
| − |
| |
| − | $('#small').css('left', 'auto')
| |
| − | $('#small').css('right', '100px')
| |
| − | $('#small').css('min-width', '')
| |
| − | }
| |
| − |
| |
| − | }
| |
| | </script> | | </script> |
| | | | |
| | </html> | | </html> |
