Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
-
<html lang="en">
+
<head>
 +
<meta charset=utf-8 />
-
      <!-- Begin page content -->
+
<!-- Website Design By: www.happyworm.com -->
 +
<title>Demo : jPlayer circle player</title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
<link rel="stylesheet" href="http://www.kyleharrison.co.uk/igem/digiposter/skin/circle.skin/circle.player.css">
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.jplayer.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.transform2d.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.grab.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/mod.csstransforms.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/circle.player.js"></script>
 +
 
 +
<script type="text/javascript">
 +
//<![CDATA[
 +
 
 +
$(document).ready(function(){
 +
 
 +
  /*
 +
  * Instance CirclePlayer inside jQuery doc ready
 +
  *
 +
  * CirclePlayer(jPlayerSelector, media, options)
 +
  *  jPlayerSelector: String - The css selector of the jPlayer div.
 +
  *  media: Object - The media object used in jPlayer("setMedia",media).
 +
  *  options: Object - The jPlayer options.
 +
  *
 +
  * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
 +
  *
 +
  * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
 +
  * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
 +
  * However, the OGA format would be used in this case with the HTML solution.
 +
  */
 +
 
 +
  var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_1",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
  var myCirclePlayer2 = new CirclePlayer("#jquery_jplayer_2",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/BrianStory.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_2",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
    var myCirclePlayer3 = new CirclePlayer("#jquery_jplayer_3",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/ScoobyDoo.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_3",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
});
 +
//]]>
 +
</script>
 +
</head>
 +
<body>
 +
 
 +
<!-- Begin page content -->
       <div class="container">
       <div class="container">
-
      <!-- Title -->
+
<div class="row">
-
      <div class="page-header">
+
<div class="span12">
-
          <h2><b>ToxiMop</b> – What it is & how it works </h2>
+
<h2> An Introductin by Brian Cox </h2><br>
-
        </div>
+
</div></div>
-
      <!-- Title End -->
+
-
    <div class="span12">
+
<div class="row">
-
<p>The ToxiMop are two bacterial strains that have been designed to clean microcystin from contaminated water. These strains have been engineered to express human PP1, to which microcystin binds covalently, and target it outside the bacterial membrane to allow easy binding of the toxin. This binding inactivates the toxic activity of microcystin, effectively ‘mopping’ it up.</p>br>
+
<div class="span12">
-
<p>There are currently two chassis in which PP1 is being expressed: <i>Bacillus subtilis</i>and <i>Escherichia coli</i>. These two organisms were selected as they have different membrane layouts and allowed us to take two different approaches to the mop. Localisation of PP1 is mediated via different signal sequences that direct PP1 to the periplasm in <i>E. coli </i>and membrane in <i>B. subtilis</i>.</p>br>
+
<center><img src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px"></img</center>
-
<p>We considered two protein transport pathways for the transport of PP1 in our mop, the Sec and Tat protein transport pathways. We took these into consideration as Sec deals with unfolded protein (inserts membrane proteins into the inner membrane) and Tat deals with folded protein. In this way we could find out if PP1 was folding correctly in the periplasm by comparing blots of samples using Sec and samples using Tat.</p>br>
+
</div></div>
-
<p>As <i>B. subtilis</i> is Gram positive, PP1 is transported to the membrane. In this instance, export of PP1 is mediated by the Sec protein transport system, towards this aim; we fused PP1 to the PrsA signal sequence.</p>br>
+
-
<p><i>E. coli </i>is Gram negative and PP1 is targeted to the periplasm. Transport of PP1 to the periplasm can be mediated by either the Sec or Tat protein transport systems. For our project, we chose the MalE (Sec) and TorA (Tat) signal sequences.</p>br>
+
-
<b>Explain Sec and Tat (possible link to NetLogo)</b>
+
 +
<div class="row">
 +
<div class="span4">
 +
<centeR>
 +
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
 +
      <div id="jquery_jplayer_1" class="cp-jplayer"></div>
 +
 +
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
 +
 +
      <div id="cp_container_1" class="cp-container">
 +
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
 +
          <div class="cp-buffer-1"></div>
 +
          <div class="cp-buffer-2"></div>
 +
        </div>
 +
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-1"></div>
 +
          <div class="cp-progress-2"></div>
 +
        </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> Introduction</strong> </p></center>
</div>
</div>
-
   
+
<div class="span4">
 +
    <center> <div id="jquery_jplayer_2" class="cp-jplayer"></div>
 +
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
   
+
       <div id="cp_container_2" class="cp-container">
-
       <div id="push"></div>
+
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
-
    </div>
+
          <div class="cp-buffer-2"></div>
 +
          <div class="cp-buffer-2"></div>
 +
        </div>
 +
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-2"></div>
 +
          <div class="cp-progress-2"></div>
 +
        </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> Personal Story</strong> </p></center>
 +
</div>
-
    <div id="footer">
+
<div class="span4">
-
      <div class="container">
+
<centeR>
-
        <p class="muted credit"> Created for <a href="https://igem.org/Main_Page">iGEM 2013</a> Dundee. Based upon <a href ="http://twitter.github.io/bootstrap/">Bootstrap</a> and <a href="http://jquery.com/">JQuery</a>. Design by <a href="www.kyleharrison.co.uk"> Kyle Harrison </a>. </p>
+
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
-
      </div>
+
      <div id="jquery_jplayer_3" class="cp-jplayer"></div>
-
    </div>
+
 +
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
 +
 +
      <div id="cp_container_3" class="cp-container">
 +
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
 +
          <div class="cp-buffer-3"></div>
 +
          <div class="cp-buffer-3"></div>
 +
        </div>
 +
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-3"></div>
 +
          <div class="cp-progress-3"></div>
 +
        </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> What is Synthetic Biology?</strong> </p></center>
 +
</div>
 +
 +
</div>
Line 43: Line 164:
     <!-- the neccessary javascript -->
     <!-- the neccessary javascript -->
-
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 +
</body>
-
  </body>
 
</html>
</html>

Latest revision as of 00:08, 5 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

Demo : jPlayer circle player

An Introductin by Brian Cox


Introduction

Personal Story

What is Synthetic Biology?

Retrieved from "http://2013.igem.org/Team:Dundee/Project/Mop"