|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| | | | |
| − | <style>
| |
| − |
| |
| − | /* Style the Image Used to Trigger the Modal */
| |
| − | #PosLuxR, #NegLuxR, #NegLuxRExtAHLdeg, #NegLuxRLuxRdeg, #PosLuxRExtAHLdeg, #PosLuxRLuxRdeg {
| |
| − | border-radius: 5px;
| |
| − | cursor: pointer;
| |
| − | transition: 0.3s;
| |
| − | }
| |
| − |
| |
| − | #PosLuxR:hover {opacity: 0.7;}
| |
| − | #NegLuxR:hover {opacity: 0.7;}
| |
| − |
| |
| − | #NegLuxRExtAHLdeg:hover {opacity: 0.7;}
| |
| − | #NegLuxRLuxRdeg:hover {opacity: 0.7;}
| |
| − | #PosLuxRExtAHLdeg:hover {opacity: 0.7;}
| |
| − | #PosLuxRLuxRdeg:hover {opacity: 0.7;}
| |
| − |
| |
| − |
| |
| − | /* The Modal (background) */
| |
| − | .modal {
| |
| − | display: none; /* Hidden by default */
| |
| − | position: fixed; /* Stay in place */
| |
| − | z-index: 90; /* Sit on top */
| |
| − | padding-top: 50px; /* Location of the box */
| |
| − | left: 0;
| |
| − | top: 0;
| |
| − | width: 100%; /* Full width */
| |
| − | height: 100%; /* Full height */
| |
| − | overflow: auto; /* 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: 90%;
| |
| − | max-width: 1366px;
| |
| − | }
| |
| − |
| |
| − | /* Caption of Modal Image (Image Text) - Same Width as the Image */
| |
| − | .caption {
| |
| − | margin: auto;
| |
| − | display: block;
| |
| − | width: 90%;
| |
| − | max-width: 1366px;
| |
| − | text-align: center;
| |
| − | color: #ccc;
| |
| − | padding: 10px 0;
| |
| − | height: 150px;
| |
| − | }
| |
| − |
| |
| − | /* Add Animation - Zoom in the Modal */
| |
| − | .modal-content {
| |
| − | -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: 15px;
| |
| − | 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%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − | $(document).ready(function() {
| |
| − |
| |
| − | var timer;
| |
| − | var delay = 400;
| |
| − | $(".Main-Border").on("mouseenter", function() {
| |
| − | clearTimeout(timer);
| |
| − | timer = setTimeout(function() {
| |
| − | clearTimeout(timer);
| |
| − | $("#model-sub").show();
| |
| − | $("#wet-lab-sub").hide();
| |
| − | $("#human-practices-sub").hide();
| |
| − | $("#application-sub").hide();
| |
| − | $("#notebook-sub").hide();
| |
| − | $("#team-sub").hide();
| |
| − | $(".qs-sub-nav-item").css("font-weight", "Bold");
| |
| − | }, delay);
| |
| − |
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | $(function() {
| |
| − | $('#PosLuxR').on('click', function() {
| |
| − | $('#PosLuxR-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxR-Modal').on('click', function() {
| |
| − | $('#PosLuxR-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#NegLuxR').on('click', function() {
| |
| − | $('#NegLuxR-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxR-Modal').on('click', function() {
| |
| − | $('#NegLuxR-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − |
| |
| − | $('#NegLuxRExtAHLdeg').on('click', function() {
| |
| − | $('#NegLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxRExtAHLdeg-Modal').on('click', function() {
| |
| − | $('#NegLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#NegLuxRLuxRdeg').on('click', function() {
| |
| − | $('#NegLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxRLuxRdeg-Modal').on('click', function() {
| |
| − | $('#NegLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#PosLuxRExtAHLdeg').on('click', function() {
| |
| − | $('#PosLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxRExtAHLdeg-Modal').on('click', function() {
| |
| − | $('#PosLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#PosLuxRLuxRdeg').on('click', function() {
| |
| − | $('#PosLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxRLuxRdeg-Modal').on('click', function() {
| |
| − | $('#PosLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $("#heatmap").hover(
| |
| − | function() {
| |
| − | $("#tomtest").attr("src", "https://static.igem.org/mediawiki/2017/0/09/T--Wageningen_UR--Model-heatmapannotated.png");
| |
| − | },
| |
| − | function() {
| |
| − | $("#tomtest").attr("src", "https://static.igem.org/mediawiki/2017/3/33/T--Wageningen_UR--Model-heatmap.png");
| |
| − |
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
