Difference between revisions of "Template:Wageningen UR/CpxKineticsCSS"

 
(32 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<style>
 
<style>
−
body {font-family: "Lato", sans-serif;}
+
 
 +
#fitscoring, #Distribution {
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
    transition: 0.3s;
 +
}
 +
 
 +
#fitscoring:hover {opacity: 0.7;}
 +
#Distribution: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 the tab */
 
/* Style the tab */
Line 43: Line 131:
 
     border-bottom: 1px solid #ccc;
 
     border-bottom: 1px solid #ccc;
 
}
 
}
 +
 +
 +
/* Style the close button */
 +
.topright {
 +
    float: right;
 +
    cursor: pointer;
 +
    font-size: 20px;
 +
}
 +
 +
.topright:hover {color: green;}
  
 
#System1A, #System2A, #System3A {
 
#System1A, #System2A, #System3A {
Line 51: Line 149:
 
     display:none;
 
     display:none;
 
}
 
}
 +
 +
#System2C, #System3C {
 +
    display:none;
 +
}
 +
 +
#System2D, #System3D {
 +
    display:none;
 +
}
 +
  
 
</style>
 
</style>
Line 61: Line 168:
 
     for (i = 0; i < tablinksA.length; i++) {
 
     for (i = 0; i < tablinksA.length; i++) {
 
         tablinksA[i].className = tablinksA[i].className.replace(" active", "");         
 
         tablinksA[i].className = tablinksA[i].className.replace(" active", "");         
−
        classname = document.getElementByClass(tablinksA[i]);
 
−
        alert(classname);
 
 
     }
 
     }
 
      
 
      
−
 
 
−
  $("#" + tabName).toggle();
 
  
−
 
+
    $("#System1A").hide();
 +
    $("#System2A").hide();
 +
    $("#System3A").hide();
 +
    $("#" + tabName).show();
 
     evt.currentTarget.className += " active";
 
     evt.currentTarget.className += " active";
 
}
 
}
−
</script>
 
  
−
<script>
 
 
function openTabB(evt, tabName) {
 
function openTabB(evt, tabName) {
 
     var i, tabcontent, tablinksB;
 
     var i, tabcontent, tablinksB;
Line 82: Line 186:
 
     }
 
     }
 
      
 
      
−
     $("#" + tabName).toggle();
+
    $("#System1B").hide();
 +
    $("#System2B").hide();
 +
    $("#System3B").hide();
 +
     $("#" + tabName).show();
 
     evt.currentTarget.className += " active";
 
     evt.currentTarget.className += " active";
 
}
 
}
 +
 +
function openTabC(evt, tabName) {
 +
    var i, tabcontent, tablinksC;
 +
   
 +
    tablinksC = document.getElementsByClassName("tablinksC");
 +
    for (i = 0; i < tablinksC.length; i++) {
 +
        tablinksC[i].className = tablinksC[i].className.replace(" active", "");
 +
    }
 +
   
 +
    $("#System1C").hide();
 +
    $("#System2C").hide();
 +
    $("#System3C").hide();
 +
    $("#" + tabName).show();
 +
    evt.currentTarget.className += " active";
 +
}
 +
 +
function openTabD(evt, tabName) {
 +
    var i, tabcontent, tablinksD;
 +
   
 +
    tablinksD = document.getElementsByClassName("tablinksD");
 +
    for (i = 0; i < tablinksD.length; i++) {
 +
        tablinksD[i].className = tablinksD[i].className.replace(" active", "");
 +
    }
 +
   
 +
    $("#System1D").hide();
 +
    $("#System2D").hide();
 +
    $("#System3D").hide();
 +
    $("#" + tabName).show();
 +
    evt.currentTarget.className += " active";
 +
}
 +
 +
 +
$( document ).ready(function() {
 +
  $("#System1C").show();
 +
  $("#System1D").show();
 +
});
 +
 +
$(function() {
 +
$('#fitscoring').on('click', function() {
 +
        $('#fitscoring-Modal').toggle();
 +
});
 +
   
 +
$('#fitscoring-Modal').on('click', function() {
 +
        $('#fitscoring-Modal').toggle();
 +
});
 +
 +
$('#Distribution').on('click', function() {
 +
      $('#Distribution-Modal').toggle();
 +
});
 +
        $('#Distribution-Modal').on('click', function() {
 +
      $('#Distribution-Modal').toggle();
 +
});
 +
});
 +
 +
 
</script>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 04:04, 19 November 2017