Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"

 
(190 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template:Toronto/CSS}}
 
{{Template:Toronto/CSS}}
 
<html>
 
<html>
 +
<h1>Experiments & Protocols</h1>
 
<head>
 
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<style>
+
  <style>
−
body {font-family: Arial, Helvetica, sans-serif;}
+
  body {font-family: Arial, Helvetica, sans-serif;}
−
 
+
 
−
#myImg {
+
  #PopupImg {
−
     border-radius: 5px;
+
     border-radius: 45px;
 
     cursor: pointer;
 
     cursor: pointer;
 
     transition: 0.3s;
 
     transition: 0.3s;
 +
    height: 300px;
 +
  }
 +
 
 +
  #PopupImg:hover {opacity: 0.7; z-index: -1;}
 +
 
 +
  /* The Modal (background) */
 +
  .modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 101; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: scroll; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 +
  }
 +
 
 +
  /* Modal Content (image) */
 +
  .modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 100%;
 +
    overflow-y: scroll;
 +
  }
 +
 
 +
  /* Caption of Modal Image */
 +
  #caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
  }
 +
 
 +
  /* Add Animation */
 +
  .modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 +
  }
 +
 
 +
  @-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
  }
 +
 
 +
  @keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
  }
 +
 
 +
  /* The Close Button */
 +
  .close {
 +
    position: absolute;
 +
    top: 135px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
  }
 +
 
 +
  .close:hover,
 +
  .close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
  }
 +
 
 +
  /* 100% Image Width on Smaller Screens */
 +
  @media only screen and (max-width: 700px){
 +
    .modal-content {
 +
      width: 100%;
 +
    }
 +
  }
 +
 
 +
  .image {
 +
    position: relative;
 +
    width: 100%; /* for IE 6 */
 +
  }
 +
 
 +
  h2 {
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 20px;
 +
    width: 100%;
 +
    font-family: "Times New Roman", Times, serif;
 +
    font-style: oblique;
 +
    font-size: 40px;
 +
 
 +
  }
 +
 +
  h2 span {
 +
  color: white;
 +
  font: bold 24px/45px Helvetica, Sans-Serif;
 +
  letter-spacing: -1px; 
 +
  background: rgb(0, 0, 0); /* fallback color */
 +
  background: rgba(0, 0, 0, 1);
 +
  padding: 10px;
 
}
 
}
  
−
#myImg:hover {opacity: 0.7;}
+
h2 span.spacer {
−
 
+
  padding:0 5px;
−
-
+
}
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
 +
  <!--
 +
  <div class='bodyWhiteClass'>
 +
  <ul id="PopupImgList">
 +
  <img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab"  style="width:100%;max-width:300px">
 +
  <img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px" >
 +
  <img id="PopupImg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg"  style="width:100%;max-width:300px">
 +
</ul>
 +
-->
 +
