Team:Waterloo

From 2013.igem.org

(Difference between revisions)
(Description popups when clicking people images.)
(Fix ability to display popups more than once.)
Line 71: Line 71:
       .layer {
       .layer {
         position: absolute;
         position: absolute;
-
         height: 600px;
+
         height: 800px;
         width: 18000px;
         width: 18000px;
       }
       }
Line 91: Line 91:
       }
       }
       .page {
       .page {
-
         height: 600px;
+
         height: 800px;
         width: 1905px;
         width: 1905px;
         float: left;
         float: left;
Line 102: Line 102:
       .pageStuff {
       .pageStuff {
         color: white;
         color: white;
-
         width: 900px;
+
         width: 685px;
-
         height: 585px;
+
         height: 750px;
-
         margin-left: 500px;
+
         margin-left: 745px;
         padding-top: 15px;
         padding-top: 15px;
       }
       }
Line 119: Line 119:
       }
       }
       .navBar {
       .navBar {
-
         width: 975px;
+
         z-index: 20;
-
        height: 75px;
+
         position: absolute;
-
        margin-left: -5px;
+
         width: 225px;
-
         color: white;
+
         height: 730px;
-
 
+
         /*left: 465px;*/
-
         /* http://www.colorzilla.com/gradient-editor/#5abfce+0,0ba5bc+100;Custom */
+
         padding: 10px 20px 10px 20px;
-
         background: rgb(90,191,206); /* Old browsers */
+
-
         background: -moz-linear-gradient(45deg,  rgba(90,191,206,1) 0%, rgba(11,165,188,1) 100%); /* FF3.6+ */
+
-
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(90,191,206,1)), color-stop(100%,rgba(11,165,188,1))); /* Chrome,Safari4+ */
+
-
        background: -webkit-linear-gradient(45deg,  rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* Chrome10+,Safari5.1+ */
+
-
        background: -o-linear-gradient(45deg,  rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* Opera 11.10+ */
+
-
        background: -ms-linear-gradient(45deg,  rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* IE10+ */
+
-
        background: linear-gradient(45deg,  rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* W3C */
+
-
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5abfce', endColorstr='#0ba5bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
-
 
+
-
      }
+
-
      .footer {
+
-
        width: 975px;
+
-
        height: 65px;
+
-
        margin-left: -5px;
+
-
         padding: 5px 0;
+
         color: white;
         color: white;
Line 179: Line 164:
       }
       }
       .placeHolder {
       .placeHolder {
-
         height: 600px;
+
         height: 800px;
       }
       }
       .largeLogo {
       .largeLogo {
         width: 575px;
         width: 575px;
-
         margin: 150px 0 0 155px;
+
         margin: 150px 0 0 50px;
       }
       }
       .pageLinks {
       .pageLinks {
-
         /*margin: 30px 0 10px 0;*/
+
         margin: 30px 0 10px 0;
       }
       }
Line 246: Line 231:
       }
       }
 +
      .shownSublinks {
 +
      }
 +
      .hiddenSublinks {
 +
      }
       .link {
       .link {
         font-size: 24px;
         font-size: 24px;
         line-height: 25px;
         line-height: 25px;
-
        max-width: 150px;
 
-
        margin: 0 10px;
 
-
        float: left;
 
-
      }
 
-
      .selectedLink a {
 
-
        color: yellow;
 
-
      }
 
-
      .hoverMenu {
 
-
        padding: 5px;
 
-
        position: absolute;
 
-
        background-color: blue;
 
-
        border-radius: 2px;
 
-
        z-index: 15;
 
       }
       }
       .sublink {
       .sublink {
-
         margin: 0 0 14px 0;
+
         margin: 0 0 14px 20px;
         font-size: 20px;
         font-size: 20px;
         line-height: 23px;
         line-height: 23px;
 +
      }
 +
      /* TODO animate resizing this */
 +
      .hiddenSublinks .sublink {
 +
        display: none;
       }
       }
       .socialButtons {
       .socialButtons {
-
         margin-left: 65px;
+
         position: absolute;
 +
        top: 590px
       }
       }
       #bodyContent .socialButtons a {
       #bodyContent .socialButtons a {
