Team:SUSTC-Shenzhen-B/lab introduction

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<meta charset="utf-8" />
+
  <meta charset="utf-8" />
-
<meta name="description" content="" />
+
  <meta name="description" content="" />
-
<meta name="author" content="tengattack" />
+
  <meta name="author" content="tengattack" />
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Title</title>
+
  <title>Title</title>
<style type="text/css">
<style type="text/css">
Line 58: Line 58:
  *
  *
  * Dual licensed under the MIT and GPL licenses:
  * Dual licensed under the MIT and GPL licenses:
-
  * http://www.opensource.org/licenses/mit-license.php
+
  * http://www.opensource.org/licenses/mit-license.php
-
  * http://www.gnu.org/licenses/gpl.html
+
  * http://www.gnu.org/licenses/gpl.html
  *
  *
  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
Line 65: Line 65:
;(function($){
;(function($){
-
$.fn.superfish = function(op){
+
  $.fn.superfish = function(op){
-
var sf = $.fn.superfish,
+
    var sf = $.fn.superfish,
-
c = sf.c,
+
      c = sf.c,
-
$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
+
      $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
-
over = function(){
+
      over = function(){
-
var $$ = $(this), menu = getMenu($$);
+
        var $$ = $(this), menu = getMenu($$);
-
clearTimeout(menu.sfTimer);
+
        clearTimeout(menu.sfTimer);
-
$$.showSuperfishUl().siblings().hideSuperfishUl();
+
        $$.showSuperfishUl().siblings().hideSuperfishUl();
-
},
+
      },
-
out = function(){
+
      out = function(){
-
var $$ = $(this), menu = getMenu($$), o = sf.op;
+
        var $$ = $(this), menu = getMenu($$), o = sf.op;
-
clearTimeout(menu.sfTimer);
+
        clearTimeout(menu.sfTimer);
-
menu.sfTimer=setTimeout(function(){
+
        menu.sfTimer=setTimeout(function(){
-
o.retainPath=($.inArray($$[0],o.$path)>-1);
+
          o.retainPath=($.inArray($$[0],o.$path)>-1);
-
$$.hideSuperfishUl();
+
          $$.hideSuperfishUl();
-
//if (o.$path.length &amp;&amp; $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+
          //if (o.$path.length &amp;&amp; $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
-
if (o.$path.length) {
+
          if (o.$path.length) {
-
if ($$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+
            if ($$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
-
}
+
          }
-
},o.delay);
+
        },o.delay);  
-
},
+
      },
-
getMenu = function($menu){
+
      getMenu = function($menu){
-
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
+
        var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
-
sf.op = sf.o[menu.serial];
+
        sf.op = sf.o[menu.serial];
-
return menu;
+
        return menu;
-
},
+
      },
-
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
+
      addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
-
+
     
-
return this.each(function() {
+
    return this.each(function() {
-
var s = this.serial = sf.o.length;
+
      var s = this.serial = sf.o.length;
-
var o = $.extend({},sf.defaults,op);
+
      var o = $.extend({},sf.defaults,op);
-
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
+
      o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
-
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
+
        $(this).addClass([o.hoverClass,c.bcClass].join(' '))
-
.filter('li:has(ul)').removeClass(o.pathClass);
+
          .filter('li:has(ul)').removeClass(o.pathClass);
-
});
+
      });
-
sf.o[s] = sf.op = o;
+
      sf.o[s] = sf.op = o;
-
var bcheck = false;
+
      var bcheck = false;
-
if ($.fn.hoverIntent) {
+
      if ($.fn.hoverIntent) {
-
if (!o.disableHI) bcheck = true;
+
        if (!o.disableHI) bcheck = true;
-
}
+
      }
-
$('li:has(ul)',this)[(bcheck) ? 'hoverIntent' : 'hover'](over,out).each(function() {
+
      $('li:has(ul)',this)[(bcheck) ? 'hoverIntent' : 'hover'](over,out).each(function() {
-
if (o.autoArrows) addArrow( $('>a:first-child',this) );
+
        if (o.autoArrows) addArrow( $('>a:first-child',this) );
-
})
+
      })
-
.not('.'+c.bcClass)
+
      .not('.'+c.bcClass)
-
.hideSuperfishUl();
+
        .hideSuperfishUl();
-
+
     
-
var $a = $('a',this);
+
      var $a = $('a',this);
-
$a.each(function(i){
+
      $a.each(function(i){
-
var $li = $a.eq(i).parents('li');
+
        var $li = $a.eq(i).parents('li');
-
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
+
        $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
-
});
+
      });
-
o.onInit.call(this);
+
      o.onInit.call(this);
-
+
     
-
}).each(function() {
+
    }).each(function() {
-
var menuClasses = [c.menuClass];
+
      var menuClasses = [c.menuClass];
-
//if (sf.op.dropShadows  &amp;&amp; !($.browser.msie &amp;&amp; $.browser.version < 7)) menuClasses.push(c.shadowClass);
+
      //if (sf.op.dropShadows  &amp;&amp; !($.browser.msie &amp;&amp; $.browser.version < 7)) menuClasses.push(c.shadowClass);
-
if (sf.op.dropShadows) if (!$.browser.msie) if (!($.browser.version < 7)) menuClasses.push(c.shadowClass);
+
      if (sf.op.dropShadows) if (!$.browser.msie) if (!($.browser.version < 7)) menuClasses.push(c.shadowClass);
-
$(this).addClass(menuClasses.join(' '));
+
      $(this).addClass(menuClasses.join(' '));
-
});
+
    });
-
};
+
  };
-
var sf = $.fn.superfish;
+
  var sf = $.fn.superfish;
-
sf.o = [];
+
  sf.o = [];
-
sf.op = {};
+
  sf.op = {};
-
sf.IE7fix = function(){
+
  sf.IE7fix = function(){
-
var o = sf.op;
+
    var o = sf.op;
-
//if ($.browser.msie &amp;&amp; $.browser.version > 6 &amp;&amp; o.dropShadows &amp;&amp; o.animation.opacity!=undefined)
+
    //if ($.browser.msie &amp;&amp; $.browser.version > 6 &amp;&amp; o.dropShadows &amp;&amp; o.animation.opacity!=undefined)
-
if ($.browser.msie) if($.browser.version > 6) if (o.dropShadows) if (o.animation.opacity!=undefined)
+
    if ($.browser.msie) if($.browser.version > 6) if (o.dropShadows) if (o.animation.opacity!=undefined)
-
this.toggleClass(sf.c.shadowClass+'-off');
+
      this.toggleClass(sf.c.shadowClass+'-off');
-
};
+
    };
-
sf.c = {
+
  sf.c = {
-
bcClass    : 'sf-breadcrumb',
+
    bcClass    : 'sf-breadcrumb',
-
menuClass  : 'sf-js-enabled',
+
    menuClass  : 'sf-js-enabled',
-
anchorClass : 'sf-with-ul',
+
    anchorClass : 'sf-with-ul',
-
arrowClass  : 'sf-sub-indicator',
+
    arrowClass  : 'sf-sub-indicator',
-
shadowClass : 'sf-shadow'
+
    shadowClass : 'sf-shadow'
-
};
+
  };
-
sf.defaults = {
+
  sf.defaults = {
-
hoverClass : 'sfHover',
+
    hoverClass : 'sfHover',
-
pathClass : 'overideThisToUse',
+
    pathClass : 'overideThisToUse',
-
pathLevels : 1,
+
    pathLevels : 1,
-
delay : 800,
+
    delay   : 800,
-
animation : {opacity:'show'},
+
    animation : {opacity:'show'},
-
speed : 'normal',
+
    speed   : 'normal',
-
autoArrows : true,
+
    autoArrows : true,
-
dropShadows : true,
+
    dropShadows : true,
-
disableHI : false, // true disables hoverIntent detection
+
    disableHI : false,   // true disables hoverIntent detection
-
onInit : function(){}, // callback functions
+
    onInit   : function(){}, // callback functions
-
onBeforeShow: function(){},
+
    onBeforeShow: function(){},
-
onShow : function(){},
+
    onShow   : function(){},
-
onHide : function(){}
+
    onHide   : function(){}
-
};
+
  };
-
$.fn.extend({
+
  $.fn.extend({
-
hideSuperfishUl : function(){
+
    hideSuperfishUl : function(){
-
var o = sf.op,
+
      var o = sf.op,
-
not = (o.retainPath===true) ? o.$path : '';
+
        not = (o.retainPath===true) ? o.$path : '';
-
o.retainPath = false;
+
      o.retainPath = false;
-
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
+
      var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
-
.find('>ul').hide().css('visibility','hidden');
+
          .find('>ul').hide().css('visibility','hidden');
-
o.onHide.call($ul);
+
      o.onHide.call($ul);
-
return this;
+
      return this;
-
},
+
    },
-
showSuperfishUl : function(){
+
    showSuperfishUl : function(){
-
var o = sf.op,
+
      var o = sf.op,
-
sh = sf.c.shadowClass+'-off',
+
        sh = sf.c.shadowClass+'-off',
-
$ul = this.addClass(o.hoverClass)
+
        $ul = this.addClass(o.hoverClass)
-
.find('>ul:hidden').css('visibility','visible');
+
          .find('>ul:hidden').css('visibility','visible');
-
sf.IE7fix.call($ul);
+
      sf.IE7fix.call($ul);
-
o.onBeforeShow.call($ul);
+
      o.onBeforeShow.call($ul);
-
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
+
      $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
-
return this;
+
      return this;
-
}
+
    }
-
});
+
  });
})(jQuery);
})(jQuery);
Line 188: Line 188:
  *
  *
  * Dual licensed under the MIT and GPL licenses:
  * Dual licensed under the MIT and GPL licenses:
