"
Team:Waterloo
From 2013.igem.org
(Difference between revisions)
(Fixed navigation bug with arrow key movements) |
(Second design with some content. Laggy due to high-resolution photos which will be swapped out soon.) |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| - | <head> | + | <head> |
| + | <!--<script type="text/javascript" src="https://2013.igem.org/common/jquery-latest.min.js"></script>--> | ||
<style type="text/css"> | <style type="text/css"> | ||
| - | + | /* Restyling existing mediaWiki-style content in the header and footer */ | |
| - | + | .firstHeading, #footer-box, #catlinks, #contentSub { | |
| - | + | display: none; | |
| - | + | } | |
| - | + | #globalWrapper { | |
| - | + | background-color: black; | |
| - | + | overflow-x: hidden; | |
| - | + | } | |
| - | + | #p-logo { | |
| - | + | background-color: black; | |
| - | + | } | |
| - | + | #top-section { | |
| - | + | border: none; | |
| - | + | height: 150px; | |
| - | + | } | |
| - | + | #content { | |
| - | + | border: none; | |
| - | + | padding-top: 0; | |
| - | + | padding-bottom: 0; | |
| - | + | } | |
| - | + | /* Removes "teams" from the menubar */ | |
| - | + | #menubar.left-menu > ul > li:last-child { | |
| - | + | display: none; | |
| - | + | } | |
| - | + | /* Resizes the menubar to fix the links */ | |
| - | + | #menubar { | |
| - | + | width: auto; | |
| - | + | background-color: black; | |
| - | + | } | |
| - | + | #menubar > ul > li > a { | |
| - | + | background-color: black; | |
| - | + | } | |
| - | + | /* End of restyling existing mediaWiki content */ | |
| - | .layer { | + | .hiddenElement { |
| - | + | display: none; | |
| - | + | } | |
| - | + | .layer { | |
| - | + | position: absolute; | |
| - | + | height: 800px; | |
| - | + | width: 18000px; | |
| - | + | } | |
| - | + | #layer0 { | |
| + | z-index: 1; | ||
| + | width: 1905px; | ||
| + | left: -465px; | ||
| + | background-image: url('https://static.igem.org/mediawiki/2013/6/68/Waterloo_dark_background.jpg'); | ||
| + | background-size: 1905px; | ||
| + | } | ||
| + | #layer1 { | ||
| + | z-index: 10; | ||
| + | } | ||
| + | #pageContainer { | ||
| + | } | ||
| + | .page { | ||
| + | height: 800px; | ||
| + | width: 1905px; | ||
| + | float: left; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | .pageStuff { | ||
| + | color: white; | ||
| + | overflow-y: scroll; | ||
| + | width: 685px; | ||
| + | height: 800px; | ||
| + | margin-left: 745px; | ||
| + | padding-top: 15px; | ||
| + | } | ||
| + | .pageStuff h1 { | ||
| + | color: white; | ||
| + | font-size: 28px; | ||
| + | } | ||
| + | .pageStuff p { | ||
| + | margin-left: 20px; | ||
| + | font-size: 16px; | ||
| + | } | ||
| + | .pageStuff::-webkit-scrollbar { | ||
| + | display: none; | ||
| + | } | ||
| + | .navBar { | ||
| + | z-index: 20; | ||
| + | position: absolute; | ||
| + | width: 225px; | ||
| + | height: 730px; | ||
| + | /*left: 465px;*/ | ||
| + | padding: 10px 20px 10px 20px; | ||
| + | color: white; | ||
| - | + | /* http://www.colorzilla.com/gradient-editor/#006e2e+0,00e059+100;Custom */ | |
| - | + | background: rgb(0,110,46); /* Old browsers */ | |
| - | + | background: -moz-linear-gradient(45deg, rgba(0,110,46,1) 0%, rgba(0,224,89,1) 100%); /* FF3.6+ */ | |
| - | + | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,110,46,1)), color-stop(100%,rgba(0,224,89,1))); /* Chrome,Safari4+ */ | |
| - | + | background: -webkit-linear-gradient(45deg, rgba(0,110,46,1) 0%,rgba(0,224,89,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| - | + | background: -o-linear-gradient(45deg, rgba(0,110,46,1) 0%,rgba(0,224,89,1) 100%); /* Opera 11.10+ */ | |
| - | + | background: -ms-linear-gradient(45deg, rgba(0,110,46,1) 0%,rgba(0,224,89,1) 100%); /* IE10+ */ | |
| - | + | background: linear-gradient(45deg, rgba(0,110,46,1) 0%,rgba(0,224,89,1) 100%); /* W3C */ | |
| - | + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e2e', endColorstr='#00e059',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
| - | + | } | |
| - | + | h1 { | |
| - | + | border-bottom: 0; | |
| - | + | } | |
| - | + | .navBar h1 { | |
| - | + | margin-left: auto; | |
| - | + | margin-right: auto; | |
| - | + | color: white; | |
| - | + | font-size: 30px; | |
| - | + | font-weight: bold; | |
| - | + | font-family: Verdana, sans-serif; | |
| - | + | } | |
| - | + | .navBar a { | |
| - | + | font-family: Verdana, sans-serif; | |
| - | + | color: white; | |
| - | + | display: block; | |
| - | + | margin: 10px 0 10px 0; | |
| - | + | text-decoration: none; | |
| - | + | } | |
| - | + | .navBar p { | |
| - | + | font-size: 14px; | |
| - | . | + | } |
| - | + | .navBar ul { | |
| - | + | list-style-type: none; | |
| - | + | list-style-image: none; | |
| - | + | } | |
| - | + | .placeHolder { | |
| + | height: 800px; | ||
| + | } | ||
| + | .largeLogo { | ||
| + | width: 575px; | ||
| + | margin: 150px 0 0 50px; | ||
| + | } | ||
| + | /* | ||
| + | .scrollingSection { | ||
| + | overflow-y: scroll; | ||
| + | height: 500px; | ||
| + | } | ||
| + | */ | ||
| + | .pageLinks { | ||
| + | margin: 40px 0 10px 0; | ||
| + | } | ||
| - | + | /* Experimental CSS3 Animations */ | |
| - | + | @keyframes startGlow { | |
| - | + | 0% {color: white;} | |
| - | + | 100% {color: yellow;} | |
| - | + | } | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | @-webkit-keyframes startGlow /* Safari and Chrome */ { | |
| - | + | 0% {color: white;} | |
| - | + | 100% {color: yellow;} | |
| - | + | } | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | .navBar .pageLinks a { | |
| - | + | } | |
| - | + | .navBar .pageLinks a:hover { | |
| - | } | + | color: yellow; |
| - | + | animation: startGlow 0.5s; | |
| - | + | -webkit-animation: startGlow 0.5s; | |
| - | } | + | } |
| - | # | + | |
| - | + | .shownSublinks { | |
| - | } | + | } |
| - | + | .hiddenSublinks { | |
| - | + | } | |
| - | } | + | .link { |
| - | + | font-size: 24px; | |
| - | + | } | |
| - | + | .sublink { | |
| - | + | margin-left: 20px; | |
| - | + | font-size: 20px; | |
| - | + | } | |
| - | } | + | /* TODO animate resizing this */ |
| + | .hiddenSublinks .sublink { | ||
| + | display: none; | ||
| + | } | ||
| + | .socialButtons { | ||
| + | position: absolute; | ||
| + | top: 590px | ||
| + | } | ||
| + | #bodyContent .socialButtons a { | ||
| + | background: none; | ||
| + | padding-right: 13px; | ||
| + | display: inline; | ||
| + | } | ||
| + | .photoSection { | ||
| + | margin-left: 20px; | ||
| + | } | ||
| + | .headshot { | ||
| + | /*width: 100px;*/ | ||
| + | height: 100px; | ||
| + | } | ||
| + | .headshotWrapper { | ||
| + | margin: 0 15px 15px 0; | ||
| + | overflow: hidden; | ||
| + | float: left; | ||
| + | } | ||
| + | #otp { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | + | (function() { | |
| - | + | ||
| - | + | var pages = [ | |
| - | + | '#/Home', | |
| - | + | '#/Project', | |
| - | + | '#/Team', | |
| - | + | '#/MathModelling', | |
| - | + | '#/Outreach', | |
| - | + | '#/Gallery', | |
| - | + | '#/Notebook', | |
| - | + | '#/Safety', | |
| - | + | '#/Sponsors' | |
| - | + | ]; | |
| - | + | var navBar = null; | |
| - | + | var page_idx_map = {}; | |
| - | + | var layer_factors = [0, 1, 0]; | |
| - | + | var LAYER_OFFSET = -465; | |
| - | + | var page_idx = 0; | |
| - | + | var PAGE_WIDTH = 1905; | |
| - | + | var NUM_PAGES = 9; | |
| - | + | var NUM_LAYERS = 2; | |
| - | + | ||
| - | + | // TODO - put all asset urls in one place | |
| - | + | var logo_url = 'https://static.igem.org/mediawiki/2013/0/08/Igem_logo.png'; | |
| - | + | ||
| - | + | if (!String.prototype.format) { | |
| - | + | String.prototype.format = function() { | |
| - | + | var args = arguments; | |
| - | + | return this.replace(/{(\d+)}/g, function(match, number) { | |
| - | + | return typeof args[number] != 'undefined' | |
| - | + | ? args[number] | |
| + | : match | ||
| + | ; | ||
| + | }); | ||
| + | }; | ||
| + | } | ||
| - | + | function Link(link, text) { | |
| + | this.link = link; | ||
| + | this.text = text; | ||
| + | } | ||
| + | |||
| + | function ImageLink(link, url) { | ||
| + | this.link = link; | ||
| + | this.url = url; | ||
| + | } | ||
| + | |||
| + | function NavBar() { | ||
| + | this.links = []; | ||
| + | this.sublinks = []; | ||
| + | this.linkWrappers = []; | ||
| + | this.focus = 0; | ||
| + | } | ||
| + | NavBar.prototype.addLink = function(link, sublinks) { | ||
| + | if (sublinks === undefined) { | ||
| + | sublinks = []; | ||
| + | } | ||
| + | this.links.push(link); | ||
| + | this.sublinks.push(sublinks); | ||
| + | }; | ||
| + | NavBar.prototype.showSectionOnly = function(section_idx) { | ||
| + | for (var i = 0; i < this.linkWrappers.length; i++) { | ||
| + | var wrapper = this.linkWrappers[i]; | ||
| + | if (i === section_idx) { | ||
| + | wrapper.removeClass('hiddenSublinks'); | ||
| + | wrapper.addClass('shownSublinks'); | ||
| + | } else { | ||
| + | wrapper.removeClass('shownSublinks'); | ||
| + | wrapper.addClass('hiddenSublinks'); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | NavBar.prototype.render = function() { | ||
| + | //var container = $('<div class="navBar" />'); | ||
| + | var page_links = $('<ul class="pageLinks" />'); | ||
| + | for (var i = 0; i < this.links.length; i++) { | ||
| + | var link_wrapper = $('<li class="hiddenSublinks"/>'); | ||
| + | var link_string = '<div class="link"><a href="{0}">- {1}</a></div>'; | ||
| + | var link = $(link_string.format(this.links[i].link, this.links[i].text)); | ||
| + | link_wrapper.append(link); | ||
| + | |||
| + | var sublinks = this.sublinks[i]; | ||
| + | for (var j = 0; j < sublinks.length; j++) { | ||
| + | var sublink_string = '<div class="sublink"><a href="{0}">- {1}</a></div>'; | ||
| + | var sublink = $(sublink_string.format(sublinks[j].link, sublinks[j].text)); | ||
| + | link_wrapper.append(sublink); | ||
| + | |||
| + | } | ||
| + | link.click(this.showSectionOnly.bind(this, i)); | ||
| + | this.linkWrappers.push(link_wrapper); | ||
| + | page_links.append(link_wrapper); | ||
| + | } | ||
| + | //container.append(page_links); | ||
| + | return page_links; | ||
| + | }; | ||
| + | |||
| + | function socialButtons(image_links) { | ||
| + | var container = $('<span class="socialButtons"/>'); | ||
| + | for (var i = 0; i < image_links.length; i++) { | ||
| + | var l = image_links[i]; | ||
| + | var s = '<a href="{0}"><img src="{1}" /></a>'.format(l.link, l.url); | ||
| + | container.append($(s)); | ||
| + | } | ||
| + | return container; | ||
| + | } | ||
| + | |||
| + | function createPhotoGrid(names_to_urls) { | ||
| + | var root = $('<div><div/>'); | ||
| + | for (var name in names_to_urls) { | ||
| + | if (!names_to_urls.hasOwnProperty(name)) continue; | ||
| + | var url = names_to_urls[name]; | ||
| + | root.append($('<div class="headshotWrapper"><img class="headshot" src="{1}" /><div>{0}</div></div>'.format(name, url))); | ||
| + | } | ||
| + | return root; | ||
| + | } | ||
| + | |||
| + | function setupPhotos() { | ||
| + | var setupGroup = function(id, grid_data) { | ||
| + | $(id).append(createPhotoGrid(grid_data)); | ||
| + | }; | ||
| + | setupGroup('#administratorPhotos', | ||
| + | { | ||
| + | /* TODO | ||
| + | 'Peter': '', | ||
| + | 'Linda': '' | ||
| + | */ | ||
| + | } | ||
| + | ); | ||
| + | // TODO - use MUCH smaller photos so it doesn't lag. | ||
| + | setupGroup('#teamPhotos', | ||
| + | { | ||
| + | 'Paul': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG', | ||
| + | 'Aaron': 'https://static.igem.org/mediawiki/2013/5/59/Waterloo_aaron.JPG', | ||
| + | 'Hina': 'https://static.igem.org/mediawiki/2013/0/0b/Waterloo_hina.JPG', | ||
| + | 'Emily': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_emily.JPG', | ||
| + | 'Rummy': 'https://static.igem.org/mediawiki/2013/0/07/Waterloo_rummy.JPG', | ||
| + | 'Julia': 'https://static.igem.org/mediawiki/2013/a/ae/Waterloo_julia.JPG', | ||
| + | 'Steven': 'https://static.igem.org/mediawiki/2013/4/4f/Waterloo_steven.JPG', | ||
| + | 'Urooj': 'https://static.igem.org/mediawiki/2013/d/d2/Waterloo_urooj.jpg', | ||
| + | 'Jama': 'https://static.igem.org/mediawiki/2013/a/a1/Waterloo_jama.jpg', | ||
| + | 'Chris': 'https://static.igem.org/mediawiki/2013/6/65/Waterloo_chris.JPG', | ||
| + | 'Peivand': 'https://static.igem.org/mediawiki/2013/4/41/Waterloo_peivand.jpg' | ||
| + | } | ||
| + | ); | ||
| + | // TODO | ||
| + | setupGroup('#intentToInventPhotos', {}); | ||
| + | setupGroup('#labPhotos', {}); | ||
| + | } | ||
| + | |||
| + | |||
| + | $.easing.easeOutCubic = function(x, t, b, c, d) { | ||
| + | return c*((t=t/d-1)*t*t + 1) + b; | ||
| + | }; | ||
| + | function trans(idx, complete) { | ||
| + | var new_left = - idx * PAGE_WIDTH; | ||
| + | for (var layer = 0; layer < NUM_LAYERS; layer++) { | ||
| + | var new_left_layer = new_left * layer_factors[layer] + LAYER_OFFSET; | ||
| + | $('#layer' + layer).animate({left: new_left_layer}, | ||
| + | { | ||
| + | 'duration': 1000, | ||
| + | 'easing': 'easeOutCubic', | ||
| + | 'queue': false, | ||
| + | 'complete': complete | ||
} | } | ||
| - | + | ); | |
| - | + | } | |
| - | + | page_idx = idx; | |
| - | + | } | |
| - | + | function setHash(hash) { | |
| - | + | window.location.hash = hash; | |
| - | + | } | |
| - | + | function getHash() { | |
| + | return window.location.hash; | ||
| + | } | ||
| + | function checkHash() { | ||
| + | var hash = getHash(); | ||
| + | var hash_main = hash; | ||
| + | var hash_secondary = null | ||
| + | var hash_segments = hash.split('/'); | ||
| + | if (hash_segments.length > 2) { | ||
| + | hash_main = hash_segments[0] + '/' + hash_segments[1]; | ||
| + | hash_secondary = hash_segments.slice(2).join('/'); | ||
| + | } | ||
| + | var idx = page_idx_map[hash_main]; | ||
| + | if (idx == undefined) { | ||
| + | setHash(pages[ 0 ]); // Do not remove spaces - mediaWiki will choke on it | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | // Could do scroll here, but it seems to wait for too long - should do immediately if not transitioning between pages | ||
| + | var complete_f = function() { | ||
| + | }; | ||
| + | |||
| + | // Animate page movement | ||
| + | trans(idx, complete_f); | ||
| + | // Open correct Nav Bar section | ||
| + | if (navBar) navBar.showSectionOnly(idx - 1); // TODO fix hack | ||
| - | + | // Special logo swapping for homepage | |
| + | var logo = $('#p-logo') | ||
| + | if (idx === 0) { | ||
| + | logo.addClass('hiddenElement'); | ||
| + | } else { | ||
| + | logo.removeClass('hiddenElement'); | ||
| + | } | ||
| - | + | // Reset scrolling position | |
| - | + | var page = $('#p' + idx); | |
| - | + | if (page) { | |
| - | + | var page_stuff = page.find('.pageStuff'); | |
| - | + | if (page_stuff.length == 1) { | |
| - | + | var scroll_complete = false; | |
| + | if (hash_secondary) { | ||
| + | var scroll_to_id = '#s_' + hash_segments[1] + '_' + hash_secondary.replace('/', '_'); | ||
| + | var scroll_to_element = $(scroll_to_id); | ||
| + | if (scroll_to_element.length == 1) { | ||
| + | var scroll_current = page_stuff.scrollTop(); | ||
| + | var scroll_dest_minus_current = scroll_to_element.position().top; | ||
| + | var scroll_dest = scroll_dest_minus_current + scroll_current; | ||
| + | |||
| + | //page_stuff.scrollTop(scroll_dest); | ||
| + | page_stuff.animate({scrollTop: scroll_dest}, | ||
| + | { | ||
| + | 'duration': 400, | ||
| + | 'queue': false | ||
| + | } | ||
); | ); | ||
| - | }); | + | scroll_complete = true; |
| - | $(document).keydown(function(e) { | + | } |
| - | + | } | |
| - | + | if (!scroll_complete) page_stuff.scrollTop(0); | |
| - | + | } | |
| - | + | } | |
| - | + | } | |
| - | + | $(window).bind('hashchange', function(e) { | |
| - | + | checkHash(); | |
| - | + | }); | |
| - | + | $(document).ready(function() { | |
| - | + | // Setup reverse map | |
| - | + | for (var i = 0; i < NUM_PAGES; i++) { | |
| - | + | page_idx_map[pages[i]] = i; | |
| - | + | } | |
| - | + | ||
| - | + | // Injecting new logo into header | |
| - | + | var logo = $('#p-logo') | |
| - | + | if (logo) { | |
| + | var new_logo_img = $('<img src="{0}"/>'.format(logo_url)); | ||
| + | new_logo_img.css('height', '150px'); | ||
| + | var new_logo = $('<a href="#/Home">'); | ||
| + | new_logo.append(new_logo_img); | ||
| + | logo.empty(); | ||
| + | logo.append(new_logo); | ||
| + | } | ||
| + | |||
| + | // Create NavBar | ||
| + | navBar = new NavBar(); | ||
| + | //navBar.addLink(new Link('#/Home', 'Home')); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Project', 'Project'), | ||
| + | [ | ||
| + | new Link('#/Project/Abstract', 'Abstract'), | ||
| + | new Link('#/Project/Video', 'Video'), | ||
| + | new Link('#/Project/Results', 'Results'), | ||
| + | new Link('#/Project/Future', 'Future Aspirations'), | ||
| + | new Link('#/Project/Biobricks', 'Biobricks') | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Team', 'Team'), | ||
| + | [ | ||
| + | new Link('#/Team/Administrators', 'Administrators'), | ||
| + | new Link('#/Team/LabDesign', 'Lab & Design') | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/MathModelling', 'Math & Modelling'), | ||
| + | [ | ||
| + | new Link('#/MathModelling/Switch', 'Switch Modelling'), | ||
| + | new Link('#/MathModelling/PopulationInfection', 'Population and Infection Modelling'), | ||
| + | new Link('#/MathModelling/PhageParticle', 'Phage Particle Production Modelling') | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Outreach', 'Outreach'), | ||
| + | [ | ||
| + | new Link('#/Outreach/IntentToInvent', 'Intent to Invent'), | ||
| + | new Link('#/Outreach/Vlogs', 'Vlogs') | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Gallery', 'Gallery'), | ||
| + | [ | ||
| + | new Link('#/Gallery/IntentToInvent', 'Intent to Invent'), | ||
| + | new Link('#/Gallery/Laboratory', 'Laboratory') | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Notebook', 'Notebook'), | ||
| + | [ | ||
| + | // TODO - Months | ||
| + | ] | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Safety', 'Safety') | ||
| + | ); | ||
| + | navBar.addLink( | ||
| + | new Link('#/Sponsors', 'Sponsors'), | ||
| + | [ | ||
| + | new Link('#/Sponsors/Advisors', 'Advisors'), | ||
| + | new Link('#/Sponsors/Sponsors', 'Sponsors') | ||
| + | ] | ||
| + | ); | ||
| + | var nav_bar_element = $('.navBar'); | ||
| + | nav_bar_element.append(navBar.render()); | ||
| + | nav_bar_element.append(socialButtons( | ||
| + | [ | ||
| + | new ImageLink('https://www.facebook.com/WaterlooiGEM', 'https://static.igem.org/mediawiki/2013/8/81/Waterloo_facebook_button_64.jpg'), | ||
| + | new ImageLink('http://www.youtube.com/user/WaterlooiGEM?feature=watch', 'https://static.igem.org/mediawiki/2013/8/8f/Waterloo_youtube_button_64.jpg'), | ||
| + | new ImageLink('https://twitter.com/Waterloo_iGEM', 'https://static.igem.org/mediawiki/2013/a/a9/Waterloo_twitter_button_64.jpg'), | ||
| + | ] | ||
| + | )); | ||
| + | |||
| + | setupPhotos(); | ||
| + | checkHash(); | ||
| + | }); | ||
| + | $(document).keydown(function(e) { | ||
| + | switch (e.which) { | ||
| + | case 37: // Left | ||
| + | if (page_idx == 0) { | ||
| + | setHash(pages[NUM_PAGES - 1]); | ||
| + | } else { | ||
| + | setHash(pages[page_idx - 1]); | ||
| + | } | ||
| + | break; | ||
| + | case 39: // Right | ||
| + | if (page_idx == NUM_PAGES - 1) { | ||
| + | setHash(pages[ 0 ]); // Do not remove spaces - mediaWiki will choke on it | ||
| + | } else { | ||
| + | setHash(pages[page_idx + 1]); | ||
| + | } | ||
| + | break; | ||
| + | } | ||
| + | }); | ||
| + | })(); | ||
</script> | </script> | ||
| Line 253: | Line 558: | ||
<body> | <body> | ||
| - | <div id=" | + | <div id="pageContainer"> |
| - | < | + | <!--<div id="layer2" class="layer">--> |
| - | + | <div class="navBar"></div> | |
| - | < | + | <!--</div>--> |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | < | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | + | <!--TODO need to incorporate this link somewhere <a href="https://igem.org/Team.cgi?year=2013&team_name=Waterloo">- Profile</a>--> | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | <div id="layer1" class="layer"> | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | <!-- Home --> | |
| - | + | <div id="p0" class="page"> | |
| - | + | <div class="pageStuff"> | |
| - | + | <div> | |
| - | + | <img class="largeLogo" src="https://static.igem.org/mediawiki/2013/0/08/Igem_logo.png" /> | |
| - | + | </div> | |
| - | + | </div> | |
| - | + | </div> | |
| - | + | ||
| - | + | ||
| - | + | <!-- Project --> | |
| - | + | <div id="p1" class="page"> | |
| - | </div> | + | <div class="pageStuff"> |
| - | </ | + | <h1 id="s_Project_Abstract">Abstract</h1> |
| + | <p> | ||
| + | <!-- TODO abstract --> | ||
| + | This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. | ||
| + | </p> | ||
| + | <h1 id="s_Project_Video">Video</h1> | ||
| + | <div> | ||
| + | <img src="https://static.igem.org/mediawiki/2013/e/e4/Wateroo_igem_project_video_1.gif" style="margin-left: 70px;" /> | ||
| + | </div> | ||
| + | <h1 id="s_Project_Results">Results</h1> | ||
| + | <p> | ||
| + | Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results | ||
| + | Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results | ||
| + | Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results | ||
| + | Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results. | ||
| + | </p> | ||
| + | <h1 id="s_Project_Future">Future Aspirations</h1> | ||
| + | <h1 id="s_Project_Biobricks">Biobricks</h1> | ||
| + | </div> | ||
| + | </div> | ||
| - | + | <!--Team--> | |
| - | + | <div id="p2" class="page"> | |
| - | + | <div class="pageStuff"> | |
| - | + | <h1 id="s_Team_Administrators">Administrators</h1> | |
| - | + | <div id="administratorPhotos" class="photoSection"></div> | |
| + | <h1 id="s_Team_LabDesign">Lab & Design</h1> | ||
| + | <div id="teamPhotos" class="photoSection"></div> | ||
| + | </div> | ||
| + | </div> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | + | <!--Math & Modelling--> | |
| - | + | <div id="p3" class="page"> | |
| - | </ | + | <div class="pageStuff"> |
| - | </ | + | <h1 id="s_MathModelling_Switch">Switch Modelling</h1> |
| + | <p> | ||
| + | x y z | ||
| + | </p> | ||
| + | <h1 id="s_MathModelling_PopulationInfection">Population & Infection Modelling</h1> | ||
| + | <p> | ||
| + | a b c | ||
| + | </p> | ||
| + | <h1 id="s_MathModelling_PhageParticle">Phage Particle Production Modeling</h1> | ||
| + | <p> | ||
| + | a b c | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| - | + | <!--Outreach--> | |
| - | + | <div id="p4" class="page"> | |
| - | + | <div class="pageStuff"> | |
| - | + | <h1 id="s_Outreach_IntentToInvent">Intent to Invent</h1> | |
| - | + | <p> | |
| - | + | <!-- TODO video? --> | |
| - | + | </p> | |
| - | + | <h1 id="s_Outreach_Vlogs">Vlogs</h1> | |
| - | + | </div> | |
| + | </div> | ||
| - | + | <!--Gallery--> | |
| - | + | <div id="p5" class="page"> | |
| - | </div> | + | <div class="pageStuff"> |
| - | </ | + | <h1 id="s_Gallery_IntentToInvent">Intent to Invent</h1> |
| + | <p> | ||
| + | <div id="intentToInventPhotos" class="photoSection"></div> | ||
| + | </p> | ||
| + | <h1 id="s_Gallery_Laboratory">Laboratory</h1> | ||
| + | <p> | ||
| + | <div id="labPhotos" class="photoSection"></div> | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| - | + | <!--Notebook--> | |
| - | + | <div id="p6" class="page"> | |
| - | + | <div class="pageStuff"> | |
| - | + | <div id="notebook"> | |
| - | + | <!-- TODO --> | |
| - | + | <ul> | |
| - | + | <li>March 13th, 2013: Made stocks of 6 oligos which will be annealed to make the PhiC31 attP site.</li> | |
| - | + | <li>March 18th, 2013: Inoculated strain #118 from frozen stock.</li> | |
| - | + | <li>March 19th, 2013: The cultures from yesterday did not grow. Streak out strain #118 onto regular LB and Cm + LB to check for contamination of stock. </li> | |
| - | + | <li>March 20th, 2013: There were multiple morphologies of colonies on the Cm + LB plate from yesterday therefore the frozen stock is likely contaminated.</li> | |
| - | + | <li>March 21st, 2013: Make new frozen stock of DH5-alpha carrying pSB1C3 + RFP stuffer fragment (strain #151). | |
| - | + | </li> | |
| - | + | <li>March 22nd, 2013: Maxiprep pSB1C3 from strain #151. </li> | |
| - | + | <li>March 26th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI showed a smear on the gel. </li> | |
| - | + | <li>March 27th, 2013: Restriction digest of pSB1C3 from maxi-prep showed genomic DNA contamination. We were able to gel extract pSB1C3 from the gel to separate it from genomic DNA contamination. Transform DH5-alpha with gel extracted pSB1C3. </li> | |
| - | + | <li>March 28th, 2013: Transform plate showed red colonies. Our competent cells work. </li> | |
| - | + | <li>April 1st, 2013: Inoculated strain #151. </li> | |
| - | + | <li>April 2nd, 2013: Hpdo is received as miniprep and agar stab. Streak out Hpdo on a LB + Km plate. Miniprep pSB1C3. Nanodrop received Hpdo but we got a bad concentration maybe because we do not know what buffer to blank with. The Hpdo streak plate grew. Store Hpdo streak plate in the fridge.</li> | |
| - | + | <li>April 3rd, 2013: Restriction digest of pSB1C3. Gel extract the linearized pSB1C3 cut with EcoRI and PstI. The gel extracted samples did not contain DNA so we discarded them. We are not sure what went wrong. Someone forgot to take a picture of the gel. Inoculate strain #151. </li> | |
| - | + | <li>April 4th, 2013: Miniprep pSB1C3. </li> | |
| - | + | <li>April 5th, 2013: Maxiprep Hpdo. This later turned out to be contaminated with genomic DNA. </li> | |
| - | + | <li>April 6th, 2013: Restriction digest of pSB1C3 shows genomic DNA contamination. Inoculate strain #151. </li> | |
| - | + | <li>April 7th, 2013: Miniprep pSB1C3 from strain #151.</li> | |
| - | + | <li>April 8th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI. Gel extract linearized pSB1C3. </li> | |
| - | + | <li>April 10th, 2013: Ligation of 6 oligos to form the PhiC31 attP site into pSB1C3. </li> | |
| - | + | <li>April 11th, 2013: Diagnostic gel to check linearized pSB1C3 from April 10th, 2013. No gel red added no bands observed. </li> | |
| - | + | <li>April 12th, 2013: Transformation of ligated product from April 10th, 2013. No colonies were seen. At this point we are not sure why. </li> | |
| - | + | <li>April 16th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI. Gel extract linearlized pSB1C3. </li> | |
| - | + | <li>April 17th, 2013: Diagnostic gel confirms gel extracted product from yesterday is linear and of the expected size. </li> | |
| - | + | <li>April 22nd, 2013: Ligation of 6 oligos to form the PhiC31 attP site into pSB1C3. </li> | |
| - | + | <li>April 23rd, 2013: Transformation of ligated product from April 22nd, 2013. No colonies were seen. At this point we are not sure why. </li> | |
| - | + | <li>April 24th, 2013: Transformation control using pSB1C3 confirms our competent DH5-alpha cells are still good. </li> | |
| - | + | <li>April 30th, 2013: Ligation to check ligase activity.</li> | |
| - | + | <li>April 31st, 2013: Transformation to check ligase activity. Inoculate culture of strain #152 containing Hpdo.</li> | |
| - | + | <li>May 1st, 2013: Miniprep Hpdo. Diagnostic gel confirms ligase is working correctly.</li> | |
| - | + | <li>May 6th, 2013: Making Amp + LB plates and streaking out E. coli carrying pSH62. pSH62 has the gene encoding PhiC31 integrase. </li> | |
| - | + | <li>May 7th, 2013: Streak plate from yesterday looks good, store in fridge. Inoculate cultures from that streak plate. Diagnostic gel from gel extracted samples done on April 17th, 2013 show linearized pSB1C3 even though nanodrop values are negitive. Inoculate cultures of strain #151 and streak out a fresh plate of strain #151. </li> | |
| - | + | <li>May 8th, 2013: Inoculation from streak plate of E. coli carrying pSH62 did not grow. Inoculate again from the streak plate with fresh Terrific broth. Miniprep strain #151. Inoculate strain #152. </li> | |
| - | + | <li>May 9th, 2013: Make frozen stock of DH5-alpha carrying pSH62 --> strain #153 and store in iGEM strain box 3. Miniprep strains #152 and #153. Restriction digest of pSB1C3 with EcoRI and PstI. The pSB1C3 looks good on the gel. Gel extract the samples. The nanodrop values of the gel extracted samples were bad. </li> | |
| - | + | <li>May 10th, 2013: Run a diagnostic gel with our gel extracted samples from yesterday. Though the nanodrop values are bad the linearlized backbone is clearly visible at the expected size on a diagnostic gel. To find an estimate of the concentrations we ran the gel extracted samples from yesterday on an agarose gel next to 100ng of lambda / HindIII ladder. This indicated the gel extracted samples had a concentration of ~ 5ng/uL. </li> | |
| - | + | <li>May 12th, 2013: Inoculate strains #154 and #155 containing pUC118 and pUC119. </li> | |
| - | + | <li>May 13th, 2013: Make frozen stock of strains #154 and #155. Miniprep strains #154 and #155. Amplify Hpdo minus gene VIII with KOD from maxiprep, Standford gift sample, May 1st miniprep and May 9th miniprep. </li> | |
| - | + | <li>May 14th, 2013: Gel extraction of Hpdo minus gene VIII. Run the gel extracted samples by a lambda / HindIII ladder to estimate the concentration.</li> | |
| - | + | <li>May 15th, 2013: Concentrate pSB1C3 cut with EcoRI and PstI with the speed vac. Self ligation of Hpdo minus gene VIII. Amplify PhiC31 integrase for pSH62. </li> | |
| - | + | <li>May 16th, 2013: </li> | |
| - | + | </ul> | |
| - | + | </div> | |
| - | + | </div> | |
| - | + | </div> | |
| - | + | <!--Safety--> | |
| - | + | <div id="p7" class="page"> | |
| - | </ | + | <div class="pageStuff"> |
| - | </ | + | <h1>Safety</h1> |
| + | <p> | ||
| + | This page is still in progress | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| - | + | <!--Sponsors--> | |
| - | + | <div id="p8" class="page"> | |
| - | + | <div class="pageStuff"> | |
| - | + | <h1 id="s_Sponsors_Advisors">Advisors</h1> | |
| - | + | <p> | |
| - | + | <div id="advisorPhotos" class="photoSection"></div> | |
| - | + | </p> | |
| - | + | <h1 id="s_Sponsors_Sponsors">Sponsors</h1> | |
| + | <p> | ||
| + | <div id="sponsorPhotos" class="photoSection"></div> | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
</div> | </div> | ||
| Line 453: | Line 734: | ||
</div> | </div> | ||
| - | </div> | + | </div> |
| - | <!-- Placeholder --> | + | <!-- Placeholder --> |
| - | <div class="placeHolder"> </div> | + | <div class="placeHolder"> </div> |
</body> | </body> | ||
</html> | </html> | ||
Revision as of 09:04, 22 July 2013
Abstract
This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract.
Video
Results
Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results.
Future Aspirations
Biobricks
Administrators
Lab & Design
Switch Modelling
x y z
Population & Infection Modelling
a b c
Phage Particle Production Modeling
a b c
Intent to Invent
Vlogs
Intent to Invent
Laboratory
- March 13th, 2013: Made stocks of 6 oligos which will be annealed to make the PhiC31 attP site.
- March 18th, 2013: Inoculated strain #118 from frozen stock.
- March 19th, 2013: The cultures from yesterday did not grow. Streak out strain #118 onto regular LB and Cm + LB to check for contamination of stock.
- March 20th, 2013: There were multiple morphologies of colonies on the Cm + LB plate from yesterday therefore the frozen stock is likely contaminated.
- March 21st, 2013: Make new frozen stock of DH5-alpha carrying pSB1C3 + RFP stuffer fragment (strain #151).
- March 22nd, 2013: Maxiprep pSB1C3 from strain #151.
- March 26th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI showed a smear on the gel.
- March 27th, 2013: Restriction digest of pSB1C3 from maxi-prep showed genomic DNA contamination. We were able to gel extract pSB1C3 from the gel to separate it from genomic DNA contamination. Transform DH5-alpha with gel extracted pSB1C3.
- March 28th, 2013: Transform plate showed red colonies. Our competent cells work.
- April 1st, 2013: Inoculated strain #151.
- April 2nd, 2013: Hpdo is received as miniprep and agar stab. Streak out Hpdo on a LB + Km plate. Miniprep pSB1C3. Nanodrop received Hpdo but we got a bad concentration maybe because we do not know what buffer to blank with. The Hpdo streak plate grew. Store Hpdo streak plate in the fridge.
- April 3rd, 2013: Restriction digest of pSB1C3. Gel extract the linearized pSB1C3 cut with EcoRI and PstI. The gel extracted samples did not contain DNA so we discarded them. We are not sure what went wrong. Someone forgot to take a picture of the gel. Inoculate strain #151.
- April 4th, 2013: Miniprep pSB1C3.
- April 5th, 2013: Maxiprep Hpdo. This later turned out to be contaminated with genomic DNA.
- April 6th, 2013: Restriction digest of pSB1C3 shows genomic DNA contamination. Inoculate strain #151.
- April 7th, 2013: Miniprep pSB1C3 from strain #151.
- April 8th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI. Gel extract linearized pSB1C3.
- April 10th, 2013: Ligation of 6 oligos to form the PhiC31 attP site into pSB1C3.
- April 11th, 2013: Diagnostic gel to check linearized pSB1C3 from April 10th, 2013. No gel red added no bands observed.
- April 12th, 2013: Transformation of ligated product from April 10th, 2013. No colonies were seen. At this point we are not sure why.
- April 16th, 2013: Restriction digest of pSB1C3 with EcoRI and PstI. Gel extract linearlized pSB1C3.
- April 17th, 2013: Diagnostic gel confirms gel extracted product from yesterday is linear and of the expected size.
- April 22nd, 2013: Ligation of 6 oligos to form the PhiC31 attP site into pSB1C3.
- April 23rd, 2013: Transformation of ligated product from April 22nd, 2013. No colonies were seen. At this point we are not sure why.
- April 24th, 2013: Transformation control using pSB1C3 confirms our competent DH5-alpha cells are still good.
- April 30th, 2013: Ligation to check ligase activity.
- April 31st, 2013: Transformation to check ligase activity. Inoculate culture of strain #152 containing Hpdo.
- May 1st, 2013: Miniprep Hpdo. Diagnostic gel confirms ligase is working correctly.
- May 6th, 2013: Making Amp + LB plates and streaking out E. coli carrying pSH62. pSH62 has the gene encoding PhiC31 integrase.
- May 7th, 2013: Streak plate from yesterday looks good, store in fridge. Inoculate cultures from that streak plate. Diagnostic gel from gel extracted samples done on April 17th, 2013 show linearized pSB1C3 even though nanodrop values are negitive. Inoculate cultures of strain #151 and streak out a fresh plate of strain #151.
- May 8th, 2013: Inoculation from streak plate of E. coli carrying pSH62 did not grow. Inoculate again from the streak plate with fresh Terrific broth. Miniprep strain #151. Inoculate strain #152.
- May 9th, 2013: Make frozen stock of DH5-alpha carrying pSH62 --> strain #153 and store in iGEM strain box 3. Miniprep strains #152 and #153. Restriction digest of pSB1C3 with EcoRI and PstI. The pSB1C3 looks good on the gel. Gel extract the samples. The nanodrop values of the gel extracted samples were bad.
- May 10th, 2013: Run a diagnostic gel with our gel extracted samples from yesterday. Though the nanodrop values are bad the linearlized backbone is clearly visible at the expected size on a diagnostic gel. To find an estimate of the concentrations we ran the gel extracted samples from yesterday on an agarose gel next to 100ng of lambda / HindIII ladder. This indicated the gel extracted samples had a concentration of ~ 5ng/uL.
- May 12th, 2013: Inoculate strains #154 and #155 containing pUC118 and pUC119.
- May 13th, 2013: Make frozen stock of strains #154 and #155. Miniprep strains #154 and #155. Amplify Hpdo minus gene VIII with KOD from maxiprep, Standford gift sample, May 1st miniprep and May 9th miniprep.
- May 14th, 2013: Gel extraction of Hpdo minus gene VIII. Run the gel extracted samples by a lambda / HindIII ladder to estimate the concentration.
- May 15th, 2013: Concentrate pSB1C3 cut with EcoRI and PstI with the speed vac. Self ligation of Hpdo minus gene VIII. Amplify PhiC31 integrase for pSH62.
- May 16th, 2013:
Safety
This page is still in progress
Advisors
Sponsors