Line 319: Line 300:
         width: 500px;
         width: 500px;
         position: absolute;
         position: absolute;
-
         left: 440px;
+
         left: 545px;
         top: 300px;
         top: 300px;
       }
       }
Line 420: Line 401:
     this.links = [];
     this.links = [];
     this.sublinks = [];
     this.sublinks = [];
-
     this.linkElements = [];
+
     this.linkWrappers = [];
-
    this.hoverMenus = [];
+
     this.focus = 0;
-
     this.focus = null;
+
-
    this.shownHoverMenu = null;
+
   }
   }
   NavBar.prototype.addLink = function(link, sublinks) {
   NavBar.prototype.addLink = function(link, sublinks) {
Line 432: Line 411:
     this.sublinks.push(sublinks);
     this.sublinks.push(sublinks);
   };
   };
-
   NavBar.prototype.sectionSelected = function(section_idx) {
+
   NavBar.prototype.showSectionOnly = function(section_idx) {
-
     if (this.focus !== null) {
+
     for (var i = 0; i < this.linkWrappers.length; i++) {
-
       this.linkElements[this.focus].removeClass('selectedLink');
+
       var wrapper = this.linkWrappers[i];
-
    }
+
      if (i === section_idx) {
-
    if (section_idx >= 0) { // Why do they html-escape &&
+
         wrapper.removeClass('hiddenSublinks');
-
      if (section_idx < this.linkElements.length) {
+
         wrapper.addClass('shownSublinks');
-
         this.focus = section_idx;
+
-
         this.linkElements[this.focus].addClass('selectedLink');
+
       } else {
       } else {
-
         this.focus = null;
+
         wrapper.removeClass('shownSublinks');
 +
        wrapper.addClass('hiddenSublinks');
       }
       }
-
    } else {
 
-
      this.focus = null;
 
     }
     }
-
  };
 
-
  NavBar.prototype.showHoverMenu = function(idx) {
 
-
    this.hideHoverMenu();
 
-
 
-
    var hover_menu = this.hoverMenus[idx];
 
-
    if (hover_menu == null) {
 
-
      return;
 
-
    }
 
-
    var link = this.linkElements[idx];
 
-
    hover_menu.css('top', link.position().top + link.height() + 'px');
 
-
    hover_menu.css('left', link.position().left);
 
-
    hover_menu.removeClass('hiddenElement');
 
-
    this.shownHoverMenu = idx;
 
-
  };
 
-
  NavBar.prototype.hideHoverMenu = function() {
 
-
    if (this.shownHoverMenu === null) {
 
-
      return;
 
-
    }
 
-
    var hover_menu = this.hoverMenus[this.shownHoverMenu];
 
-
    if (hover_menu != null) {
 
-
      hover_menu.addClass('hiddenElement');
 
-
    }
 
-
    this.shownHoverMenu = null;
 
   };
   };
   NavBar.prototype.render = function() {
   NavBar.prototype.render = function() {
-
     var page_links = $('<div class="pageLinks" />');
+
     var page_links = $('<ul class="pageLinks" />');
     for (var i = 0; i < this.links.length; i++) {
     for (var i = 0; i < this.links.length; i++) {
-
       var link_name_lines = this.links[i].text.split(' ');
+
       var link_wrapper = $('<li class="hiddenSublinks"/>');
-
      var link_name_string = '';
+
-
      for (var link_name_i = 0; link_name_i < link_name_lines.length; link_name_i++) {
+
-
        link_name_string += '<div>{0}</div>'.format(link_name_lines[link_name_i]);
+
-
      }
+
       var link_string = '<div class="link"><a href="{0}">{1}</a></div>';
       var link_string = '<div class="link"><a href="{0}">{1}</a></div>';
-
       var link = $(link_string.format(this.links[i].link, link_name_string));
+
       var link = $(link_string.format(this.links[i].link, this.links[i].text));
-
       var hover_menu = $('<div class="hoverMenu hiddenElement"></div>');
+
       link_wrapper.append(link);
       var sublinks = this.sublinks[i];
       var sublinks = this.sublinks[i];
Line 486: Line 435:
         var sublink_string = '<div class="sublink"><a href="{0}">{1}</a></div>';
         var sublink_string = '<div class="sublink"><a href="{0}">{1}</a></div>';
         var sublink = $(sublink_string.format(sublinks[j].link, sublinks[j].text));
         var sublink = $(sublink_string.format(sublinks[j].link, sublinks[j].text));
-
         hover_menu.append(sublink);
+
         link_wrapper.append(sublink);
-
      }
+
-
      link.click(this.sectionSelected.bind(this, i));
+
-
      link.hover(
+
-
        this.showHoverMenu.bind(this, i)
+
-
        //this.hideHoverMenu.bind(this, i)
+
-
      );
+
-
      this.linkElements.push(link);
+
-
      if (this.sublinks[i].length > 0) {
 
-
        hover_menu.hover(null, this.hideHoverMenu.bind(this)); // Hide on blur.
 
-
        this.hoverMenus.push(hover_menu);
 
-
      } else {
 
-
        this.hoverMenus.push(null); // Don't show blank menu.
 
       }
       }
-
       page_links.append(link);
+
       link.click(this.showSectionOnly.bind(this, i));
-
       page_links.append(hover_menu);
+
      this.linkWrappers.push(link_wrapper);
 +
       page_links.append(link_wrapper);
     }
     }
     return page_links;
     return page_links;