-
  * http://www.opensource.org/licenses/mit-license.php
+
  * http://www.opensource.org/licenses/mit-license.php
-
  * http://www.gnu.org/licenses/gpl.html
+
  * http://www.gnu.org/licenses/gpl.html
  *
  *
  *
  *
Line 200: Line 200:
(function($){ // $ will refer to jQuery within this closure
(function($){ // $ will refer to jQuery within this closure
-
$.fn.supersubs = function(options){
+
  $.fn.supersubs = function(options){
-
var opts = $.extend({}, $.fn.supersubs.defaults, options);
+
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
-
// return original object to support chaining
+
    // return original object to support chaining
-
return this.each(function() {
+
    return this.each(function() {
-
// cache selections
+
      // cache selections
-
var $$ = $(this);
+
      var $$ = $(this);
-
// support metadata
+
      // support metadata
-
var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
+
      var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
-
// get the font size of menu.
+
      // get the font size of menu.
-
// .css('fontSize') returns various results cross-browser, so measure an em dash instead
+
      // .css('fontSize') returns various results cross-browser, so measure an em dash instead
-
var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
+
      var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
-
'padding' : 0,
+
        'padding' : 0,
-
'position' : 'absolute',
+
        'position' : 'absolute',
-
'top' : '-999em',
+
        'top' : '-999em',
-
'width' : 'auto'
+
        'width' : 'auto'
-
}).appendTo($$).width(); //clientWidth is faster, but was incorrect here
+
      }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
-
// remove em dash
+
      // remove em dash
-
$('#menu-fontsize').remove();
+
      $('#menu-fontsize').remove();
-
// cache all ul elements
+
      // cache all ul elements
-
$ULs = $$.find('ul');
+
      $ULs = $$.find('ul');
-
// loop through each ul in menu
+
      // loop through each ul in menu
-
$ULs.each(function(i) {
+
      $ULs.each(function(i) {  
-
// cache this ul
+
        // cache this ul
-
var $ul = $ULs.eq(i);
+
        var $ul = $ULs.eq(i);
-
// get all (li) children of this ul
+
        // get all (li) children of this ul
-
var $LIs = $ul.children();
+
        var $LIs = $ul.children();
-
// get all anchor grand-children
+
        // get all anchor grand-children
-
var $As = $LIs.children('a');
+
        var $As = $LIs.children('a');
-
// force content to one line and save current float property
+
        // force content to one line and save current float property
-
var liFloat = $LIs.css('white-space','nowrap').css('float');
+
        var liFloat = $LIs.css('white-space','nowrap').css('float');
-
// remove width restrictions and floats so elements remain vertically stacked
+
        // remove width restrictions and floats so elements remain vertically stacked
-
var emWidth = $ul.add($LIs).add($As).css({
+
        var emWidth = $ul.add($LIs).add($As).css({
-
'float' : 'none',
+
          'float' : 'none',
-
'width' : 'auto'
+
          'width' : 'auto'
-
})
+
        })
-
// this ul will now be shrink-wrapped to longest li due to position:absolute
+
        // this ul will now be shrink-wrapped to longest li due to position:absolute
-
// so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
+
        // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
-
.end().end()[0].clientWidth / fontsize;
+
        .end().end()[0].clientWidth / fontsize;
-
// add more width to ensure lines don't turn over at certain sizes in various browsers
+
        // add more width to ensure lines don't turn over at certain sizes in various browsers
-
emWidth += o.extraWidth;
+
        emWidth += o.extraWidth;
-
// restrict to at least minWidth and at most maxWidth
+
        // restrict to at least minWidth and at most maxWidth
-
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; }
+
        if (emWidth > o.maxWidth)   { emWidth = o.maxWidth; }
-
else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
+
        else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
-
emWidth += 'em';
+
        emWidth += 'em';
-
// set ul to width in ems
+
        // set ul to width in ems
-
$ul.css('width',emWidth);
+
        $ul.css('width',emWidth);
-
// restore li floats to avoid IE bugs
+
        // restore li floats to avoid IE bugs
-
// set li width to full width of this ul
+
        // set li width to full width of this ul
-
// revert white-space to normal
+
        // revert white-space to normal
-
$LIs.css({
+
        $LIs.css({
-
'float' : liFloat,
+
          'float' : liFloat,
-
'width' : '100%',
+
          'width' : '100%',
-
'white-space' : 'normal'
+
          'white-space' : 'normal'
-
})
+
        })
-
// update offset position of descendant ul to reflect new width of parent
+
        // update offset position of descendant ul to reflect new width of parent
-
.each(function(){
+
        .each(function(){
-
var $childUl = $('>ul',this);
+
          var $childUl = $('>ul',this);
-
var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
+
          var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
-
$childUl.css(offsetDirection,emWidth);
+
          $childUl.css(offsetDirection,emWidth);
-
});
+
        });
-
});
+
      });
-
+
     
-
});
+
    });
-
};
+
  };
