Difference between revisions of "Team:UMaryland"

 
(17 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 {
−
margin-right: 5%;
+
margin-right: 2%;
 
margin-left: auto;
 
margin-left: auto;
 
width: 810px;
 
width: 810px;
Line 102: 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 130: Line 117:
 
 
 
.notOutline {
 
.notOutline {
 +
margin-left: 50px;
 
min-height: 400px;
 
min-height: 400px;
 +
min-width: 1000px;
 
}
 
}
 
 
Line 164: Line 153:
 
.background2 {
 
.background2 {
 
background-color: rgba(0,0,0, 0.7);
 
background-color: rgba(0,0,0, 0.7);
−
padding: 5px 0px 5px 0px;
+
padding: 5px 0px 4px 0px;
 
}
 
}
 
 
Line 176: Line 165:
 
width: 100%;
 
width: 100%;
 
height: 25px;
 
height: 25px;
−
margin-top: 10px;
+
margin-top: 80px;
 
margin-bottom: 120px;
 
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">
Line 187: Line 195:
 
<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 202: 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>
−
<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>
 
</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 263: 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 366: 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>

Latest revision as of 02:39, 12 October 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!