Difference between revisions of "Team:UMaryland"

Line 113: Line 113:
 
bottom: 40px !important;
 
bottom: 40px !important;
 
top: auto !important;
 
top: auto !important;
−
right: 100px !important;
+
right: 100px;
−
left: auto !important;
+
left: auto;
 
font-family: Raleway !important;
 
font-family: Raleway !important;
 
text-align: left !important;
 
text-align: left !important;
Line 144: Line 144:
 
}
 
}
 
 
−
.tour {
 
−
display: none;
 
−
position: absolute;
 
−
right: 150px;
 
−
top: 50%;
 
−
bottom: auto;
 
−
left; auto;
 
−
}
 
 
 
 
#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>
+
 
<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 {
+
.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(slideOut, 4000);
+
slide = 1
 +
var dest = 'projects'
 +
timeoutID = window.setTimeout(frameLoad(slide,dest,1,0), 4000);
 
timeoutID2 = window.setTimeout(setPeriod, 800);
 
timeoutID2 = window.setTimeout(setPeriod, 800);
−
}
 
−
 
−
function slideOut() {
 
−
var slide = 1
 
−
$('#div-frame').html('<iframe class="tourFrame" src="https://2016.igem.org/Team:UMaryland/education"></iframe>');
 
−
 
−
$('.tourFrame').load(function () {
 
−
 
−
 
−
if (slide == 1) {
 
−
window.clearTimeout(timeoutID2);
 
−
var left = $(document).outerWidth(true);
 
−
$('#div-frame').css('z-index','1000')
 
−
$('#div-frame').css('left', left);
 
−
$('.tourFrame').css('display','block')
 
−
$('#div-frame').css('display','block');
 
−
 
−
$('.tourGuide').css('z-index','10000')
 
−
$('.tourGuide').css('left', left);
 
−
$('.tourGuide').css('display','block');
 
−
 
−
$('#div-frame').animate({left:0},2000);
 
−
$('.tourGuide').animate({left:0},2000);
 
−
timeoutID = window.setTimeout(destroyVid, 2000);
 
−
slide = 0;
 
−
}
 
−
 
−
 
−
})
 
 
}
 
}
 
 
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, 2000);
+
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>

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

Follow us on Facebook and Instagram for updates!

Take our
virtual tour!

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 →