-
// expose defaults
+
  // expose defaults
-
$.fn.supersubs.defaults = {
+
  $.fn.supersubs.defaults = {
-
minWidth : 9, // requires em unit.
+
    minWidth   : 9,   // requires em unit.
-
maxWidth : 25, // requires em unit.
+
    maxWidth   : 25,   // requires em unit.
-
extraWidth : 0 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
+
    extraWidth   : 0     // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
-
};
+
  };
-
+
 
})(jQuery); // plugin code ends
})(jQuery); // plugin code ends
Line 277: Line 277:
// custom.js
// custom.js
jQuery(document).ready(function(){
jQuery(document).ready(function(){
-
+
 
-
//Add Class Js to html
+
  //Add Class Js to html
-
jQuery('html').addClass('js');
+
  jQuery('html').addClass('js');
-
+
               
     //=================================== MENU ===================================//
     //=================================== MENU ===================================//
     jQuery("ul.sf-menu").supersubs({  
     jQuery("ul.sf-menu").supersubs({  
-
minWidth : 12, // requires em unit.
+
  minWidth   : 12,   // requires em unit.
-
maxWidth : 17, // requires em unit.
+
  maxWidth   : 17,   // requires em unit.
-
extraWidth : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
+
  extraWidth   : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
                           // due to slight rounding differences and font-family  
                           // due to slight rounding differences and font-family  
     }).superfish();  // call supersubs first, then superfish, so that subs are  
     }).superfish();  // call supersubs first, then superfish, so that subs are  
                     // not display:none when measuring. Call before initialising  
                     // not display:none when measuring. Call before initialising  
                     // containing tabs for same reason.
                     // containing tabs for same reason.
-
+
 
-
//=================================== TABS AND TOGGLE ===================================//
+
  //=================================== TABS AND TOGGLE ===================================//
-
//jQuery tab
+
  //jQuery tab
-
jQuery(".tab-content").hide(); //Hide all content
+
  jQuery(".tab-content").hide(); //Hide all content
-
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
+
  jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
-
jQuery(".tab-content:first").show(); //Show first tab content
+
  jQuery(".tab-content:first").show(); //Show first tab content
-
//On Click Event
+
  //On Click Event
-
jQuery("ul.tabs li").click(function() {
+
  jQuery("ul.tabs li").click(function() {
-
jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
+
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
-
jQuery(this).addClass("active"); //Add "active" class to selected tab
+
    jQuery(this).addClass("active"); //Add "active" class to selected tab
-
jQuery(".tab-content").hide(); //Hide all tab content
+
    jQuery(".tab-content").hide(); //Hide all tab content
-
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
+
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
-
jQuery(activeTab).fadeIn(200); //Fade in the active content
+
    jQuery(activeTab).fadeIn(200); //Fade in the active content
-
return false;
+
    return false;
-
});
+
  });
-
+
 
-
//jQuery toggle
+
  //jQuery toggle
-
jQuery(".toggle_container").hide();
+
  jQuery(".toggle_container").hide();
-
jQuery("h2.trigger").click(function(){
+
  jQuery("h2.trigger").click(function(){
-
jQuery(this).toggleClass("active").next().slideToggle("slow");
+
    jQuery(this).toggleClass("active").next().slideToggle("slow");
-
});
+
  });
-
+
 
-
+
 
});
});
Line 384: Line 384:
</head>
</head>
<body>
<body>
-
<div id="bodychild">
+
  <div id="bodychild">
