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

 
(167 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;}
−
 
+
 
−
#PopupImg {
+
  #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;}
+
 
−
 
+
  #PopupImg:hover {opacity: 0.7; z-index: -1;}
−
/* The Modal (background) */
+
 
−
.modal {
+
  /* The Modal (background) */
 +
  .modal {
 
     display: none; /* Hidden by default */
 
     display: none; /* Hidden by default */
 
     position: fixed; /* Stay in place */
 
     position: fixed; /* Stay in place */
Line 24: Line 26:
 
     width: 100%; /* Full width */
 
     width: 100%; /* Full width */
 
     height: 100%; /* Full height */
 
     height: 100%; /* Full height */
−
     overflow: auto; /* Enable scroll if needed */
+
     overflow: scroll; /* Enable scroll if needed */
 
     background-color: rgb(0,0,0); /* Fallback color */
 
     background-color: rgb(0,0,0); /* Fallback color */
 
     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 
     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
−
}
+
  }
−
 
+
 
−
/* Modal Content (image) */
+
  /* Modal Content (image) */
−
.modal-content {
+
  .modal-content {
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
−
     width: 80%;
+
     width: 100%;
−
     max-width: 700px;
+
     overflow-y: scroll;
−
}
+
  }
−
 
+
 
−
/* Caption of Modal Image */
+
  /* Caption of Modal Image */
−
#caption {
+
  #caption {
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
Line 47: Line 49:
 
     padding: 10px 0;
 
     padding: 10px 0;
 
     height: 150px;
 
     height: 150px;
−
}
+
  }
−
 
+
 
−
/* Add Animation */
+
  /* Add Animation */
−
.modal-content, #caption {  
+
  .modal-content, #caption {
 
     -webkit-animation-name: zoom;
 
     -webkit-animation-name: zoom;
 
     -webkit-animation-duration: 0.6s;
 
     -webkit-animation-duration: 0.6s;
 
     animation-name: zoom;
 
     animation-name: zoom;
 
     animation-duration: 0.6s;
 
     animation-duration: 0.6s;
−
}
+
  }
−
 
+
 
−
@-webkit-keyframes zoom {
+
  @-webkit-keyframes zoom {
−
     from {-webkit-transform:scale(0)}  
+
     from {-webkit-transform:scale(0)}
 
     to {-webkit-transform:scale(1)}
 
     to {-webkit-transform:scale(1)}
−
}
+
  }
−
 
+
 
−
@keyframes zoom {
+
  @keyframes zoom {
−
     from {transform:scale(0)}  
+
     from {transform:scale(0)}
 
     to {transform:scale(1)}
 
     to {transform:scale(1)}
−
}
+
  }
−
 
+
 
−
/* The Close Button */
+
  /* The Close Button */
−
.close {
+
  .close {
 
     position: absolute;
 
     position: absolute;
 
     top: 135px;
 
     top: 135px;
Line 76: Line 78:
 
     font-weight: bold;
 
     font-weight: bold;
 
     transition: 0.3s;
 
     transition: 0.3s;
−
}
+
  }
−
 
+
 
−
.close:hover,
+
  .close:hover,
−
.close:focus {
+
  .close:focus {
 
     color: #bbb;
 
     color: #bbb;
 
     text-decoration: none;
 
     text-decoration: none;
 
     cursor: pointer;
 
     cursor: pointer;
−
}
+
  }
−
 
+
 
−
/* 100% Image Width on Smaller Screens */
+
  /* 100% Image Width on Smaller Screens */
−
@media only screen and (max-width: 700px){
+
  @media only screen and (max-width: 700px){
 
     .modal-content {
 
     .modal-content {
−
        width: 100%;
+
      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;
 
}
 
}
  
 +
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>
  
−
<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">
 
−
 
−
<!-- The Modal -->
 
 
<div id="PopupModal" class="modal">
 
<div id="PopupModal" class="modal">
 
   <span class="close">&times;</span>
 
   <span class="close">&times;</span>
Line 106: Line 230:
  
 
<script>
 
<script>
−
// Get the modal
+
function getEventTarget(e) {
−
var modal = document.getElementById('PopupModal');
+
  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('PopupImg');
+
−
var modalImg = document.getElementById("img01");
+
−
var captionText = document.getElementById("caption");
+
−
img.onclick = function(){
+
−
    modal.style.display = "inline";
+
−
    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