Line 113: | Line 113: | ||
bottom: 40px !important; | bottom: 40px !important; | ||
top: auto !important; | top: auto !important; | ||
− | right: 100px | + | right: 100px; |
− | left: auto | + | left: auto; |
font-family: Raleway !important; | font-family: Raleway !important; | ||
text-align: left !important; | text-align: left !important; | ||
Line 144: | Line 144: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#img-arrow { | #img-arrow { | ||
Line 171: | Line 163: | ||
} | } | ||
+ | @media all and (max-height: 800px) { | ||
+ | .tour { | ||
+ | top: 325px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | |||
+ | #small { | ||
+ | top: 550px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | .tour { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | right: 150px; | ||
+ | top: 50%; | ||
+ | bottom: auto; | ||
+ | left; auto; | ||
+ | } | ||
</style> | </style> | ||
<div id="UMD-content"> | <div id="UMD-content"> | ||
Line 207: | Line 220: | ||
</video> | </video> | ||
</div> | </div> | ||
− | <div id="div-frame"> | + | <div id="div-frame1" class="div-frame"></div> |
− | + | <div id="div-frame2" class="div-frame"></div> | |
− | + | ||
<div class="tourGuide"> | <div class="tourGuide"> | ||
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoNav"> | <img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoNav"> | ||
Line 215: | Line 227: | ||
<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="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> | <p id="guideLine3" class="guideText">Click next to proceed through the tour!</p> | ||
− | <a class="guideProceed" onclick="slideshowProceed">Next →</a> | + | <a class="guideProceed" onclick="slideshowProceed()">Next →</a> |
</div> | </div> | ||
</div> | </div> | ||
Line 266: | Line 278: | ||
} | } | ||
− | + | .div-frame { | |
position: absolute; | position: absolute; | ||
overflow: hidden; | overflow: hidden; | ||
Line 298: | Line 310: | ||
var height = $(document).outerHeight(true); | var height = $(document).outerHeight(true); | ||
var width = $(document).outerWidth(true); | var width = $(document).outerWidth(true); | ||
+ | var slide = 0; | ||
+ | var frame1 = ''; | ||
+ | var frame2 = ''; | ||
resizeVid(); | resizeVid(); | ||
+ | checkMargin(); | ||
$( window ).resize(function() { | $( window ).resize(function() { | ||
− | resizeVid() | + | resizeVid(); |
+ | checkMargin(); | ||
}) | }) | ||
Line 374: | Line 391: | ||
$('#h2').animateCss('fadeInUp'); | $('#h2').animateCss('fadeInUp'); | ||
$('#h2').css('display','block'); | $('#h2').css('display','block'); | ||
− | timeoutID = window.setTimeout( | + | slide = 1 |
+ | var dest = 'projects' | ||
+ | timeoutID = window.setTimeout(frameLoad(slide,dest,1,0), 4000); | ||
timeoutID2 = window.setTimeout(setPeriod, 800); | timeoutID2 = window.setTimeout(setPeriod, 800); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 437: | Line 427: | ||
$('nav, #small, #h3, #h2, #img-logo, .hide, .tour').remove(); | $('nav, #small, #h3, #h2, #img-logo, .hide, .tour').remove(); | ||
$('.covervid-wrapper').remove(); | $('.covervid-wrapper').remove(); | ||
− | timeoutID = window.setTimeout(slide1p1, | + | timeoutID = window.setTimeout(slide1p1, 800); |
} | } | ||
var slidePosition = 1 | 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() { | function slide1p1() { | ||
Line 459: | Line 485: | ||
slidePosition = 2 | 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> |
Revision as of 16:00, 24 September 2016
</div></div>
![UMaryland iGEM Logo](https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png)
Biosequestration of Methane
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
Take our
virtual tour!
![](https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--arrow.png)
![](https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg)
Welcome to the virtual tour for the 2016 UMaryland iGEM Project: Biosequestration of Methane!
We have a lot to show you about our work and are excited to show you what we have done!
Click next to proceed through the tour!
Next →