-
<div id="outercontainer">
+
  <div id="outercontainer">
-
   
+
     
         <!-- HEADER -->
         <!-- HEADER -->
         <div id="outerheader">
         <div id="outerheader">
             <header id="top">
             <header id="top">
-
           
+
             
                 <section id="navigation">
                 <section id="navigation">
                     <nav>
                     <nav>
Line 396: Line 396:
                             <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B">Home</a></li>
                             <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B">Home</a></li>
                             <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Software</a>
                             <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Software</a>
-
                            <ul>
+
                              <ul>
                                     <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Overview</a></li>
                                     <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Overview</a></li>
                                     <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/algorithm">Algorithm</a></li>
                                     <li><a href="http://2012.igem.org/Team:SUSTC-Shenzhen-B/algorithm">Algorithm</a></li>
Line 450: Line 450:
                      
                      
                     <ul id="sn">
                     <ul id="sn">
-
                    <li><a href="http://twitter.com" title="Twitter"><span class="icon-img" style="background:url(/wiki/images/1/1a/Sustc-b1-social-twitter.png)"></span></a></li>
+
                      <li><a href="http://twitter.com" title="Twitter"><span class="icon-img" style="background:url(/wiki/images/1/1a/Sustc-b1-social-twitter.png)"></span></a></li>
                         <li><a href="http://plus.google.com" title="Google+"><span class="icon-img" style="background:url(/wiki/images/7/70/Sustc-b1-social-google.png)"></span></a></li>
                         <li><a href="http://plus.google.com" title="Google+"><span class="icon-img" style="background:url(/wiki/images/7/70/Sustc-b1-social-google.png)"></span></a></li>
                         <li><a href="http://facebook.com" title="Facebook"><span class="icon-img" style="background:url(/wiki/images/a/a7/Sustc-b1-social-facebook.png)"></span></a></li>
                         <li><a href="http://facebook.com" title="Facebook"><span class="icon-img" style="background:url(/wiki/images/a/a7/Sustc-b1-social-facebook.png)"></span></a></li>
                         <li><a href="http://pinterest.com" title="pinterest"><span class="icon-img" style="background:url(/wiki/images/b/bb/Sustc-b1-social-pinterest.png)"></span></a></li>
                         <li><a href="http://pinterest.com" title="pinterest"><span class="icon-img" style="background:url(/wiki/images/b/bb/Sustc-b1-social-pinterest.png)"></span></a></li>
