(124 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: | + | 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 27: | Line 29: | ||
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 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%; | |
} | } | ||
+ | } | ||
+ | |||
+ | .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=' | + | <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" > |
− | <img id="PopupImg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt=" | + | <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> | </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> | ||
− | |||
− | |||
<div id="PopupModal" class="modal"> | <div id="PopupModal" class="modal"> | ||
Line 114: | Line 231: | ||
<script> | <script> | ||
function getEventTarget(e) { | function getEventTarget(e) { | ||
− | + | e = e || window.event; | |
− | + | 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); | |
− | + | <!--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> | </script> | ||
− | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 03:09, 18 October 2018
Experiments & Protocols
×