|
|
(45 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 99: |
Line 96: |
| } | | } |
| | | |
− | #h3 { | + | #h3, #div-h3 { |
| font-family: Raleway !important; | | font-family: Raleway !important; |
| display: none; | | display: none; |
| 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; |
| } | | } |
| | | |
| #div-text { | | #div-text { |
− | max-width: 1100px; | + | width: 1100px; |
| padding-top: 20px; | | padding-top: 20px; |
| } | | } |
Line 132: |
Line 117: |
| | | |
| .notOutline { | | .notOutline { |
− | margin-top: 140px; | + | margin-left: 50px; |
| min-height: 400px; | | min-height: 400px; |
| + | min-width: 1000px; |
| } | | } |
| | | |
Line 145: |
Line 131: |
| | | |
| | | |
− | #img-arrow { | + | .tour { |
| + | display: none; |
| position: absolute; | | position: absolute; |
− | top: 7px; | + | right: 150px; |
− | right: 0px; | + | top: 50%; |
− | left: auto; | + | bottom: auto; |
| + | left; auto; |
| } | | } |
| | | |
− | .prompt { | + | html { |
− | font-size: 12pt; | + | background: url(https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--main.jpg) !important; |
− | font-weight: 400;
| + | background-size: cover !important; |
− | line-height: 1em; | + | background-repeat: no-repeat !important; |
− | margin-right: 40px; | + | |
| } | | } |
| | | |
− | .prompt:hover, #img-arrow:hover { | + | .background { |
− | cursor: pointer; | + | background-color: rgba(0,0,0, 0.7); |
| + | padding: 5px 5px 5px 5px; |
| } | | } |
| | | |
− | @media all and (max-height: 800px) { | + | .background2 { |
− | .tour { | + | background-color: rgba(0,0,0, 0.7); |
− | top: 325px;
| + | padding: 5px 0px 4px 0px; |
− | bottom: auto;
| + | |
− | } | + | |
− |
| + | |
− | #small {
| + | |
− | top: 550px;
| + | |
− | bottom: auto;
| + | |
− | }
| + | |
| } | | } |
| | | |
| + | .background3 { |
| + | background-color: rgba(0,0,0, 0.7); |
| + | padding: 5px 10px 5px 10px; |
| + | } |
| | | |
− | .tour { | + | #navContainer { |
− | display: none; | + | position: relative; |
− | position: absolute; | + | width: 100%; |
− | right: 150px; | + | height: 25px; |
− | top: 50%; | + | margin-top: 80px; |
− | bottom: auto; | + | margin-bottom: 120px; |
− | left; auto; | + | 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"> | | <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/Part_Collection">Parts</a></li> |
− | <li><a href="https://2016.igem.org/Team:UMaryland/parts">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/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/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/notebook">Notebook</a></li> |
Line 199: |
Line 202: |
| </ul> | | </ul> |
| </nav> | | </nav> |
| + | </div> |
| </div> | | </div> |
| <div class="notOutline"> | | <div class="notOutline"> |
| <img src="https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/> | | <img src="https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/> |
| <div id="div-text"> | | <div id="div-text"> |
− | <p id="h2">Biosequestration of Methane</p> | + | <p id="h2"><span class="background">Biosequestration of Methane</span></p> |
− | <p id="h3">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</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">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!</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 276: |
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 357: |
Line 251: |
| | | |
| function show2(){ | | function show2(){ |
− | $('#h3').animateCss('fadeInUp'); | + | $('#h3, #div-h3').animateCss('fadeInUp'); |
− | $('#h3').css('display','block'); | + | $('#h3, #div-h3').css('display','block'); |
| timeoutID = window.setTimeout(show3, 800); | | timeoutID = window.setTimeout(show3, 800); |
| } | | } |
Line 370: |
Line 264: |
| function show4() { | | function show4() { |
| $('.tour').animateCss('slideInLeft'); | | $('.tour').animateCss('slideInLeft'); |
− | $('.tour').css('display','block') | + | //$('.tour').css('display','block') |
| timeoutID = window.setTimeout(show5, 5000); | | timeoutID = window.setTimeout(show5, 5000); |
| } | | } |
Line 379: |
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', '100')
| |
− | $('#nav').css('min-width', '')
| |
− |
| |
− | $('#small').css('left', 'auto')
| |
− | $('#small').css('right', '100px')
| |
− | $('#small').css('min-width', '')
| |
− | }
| |
− |
| |
− | }
| |
| </script> | | </script> |
| | | |
| </html> | | </html> |