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

Line 2: Line 2:
 
<html>
 
<html>
 
<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: 5px;
 
     cursor: pointer;
 
     cursor: pointer;
 
     transition: 0.3s;
 
     transition: 0.3s;
−
}
+
  }
−
 
+
 
−
#PopupImg:hover {opacity: 0.7; z-index: -1;}
+
  #PopupImg:hover {opacity: 0.7; z-index: -1;}
−
 
+
 
−
/* The Modal (background) */
+
  /* The Modal (background) */
−
.modal {
+
  .modal {
 
     display: none; /* Hidden by default */
 
     display: none; /* Hidden by default */
 
     position: fixed; /* Stay in place */
 
     position: fixed; /* Stay in place */
Line 27: Line 27:
 
     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: 100%;
 
     width: 100%;
 
     overflow-y: scroll;
 
     overflow-y: scroll;
−
}
+
  }
−
 
+
 
−
/* Caption of Modal Image */
+
  /* Caption of Modal Image */
−
#caption {
+
  #caption {
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
Line 47: Line 47:
 
     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 76:
 
     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%;
 
     }
 
     }
−
}
+
  }
−
 
+
 
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<!--
+
  <!--
−
<div class='bodyWhiteClass'>
+
  <div class='bodyWhiteClass'>
−
<ul id="PopupImgList">
+
  <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://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://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px" >
Line 106: Line 106:
 
   <div style="padding-top: 20px;">
 
   <div style="padding-top: 20px;">
 
   </div>
 
   </div>
−
<div class= 'oneThirdClass'>
+
  <div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
  <p1>caption</p1>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
−
</div>
+
      <p1>caption</p1>
−
<div class= 'oneThirdClass'>
+
    </div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
</div>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
−
<div class= 'oneThirdClass'>
+
    </div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
</div>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
 +
    </div>
 +
  </div>
 
   <div style="padding-top: 20px;">
 
   <div style="padding-top: 20px;">
 
   </div>
 
   </div>
−
<div class= 'oneThirdClass'>
+
  <div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
</div>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
−
<div class= 'oneThirdClass'>
+
    </div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
</div>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
−
<div class= 'oneThirdClass'>
+
    </div>
−
  <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
+
    <div class= 'oneThirdClass'>
−
</div>
+
      <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px"></a>
−
 
+
    </div>
 +
  </div>
 +
 
 
</div>
 
</div>
  
Line 138: Line 142:
 
<script>
 
<script>
 
function getEventTarget(e) {
 
function getEventTarget(e) {
−
    e = e || window.event;
+
  e = e || window.event;
−
    return e.target || e.srcElement;
+
  return e.target || e.srcElement;
 
}
 
}
  
 
var ul = document.getElementById('PopupImgList');
 
var ul = document.getElementById('PopupImgList');
 
ul.onclick = function(event) {
 
ul.onclick = function(event) {
−
    var target = getEventTarget(event);
+
  var target = getEventTarget(event);
−
    <!--alert(target.src);-->
+
  <!--alert(target.src);-->
−
    var modal = document.getElementById('PopupModal');
+
  var modal = document.getElementById('PopupModal');
−
 
+
 
−
    // Get the image and insert it inside the modal - use its "alt" text as a caption
+
  // Get the image and insert it inside the modal - use its "alt" text as a caption
−
    var img = target.alt;
+
  var img = target.alt;
−
    var modalImg = document.getElementById("img01");
+
  var modalImg = document.getElementById("img01");
−
    var captionText = document.getElementById("caption");
+
  var captionText = document.getElementById("caption");
−
    modal.style.display = "inline";
+
  modal.style.display = "inline";
−
    modalImg.src = target.src;
+
  modalImg.src = target.src;
−
 
+
 
−
 
+
 
−
    captionText.innerHTML = target.alt;
+
  captionText.innerHTML = target.alt;
−
    // Get the <span> element that closes the modal
+
  // Get the <span> element that closes the modal
−
    var span = document.getElementsByClassName("close")[0];
+
  var span = document.getElementsByClassName("close")[0];
−
 
+
 
−
    // When the user clicks on <span> (x), close the modal
+
  // When the user clicks on <span> (x), close the modal
−
    span.onclick = function() {
+
  span.onclick = function() {
−
        modal.style.display = "none";
+
    modal.style.display = "none";
−
    }
+
  }
 
};
 
};
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 23:30, 24 August 2018

Something1 caption
Something1
Something1
Something1
Something1
Something1