|
|
| Line 218: |
Line 218: |
| | </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> |
