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

 
(191 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template:Toronto/CSS}}
 
{{Template:Toronto/CSS}}
 
<html>
 
<html>
−
<img id="myPopImg" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
+
<h1>Experiments & Protocols</h1>
 +
<head>
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <style>
 +
  body {font-family: Arial, Helvetica, sans-serif;}
 +
 
 +
  #PopupImg {
 +
    border-radius: 45px;
 +
    cursor: pointer;
 +
    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;
 +
 
 +
  }
  
−
<!-- The Modal -->
+
  h2 span {
−
<div id="myPopModal" class="modal">
+
  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;
 +
}
 +
 
 +
h2 span.spacer {
 +
  padding:0 5px;
 +
}
 +
 
 +
</style>
 +
</head>
 +
<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>
 +
 
 +
<div id="PopupModal" 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 10: Line 229:
 
</div>
 
</div>
  
 +
<script>
 +
function getEventTarget(e) {
 +
  e = e || window.event;
 +
  return e.target || e.srcElement;
 +
}
 +
 +
var ul = document.getElementById('PopupImgList');
 +
ul.onclick = function(event) {
 +
  var target = getEventTarget(event);
 +
  <!--alert(target.src);-->
 +
  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";
 +
  }
 +
};
 +
</script>
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:09, 18 October 2018

Experiments & Protocols