-
                     </ul>
+
                     </ul>  
                     <div class="clear"></div>
                     <div class="clear"></div>
                 </section>
                 </section>
Line 466: Line 466:
         <!-- MAIN CONTENT -->
         <!-- MAIN CONTENT -->
         <div id="outermain">
         <div id="outermain">
-
        <div id="maincontent">
+
          <div id="maincontent">
-
        <section id="mainthecontent">
+
          <section id="mainthecontent">
              
              
-
<article>
+
        <article>
-
                                <h1>Introduction</h1>
+
                              <h2><p>Introduction to the Lab Work</p></h2>
-
<h3 class="STYLE10">Transcription:</h3>
+
 
-
<p>The transcription stage, the reading of genetic information from DNA, is composed of promoter binding and the activation of RNA polymerase, RNA transcript initiation and promoter escape, RNA transcript elongation, and transcript termination, and release. </p>  
+
 
-
<br>
+
                <h3 class="STYLE10">Objective</h3>
-
                 <h3 class="STYLE10">What is terminator?</h3>
+
                <p>The goal of our wet lab work is validate our software prediction. There are very limited terminator efficiency data available in literatures, we have designed 100 terminators bioinformatically, and want physically measure the efficiency. By fitting our prediction with experiment results, we can adjust the parameters in our model to make it more accurate.</p>