<div class='bodyWhiteClass'>
 +
  <div style="padding-top: 20px; margin-left:auto; margin-right:auto">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--_Colony_PCR_Protocol_content.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/9/90/T--Toronto--8_24_2018_pcr.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Colony PCR</span></h2> </a>
 +
      </div>
 +
    </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/5/5e/T--Toronto--_70%25_Ethanol_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/6/69/T--Toronto--2018_ethanol.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Ethanol</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/e/ec/T--Toronto--_Antibacterial_Stock_Preperation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/9/9e/T--Toronto--2018_antibacterialpreparation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span> Antibacterial<span class='spacer'></span><br /><span class='spacer'></span>Stock Preperation</span></h2> </a>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div style="padding-top: 20px; float: bottom;">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--_Bacterial_Transformation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/e/e3/T--Toronto--2018_bacterialtransformation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span><span class='spacer'></span><span class='spacer'></span>Bacterial Transformation</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/1/18/T--Toronto--B-assay.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/c9/T--Toronto--8_24_2018_cell_culture.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Buoyancy<span class='spacer'></span><br /><span class='spacer'></span>Assay</span></h2>  </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/df/T--Toronto--_Dpn1_Digestion.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/3/30/T--Toronto--2018_Dpn1digest.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Dpn1<span class='spacer'></span><br /><span class='spacer'></span>Digestion</span></h2> </a>
 +
      </div>
 +
  </div>
 +
 
 +
  <div style="padding-top: 20px; float: bottom;">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/0/00/T--Toronto--_Electroporation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/2/27/T--Toronto--2018_electroporation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span><span class='spacer'></span><span class='spacer'></span>Electroporation</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/a/a8/T--Toronto--_Exclusion_PCR.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/f/f6/T--Toronto--2018_exclusionPCR.png" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Exclusion<span class='spacer'></span><br /><span class='spacer'></span>PCR</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/2/2d/T--Toronto--_Gel_Electrophoresis_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/4/40/T--Toronto--8_24_2018_electrophores.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span><span class='spacer'></span><span class='spacer'></span>Gel Electrophoresis</span></h2>  </a>
 +
    </div>
 +
  </div>
 +
  </div>
 +
 
 +
  <div style="padding-top: 20px; float: bottom;">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_Gibson_Assembly.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/6/64/T--Toronto--8_24_2018_gibson.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Gibson<span class='spacer'></span><br /><span class='spacer'></span>Assembly</span></h2>  </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/f/f2/T--Toronto--_LB_Media_Preperation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/f/f1/T--Toronto--2018_LBmediaprepprotocol.png" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span><span class='spacer'></span><span class='spacer'></span>LB Media Preperation</span></h2>  </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_NEB_Monarch_Miniprep.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/0/05/T--Toronto--2018_NEBMonarchminipreppurification.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>NEB Monarch<span class='spacer'></span><br /><span class='spacer'></span>Minirep</span></h2> </a>
 +
    </div>
 +
  </div>
 +
  </div>
 +
 
 +
  <div style="padding-top: 20px; float: bottom;">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/8/83/T--Toronto--_Phosphate_Buffered_Saline.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/d/dc/T--Toronto--2018_phosphatebuffersaline.png" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Phosphate<span class='spacer'></span><br /><span class='spacer'></span>Buffered Saline</span></h2>  </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/f/f3/T--Toronto--_Rubidium_Chloride_Competent_Cells.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/5/5c/T--Toronto--2018_RuClcompetentcells.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px">  <h2><span>Rubidium Chloride<span class='spacer'></span><br /><span class='spacer'></span>Component </span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/9/98/T--Toronto--_SOC_Medium_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--2018_SOCmedium.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>SOC Medium</span></h2> </a>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div style="padding-top: 20px; float: bottom;">
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/4/45/T--Toronto--_T4_Ligase_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/2/2f/T--Toronto--2018_ligase.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Ligase</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/7/72/T--Toronto--_Lab_Safety.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/a/a3/T--Toronto--2018_labsafety.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Lab<span class='spacer'></span><br /><span class='spacer'></span>Safety</span></h2> </a>
 +
    </div>
 +
  </div>
 +
    <div class= 'oneThirdClass'>
 +
      <div class="image"> <a href="https://static.igem.org/mediawiki/2018/7/79/T--Toronto--_Basic_Terminology_and_Concepts.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/3/30/T--Toronto--2018_basicterminology.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Basic<span class='spacer'></span><br /><span class='spacer'></span>Terminology</span></h2> </a>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
  
−
<h2>Image Modal</h2>
+
<div id="PopupModal" class="modal">
−
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
+
−
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
+
−
 
+
−
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
+
−
 
+
−
<!-- The Modal -->
+
−
<div id="myModal" class="modal">
+
 
   <span class="close">&times;</span>
 
   <span class="close">&times;</span>
 
   <img class="modal-content" id="img01">
 
   <img class="modal-content" id="img01">
Line 33: Line 230:
  
 
<script>
 
<script>
−
// Get the modal
+
function getEventTarget(e) {
−
var modal = document.getElementById('myModal');
+
  e = e || window.event;
−
 
+
  return e.target || e.srcElement;
−
// Get the image and insert it inside the modal - use its "alt" text as a caption
+
−
var img = document.getElementById('myImg');
+
−
var modalImg = document.getElementById("img01");
+
−
var captionText = document.getElementById("caption");
+
−
img.onclick = function(){
+
−
    modal.style.display = "block";
+
−
    modalImg.src = this.src;
+
−
    captionText.innerHTML = this.alt;
+
 
}
 
}
  
−
// Get the <span> element that closes the modal
+
var ul = document.getElementById('PopupImgList');
−
var span = document.getElementsByClassName("close")[0];
+
ul.onclick = function(event) {
−
 
+
  var target = getEventTarget(event);
−
// When the user clicks on <span> (x), close the modal
+
  <!--alert(target.src);-->
−
span.onclick = function() {  
+
  var modal = document.getElementById('PopupModal');
 +
 
 +
  // Get the image and insert it inside the modal - use its "alt" text as a caption
 +
  var img = target.alt;
 +
  var modalImg = document.getElementById("img01");
 +
  var captionText = document.getElementById("caption");
 +
  modal.style.display = "inline";
 +
  modalImg.src = target.src;
 +
 
 +
 
 +
  captionText.innerHTML = target.alt;
 +
  // Get the <span> element that closes the modal
 +
  var span = document.getElementsByClassName("close")[0];
 +
 
 +
  // When the user clicks on <span> (x), close the modal
 +
  span.onclick = function() {
 
     modal.style.display = "none";
 
     modal.style.display = "none";
−
}
+
  }
 +
};
 
</script>
 
</script>
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:09, 18 October 2018

Experiments & Protocols