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

Line 50: Line 50:
  
 
/* 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;
Line 58: Line 58:
  
 
@-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)}
 
}
 
}
Line 95: Line 95:
 
</head>
 
</head>
 
<body>
 
<body>
−
 
 
−
<li 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">
 
−
</li>
 
  
−
<!-- The Modal -->
+
<ul id="test">
−
<div id="PopupModal" class="modal">
+
    <li>Item 1</li>
−
  <span class="close">&times;</span>
+
    <li>Item 2</li>
−
  <img class="modal-content" id="img01">
+
    <li>Item 3</li>
−
  <div id="caption"></div>
+
</ul>
−
</div>
+
−
 
+
−
</body>
+
  
 
<script>
 
<script>
−
$(function() {
+
function getEventTarget(e) {
−
  $('#popUpImgList > li').bind('mouseenter', function(){
+
    e = e || window.event;
−
     console.log("SAHDASD");
+
    return e.target || e.srcElement;
−
  });
+
}
−
});
+
 
 +
var ul = document.getElementById('test');
 +
ul.onclick = function(event) {
 +
     var target = getEventTarget(event);
 +
    alert(target.innerHTML);
 +
};
 
</script>
 
</script>
  
 +
</body>
 
</html>
 
</html>

Revision as of 18:36, 14 August 2018

  • Item 1
  • Item 2
  • Item 3