-
<p>Terminators are genetic parts that usually occur at the end of a gene or operon and cause transcription to stop. In prokaryotes, terminators usually fall into two categories (1) rho-independent terminators and (2) rho-dependent terminators.</p>
+
 
-
<p>Rho-independent terminators are generally composed of palindromic sequence that forms a stem loop rich in G-C base pairs followed by several T bases. The conventional model of transcriptional termination is that the stem loop causes RNA polymerase to pause and transcription of the poly-A tail causes the RNA:DNA duplex to unwind and dissociate from RNA polymerase.
+
<h3 class="STYLE10">1, How to measure efficiency:</h3>
-
</p>
+
 
-
<br>  
+
                <img src="http://2012.igem.org/wiki/images/6/62/Project.introduction.3JPG.JPG" alt="" class="img_fl img_border" />
-
              <h3 class="STYLE10">Terminator Efficiency:</h3>
+
<br><br><br><br><br><br><br><br><br><br><br><br><br>
-
<p>Although terminators are positioned at the ends of genes, they also play irreplaceable roles. It is important that transcription is imperfectly terminated at some terminator so that the ratio of the amount of the mRNA transcribed from upstream and that from downstream of the terminator is controlled. This regulation is qualified by the termination efficiency.</p>
+
<p>In figure above, we show our plasmid design to measure terminator efficiency. The terminator to be characterized is flanked by two fluorescent proteins, GFP and RFP. If the terminator is 100% efficient, then, RFP will be transcripted while GFP should not be transcripted. If the terminator is 0% efficienct, then, both RFP and GFP will be transcripted at the same time. We use flow cytometry to measure the fluorescence strength of GFP and RFP.  </p>
 +
 
 +
The terminator efficiency of a terminator is calculated as:
 +
<p> E = 1- S/T </p>
 +
Here S is the fluorescence strength of GFP with terminator, and T is the fluorescence strenght of GFP without terminator, which is the baseline strength.
 +
         
 +
 
 +
 
 +
             
 +
                 <h3 class="STYLE10">2. Plasmid Construction</h3>
 +
  <p>The goal of BioBrick is to standardize the form of genetic components to allow idempotent reactions where the key structural elements of a component are unchanged by the reactions. So BioBrick provide a standard method of assembling genetic components using specified prefixes and suffixes. Prefixes include EcoRⅠ and XbaⅠ; suffixes include SpeⅠ and PstⅠ.
 +
  <p>The recognition site of XbaⅠ:</p>
 +
  <img src="http://2012.igem.org/wiki/images/2/2e/Xba1.JPG" class="img_fl img_border" />
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <p>(Figure 3)</p>
 +
  <p>The recognition site of SpeⅠ:</p>
 +
  <img src="http://2012.igem.org/wiki/images/7/77/Spe1.JPG" class="img_fl img_border" />   
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <p>(Figure 4)</p>
 +
  They have the same cohesive terminus so they can connect together. However, after the combination, neither XbaⅠnor SpeⅠ can recognize this sequence. According to this way can we achieve the goal of BioBricks.
 +
We can see from the picture(Figure 2) that there are 4 standard restriction enzyme cutting sites:  
 +
EcoRⅠ, XbaⅠ, SpeⅠ,PstⅠ.
 +
  </p>
 +
  <p>1. Because we will use pstⅠto be the restriction cutting site of terminators, if we want to ligase GFP to the plasmid, this restriction cutting site should be mutated.
 +
  <p>The recognition site of PstⅠ:</p>
 +
  <img src="http://2012.igem.org/wiki/images/c/cc/Pst1.JPG" class="img_fl img_border" />  
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <p>(Figure 5)</p>
 +
  <p>The recognition site of AflⅡ:</p>
 +
  <img src="http://2012.igem.org/wiki/images/c/cc/Afl2.JPG" class="img_fl img_border" />
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <br>
 +
  <p>(Figure 6)</p>
 +
  Since AflⅡis like PstⅠ,they just have 2 different base-pairs, we use
 +
PtoA-F
 +
5'-CCACCTGACGTCTAAGAAAC-3'
 +
PtoA-R
 +
5'-CTTAAGCGGCCGCTACTAGTA-3'
 +