Line 574: Line 512:
     var nav_bar_element = $('.navBar');
     var nav_bar_element = $('.navBar');
     nav_bar_element.append(navBar.render());
     nav_bar_element.append(navBar.render());
-
     nav_bar_element.append($('<div class="clearFix"></div>'));
+
     nav_bar_element.append(socialButtons(
-
 
+
-
    var footer = $('.footer');
+
-
    footer.append(socialButtons(
+
       [
       [
         new ImageLink('https://www.facebook.com/WaterlooiGEM', 'https://static.igem.org/mediawiki/2013/8/81/Waterloo_facebook_button_64.jpg'),
         new ImageLink('https://www.facebook.com/WaterlooiGEM', 'https://static.igem.org/mediawiki/2013/8/81/Waterloo_facebook_button_64.jpg'),
Line 658: Line 593:
   PersonClickableElement.hidePopup = function() {
   PersonClickableElement.hidePopup = function() {
     if (PersonClickableElement.currentPopup) {
     if (PersonClickableElement.currentPopup) {
-
       PersonClickableElement.currentPopup.remove();
+
       PersonClickableElement.currentPopup.detach();
       PersonClickableElement.currentPopup = null;
       PersonClickableElement.currentPopup = null;
     }
     }
Line 664: Line 599:
   PersonClickableElement.prototype.showPopup = function(event) {
   PersonClickableElement.prototype.showPopup = function(event) {
     PersonClickableElement.hidePopup();
     PersonClickableElement.hidePopup();
 +
    event.stopPropagation();
 +
     if (!this.popup) {
     if (!this.popup) {
       var root = $('<div class="personPopup fadeIn"></div>');
       var root = $('<div class="personPopup fadeIn"></div>');
Line 671: Line 608:
       root.append(info);
       root.append(info);
       this.popup = root;
       this.popup = root;
-
       event.stopPropagation();
+
       this.popup.click(function (e) {
 +
        e.stopPropagation();
 +
      });
     }
     }
-
    // For some reason the old click handler is destroyed when this is hidden. Create each time.
 
-
    this.popup.click(function (e) {
 
-
      e.stopPropagation();
 
-
    });
 
     $(document.body).append(this.popup);
     $(document.body).append(this.popup);
     PersonClickableElement.currentPopup = this.popup;
     PersonClickableElement.currentPopup = this.popup;
Line 870: Line 805:
     $('#humanPracticesTeamPhotos').append(createPersonPhotoGrid(math_team, 4, 150));
     $('#humanPracticesTeamPhotos').append(createPersonPhotoGrid(math_team, 4, 150));
-
     $('#mathModellingTeamPhotos').append(createPersonPhotoGrid(hp_team, 5, 150));
+
     $('#mathModellingTeamPhotos').append(createPersonPhotoGrid(hp_team, 3, 150));
-
     $('#advisorPhotos').append(createPersonPhotoGrid(advisors, 5, 150));
+
     $('#advisorPhotos').append(createPersonPhotoGrid(advisors, 3, 150));
     $('#gradStudentPhotos').append(createPersonPhotoGrid(grad_students, 2, 150));
     $('#gradStudentPhotos').append(createPersonPhotoGrid(grad_students, 2, 150));
Line 1,013: Line 948:
     trans(idx, complete_f);
     trans(idx, complete_f);
     // Open correct Nav Bar section  
     // Open correct Nav Bar section  
-
     if (navBar) navBar.sectionSelected(idx - 1); // TODO fix hack
+
     if (navBar) navBar.showSectionOnly(idx - 1); // TODO fix hack
     // Special logo swapping for homepage
     // Special logo swapping for homepage
Line 1,305: Line 1,240:
   <!-- Placeholder  -->
   <!-- Placeholder  -->
   <div class="placeHolder">&nbsp;</div>
   <div class="placeHolder">&nbsp;</div>
-
 
-
  <div class="footer"></div>
 
</body>
</body>
</html>
</html>

Revision as of 22:54, 4 September 2013

Abstract

Due to its nature as an information-encoding molecule, the use of DNA as an intercellular messaging molecule would enable more information-rich communication between populations of cells than traditional AHL-based messaging. The first demonstration of DNA messaging was published by the Endy group at Stanford University in late 2012, wherein DNA encoding instructions for expression of fluorescence and antibiotic resistance were transmitted from one bacterial population to another, carried by M13 bacteriophage particles.

Incorporation of well-established in vivo DNA modification techniques into DNA messaging will diversify and extend potential intercellular communication programs, and will enable the integration of recent developments in DNA digital logic with DNA messaging.

The goal of our project is to place on a DNA message a switch that can be flipped in receiver cells under inducible conditions, and whose state determines whether or not the DNA message is retransmitted from receiver cells to a population of secondary receiver cells. The switch consists of a promoter that can be inverted using a serine integrase, leading to transcription of different genes. It is directly inspired by the recombinase addressable data (RAD) module published by the Endy group in early 2012.

We have synthesized four such DNA switches and will soon test the ability of PhiC31 and Bxb1 serine integrases, along with the respective recombination directionality factors (RDFs), to control their states. We have also produced constructs that we will use to attempt to control the production of M13 viral particles containing a DNA message and we will test these soon. We will integrate these efforts to demonstrate our goal of incorporating digital DNA logic into DNA messaging. Through this work, we will broaden the horizons of engineered intercellular communication.

Design

Ottawa's Collaboration

Video

Results

Future Aspirations

BioBricks

  • Hpdo with no gene 8
  • Bxb1 rdf
  • Bxb1 int
  • Bxb1 switch
  • BXB1 switch flipped
  • ΦC31 rdf
  • ΦC31 int
  • ΦC31 switch
  • ΦC31 switch flipped

Switch Modelling

x y z

Population & Infection Modelling

a b c

Phage Particle Production Modelling

a b c

Intent to Invent

Vlogs

Special Project

Intent to Invent

Laboratory

Safety

This page is still in progress

Sponsors

Administrators

Lab & Design

M13 Group

BxB1 Group

Φ C31 Group

Human Practices

Mathematical Modelling

Advisors

Graduate Student Advisors

 

Retrieved from "http://2013.igem.org/Team:Waterloo"