These primer to mutate the vector.
 +
  </p>
 +
 
 +
              <p>2. After the mutation is successful, the next step is to connect GFP & RFP to the vector.
 +
                  The GFP and RFP were built by PCR extension.
 +
                  To digest GFP, we use SpeⅠand AflⅡ. We also digest the vector with the same restriction enzyme cutting sites. During the process of base complementary pairing, GFP can be ligated into the vector with the help of T4 DNA ligase. At the same time, the recognition site of PstⅠ has been added to the vector.
 +
                  To digest RFP, we use NotⅠ and SpeⅠ. We also digest the vector with the same restriction enzyme cutting sites. During the process of base complementary pairing, RFP can be ligated into vector with the help of T4 DNA ligase. At the same time, the recognition site of XbaⅠ has been added to the vector.
 +
                  We can either connect GFP, RFP and the plasmid these 3 fragments together or connect 2 fragments together first and then connect the other one. However, when we carry out the second scheme, we should consider which one should be connected first. According to the picture, we should connect GFP first.
 +
                  Besides:
 +
                  We designed these primers to amplify RFP.
 +
                  R-NPS-F
 +
                  5'-TATAGCGGCCGCCTTAAGTAAGTAAGAGTATACG-3' 
 +
                  R-NPS-R
 +
                  5'-CGGAGACTAGTCTGCAGATCACATAAGTAAAGTGATAATC-3'
 +
                  We designed these primers to amplify GFP.
 +
                  G-SXA-F
 +
                  5'-CTAGACTAGTTCTAGAGGCGGACTCACTATAGA-3' 
 +
                  G-SXA-R
 +
                  5'-CCGACTTAAGGGATCCTATAAACGCAG-3'  </p>
 +
                <p>3. Until these steps, we have already built the vector well. We decided to use XbaⅠ,PstⅠto digest the vector.
 +
                  The terminators were built by PCR extension.
 +
                  Then we can ligated terminator into the backbone and transformed into competent cells.
 +
                  Characterization devices testing the performance of the terminators utilized fluorescent proteins to measure input and output and altered the arabinose transport system to control inputs. The fluorescence produced by the characterization devices were then measured using flow cytometry to calculate the termination efficiency of the terminators.             </p>
 +
 
 +
 
 +
<h3 class="STYLE10">3. Fluorescence strength quantification</h3>
 +
We used flow cytometer to measured the fluorescence strength. We also used fluorescence microscope to take a picture of bacterial culture.
 +
 
<br>  
<br>  
-
+
         
                 </article>
                 </article>
Line 495: Line 573:
                  
                  
                 <div class="clear"></div>
                 <div class="clear"></div>
-
<div class="separator line"></div>
+
        <div class="separator line"></div>
<article class="row">
<article class="row">
Line 504: Line 582:
                     </div>
                     </div>
                     <div class="one_fourth">
                     <div class="one_fourth">
-
                    <span class="dropcap4">2</span>
+
                      <span class="dropcap4">2</span>
                         <h4>Problem Areas</h4>
                         <h4>Problem Areas</h4>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                     </div>
                     </div>
                     <div class="one_fourth">
                     <div class="one_fourth">
-
                    <span class="dropcap4">3</span>
+
                      <span class="dropcap4">3</span>
                         <h4>Green Garden</h4>
                         <h4>Green Garden</h4>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                     </div>
                     </div>
                     <div class="one_fourth lastcols">
                     <div class="one_fourth lastcols">
-
                    <span class="dropcap4">4</span>
+
                      <span class="dropcap4">4</span>
                         <h4>Planting Areas</h4>
                         <h4>Planting Areas</h4>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                         <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
                     </div>
                     </div>
-
        </article>
+
            </article>
                 <div class="clear"></div>
                 <div class="clear"></div>
             </section>
             </section>
Line 529: Line 607:
         <!-- FOOTER -->
         <!-- FOOTER -->
         <div id="outerfooter">
         <div id="outerfooter">
-
        <div id="footercontainer">
+
          <div id="footercontainer">
-
            <footer id="footer">Downloaded from KickassGFX.net. Theme design by <a href="http://www.kickassgfx.net/">kickassgfx.net</a></footer>
+
              <footer id="footer">Downloaded from KickassGFX.net. Theme design by <a href="http://www.kickassgfx.net/">kickassgfx.net</a></footer>
             </div>
             </div>
         </div>
         </div>
Line 536: Line 614:
          
          
         <div class="clear"></div>
         <div class="clear"></div>
-
</div> <!-- end outercontainer -->
+
  </div> <!-- end outercontainer -->
      
      
</div> <!-- end bodychild -->
</div> <!-- end bodychild -->

Revision as of 15:26, 25 October 2012

Title

Introduction to the Lab Work

Objective

The goal of our wet lab work is validate our software prediction. There are very limited terminator efficiency data available in literatures, we have designed 100 terminators bioinformatically, and want physically measure the efficiency. By fitting our prediction with experiment results, we can adjust the parameters in our model to make it more accurate.

1, How to measure efficiency:














In figure above, we show our plasmid design to measure terminator efficiency. The terminator to be characterized is flanked by two fluorescent proteins, GFP and RFP. If the terminator is 100% efficient, then, RFP will be transcripted while GFP should not be transcripted. If the terminator is 0% efficienct, then, both RFP and GFP will be transcripted at the same time. We use flow cytometry to measure the fluorescence strength of GFP and RFP.

The terminator efficiency of a terminator is calculated as:

E = 1- S/T

Here S is the fluorescence strength of GFP with terminator, and T is the fluorescence strenght of GFP without terminator, which is the baseline strength.

2. Plasmid Construction

The goal of BioBrick is to standardize the form of genetic components to allow idempotent reactions where the key structural elements of a component are unchanged by the reactions. So BioBrick provide a standard method of assembling genetic components using specified prefixes and suffixes. Prefixes include EcoRⅠ and XbaⅠ; suffixes include SpeⅠ and PstⅠ.

The recognition site of XbaⅠ:





(Figure 3)

The recognition site of SpeⅠ:





(Figure 4)

They have the same cohesive terminus so they can connect together. However, after the combination, neither XbaⅠnor SpeⅠ can recognize this sequence. According to this way can we achieve the goal of BioBricks. We can see from the picture(Figure 2) that there are 4 standard restriction enzyme cutting sites: EcoRⅠ, XbaⅠ, SpeⅠ,PstⅠ.

1. Because we will use pstⅠto be the restriction cutting site of terminators, if we want to ligase GFP to the plasmid, this restriction cutting site should be mutated.

The recognition site of PstⅠ:






(Figure 5)

The recognition site of AflⅡ:






(Figure 6)

Since AflⅡis like PstⅠ,they just have 2 different base-pairs, we use PtoA-F 5'-CCACCTGACGTCTAAGAAAC-3' PtoA-R 5'-CTTAAGCGGCCGCTACTAGTA-3' These primer to mutate the vector.

2. After the mutation is successful, the next step is to connect GFP & RFP to the vector. The GFP and RFP were built by PCR extension. To digest GFP, we use SpeⅠand AflⅡ. We also digest the vector with the same restriction enzyme cutting sites. During the process of base complementary pairing, GFP can be ligated into the vector with the help of T4 DNA ligase. At the same time, the recognition site of PstⅠ has been added to the vector. To digest RFP, we use NotⅠ and SpeⅠ. We also digest the vector with the same restriction enzyme cutting sites. During the process of base complementary pairing, RFP can be ligated into vector with the help of T4 DNA ligase. At the same time, the recognition site of XbaⅠ has been added to the vector. We can either connect GFP, RFP and the plasmid these 3 fragments together or connect 2 fragments together first and then connect the other one. However, when we carry out the second scheme, we should consider which one should be connected first. According to the picture, we should connect GFP first. Besides: We designed these primers to amplify RFP. R-NPS-F 5'-TATAGCGGCCGCCTTAAGTAAGTAAGAGTATACG-3' R-NPS-R 5'-CGGAGACTAGTCTGCAGATCACATAAGTAAAGTGATAATC-3' We designed these primers to amplify GFP. G-SXA-F 5'-CTAGACTAGTTCTAGAGGCGGACTCACTATAGA-3' G-SXA-R 5'-CCGACTTAAGGGATCCTATAAACGCAG-3'

3. Until these steps, we have already built the vector well. We decided to use XbaⅠ,PstⅠto digest the vector. The terminators were built by PCR extension. Then we can ligated terminator into the backbone and transformed into competent cells. Characterization devices testing the performance of the terminators utilized fluorescent proteins to measure input and output and altered the arabinose transport system to control inputs. The fluorescence produced by the characterization devices were then measured using flow cytometry to calculate the termination efficiency of the terminators.

3. Fluorescence strength quantification

We used flow cytometer to measured the fluorescence strength. We also used fluorescence microscope to take a picture of bacterial culture.

Explanations

The process of transcription


the secondary structure of terminator

1

Design Ideas

Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.

2

Problem Areas

Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.

3

Green Garden

Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.

4

Planting Areas

Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.