Difference between revisions of "Template:Groningen"
| (243 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | |||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" /> | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" /> | ||
| + | <link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2017/2/23/Tab_ding_icon_32.png" /> | ||
<script> | <script> | ||
| Line 7: | Line 9: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
$("#HQ_page").attr('id',''); | $("#HQ_page").attr('id',''); | ||
| − | // call the functions that control the menu | + | // call the functions that control the menu |
| − | menu_functionality(); | + | menu_functionality(); |
hide_show_menu(); | hide_show_menu(); | ||
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols | ||
| Line 71: | Line 73: | ||
/* START GENERAL STYLES */ | /* START GENERAL STYLES */ | ||
html { | html { | ||
| − | height: 100%; | + | //height: 100%; |
width: 100%; | width: 100%; | ||
margin: 0; | margin: 0; | ||
| Line 78: | Line 80: | ||
body { | body { | ||
width: auto !important; | width: auto !important; | ||
| − | |||
width: 100%; | width: 100%; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| + | font-size: 10pt; | ||
font-family: Raleway; | font-family: Raleway; | ||
| + | |||
| + | position: relative; | ||
| + | //height: auto; | ||
| + | //min-height: 100%; | ||
| + | |||
} | } | ||
h1,h2,h3,h4,h5{ | h1,h2,h3,h4,h5{ | ||
| Line 103: | Line 110: | ||
width: 100%; | width: 100%; | ||
height: 30%; | height: 30%; | ||
| − | margin-top: | + | margin-top: 0px; |
background-color: #88d0a5; | background-color: #88d0a5; | ||
/*background-image: url('https://static.igem.org/mediawiki/2017/d/de/17groupgroningen.jpg');*/ | /*background-image: url('https://static.igem.org/mediawiki/2017/d/de/17groupgroningen.jpg');*/ | ||
| Line 144: | Line 151: | ||
height:1000px; | height:1000px; | ||
width: 1000px; | width: 1000px; | ||
| − | overflow: auto; | + | //overflow: auto; |
| − | overflow-y: hidden; | + | //overflow-y: hidden; hide vertical |
| − | overflow-x: hidden; | + | //overflow-x: hidden; hide horizontal |
} | } | ||
/* IMAGES */ | /* IMAGES */ | ||
| − | . | + | .imgsize{ |
position: relative; | position: relative; | ||
vertical-align: middle; | vertical-align: middle; | ||
| Line 156: | Line 163: | ||
max-width: 500px; | max-width: 500px; | ||
height: 100px; | height: 100px; | ||
| + | border-radius: 15px 50px 15px 50px; | ||
padding-top: 0px; | padding-top: 0px; | ||
} | } | ||
| − | + | .imglab { | |
| − | . | + | display: block; |
| − | + | max-width: 70%; | |
| − | + | margin: auto; | |
| + | text-align: center; | ||
| + | border-radius: 15px 50px 15px 50px; | ||
| + | } | ||
| + | .imglabh { | ||
| + | /*display: block;*/ | ||
| + | max-width: 100%; | ||
| + | overflow: visible; | ||
| + | margin: auto; | ||
text-align: center; | text-align: center; | ||
| − | |||
| − | |||
border-radius: 15px 50px 15px 50px; | border-radius: 15px 50px 15px 50px; | ||
| − | |||
} | } | ||
| − | |||
.scmedimgsize{ | .scmedimgsize{ | ||
position: relative; | position: relative; | ||
| Line 185: | Line 197: | ||
width:100% | width:100% | ||
} | } | ||
| − | |||
.w3-button:hover{ | .w3-button:hover{ | ||
color:#000!important; | color:#000!important; | ||
| Line 200: | Line 211: | ||
text-decoration:none; | text-decoration:none; | ||
text-align:center; | text-align:center; | ||
| − | cursor:pointer;white-space:nowrap | + | cursor:pointer; |
| + | white-space:nowrap; | ||
} | } | ||
/* MODAL */ | /* MODAL */ | ||
.imgsize:hover {opacity: 0.85;} | .imgsize:hover {opacity: 0.85;} | ||
| + | .imglab:hover {opacity: 0.85;} | ||
| + | .imglabh:hover {opacity: 0.85;} | ||
/* The Modal (background) */ | /* The Modal (background) */ | ||
.modal { | .modal { | ||
| Line 225: | Line 239: | ||
width: auto; | width: auto; | ||
max-width: 90%; | max-width: 90%; | ||
| + | border-radius: 15px 50px 15px 50px; | ||
| + | } | ||
| + | .modal-contenth { | ||
| + | margin: auto; | ||
| + | display: block; | ||
| + | width: auto; | ||
| + | max-height: 75%; | ||
border-radius: 15px 50px 15px 50px; | border-radius: 15px 50px 15px 50px; | ||
} | } | ||
/* Caption of Modal Image (Image Text) - Same Width as the Image */ | /* Caption of Modal Image (Image Text) - Same Width as the Image */ | ||
#caption { | #caption { | ||
| + | margin: auto; | ||
| + | display: block; | ||
| + | width: auto; | ||
| + | max-width: 90%; | ||
| + | text-align: center; | ||
| + | color: #ccc; | ||
| + | padding: 10px 0; | ||
| + | height: 150px; | ||
| + | } | ||
| + | #captionh { | ||
margin: auto; | margin: auto; | ||
display: block; | display: block; | ||
| Line 240: | Line 271: | ||
/* Add Animation - Zoom in the Modal */ | /* Add Animation - Zoom in the Modal */ | ||
.modal-content, #caption { | .modal-content, #caption { | ||
| + | -webkit-animation-name: zoom; | ||
| + | -webkit-animation-duration: 0.5s; | ||
| + | animation-name: zoom; | ||
| + | animation-duration: 0.5s; | ||
| + | } | ||
| + | .modal-contenth, #captionh { | ||
-webkit-animation-name: zoom; | -webkit-animation-name: zoom; | ||
-webkit-animation-duration: 0.5s; | -webkit-animation-duration: 0.5s; | ||
| Line 337: | Line 374: | ||
vertical-align: middle; | vertical-align: middle; | ||
text-align: center; | text-align: center; | ||
| + | max-width:999px; | ||
} | } | ||
#container { | #container { | ||
| Line 451: | Line 489: | ||
padding-right: 10px; | padding-right: 10px; | ||
| + | } | ||
| + | |||
| + | /* TABLEIZERS */ | ||
| + | table.tableizer-table { | ||
| + | color: #000; | ||
| + | //width: 640px; | ||
| + | border-collapse: collapse; | ||
| + | border-spacing: 0; | ||
| + | font-family:raleway; | ||
| + | max-width: 100%; | ||
| + | } | ||
| + | table.tableizer-table td, th { | ||
| + | border: 1px solid transparent; /* No more visible border */ | ||
| + | padding: 6px 20px; | ||
| + | transition: all 0.05s; /* Simple transition for hover effect */ | ||
| + | } | ||
| + | table.tableizer-table th { | ||
| + | background: #abf; /* Darken header a bit */ | ||
| + | font-weight: 700; | ||
| + | height: 50px; | ||
| + | } | ||
| + | table.tableizer-table td { | ||
| + | text-align: center; | ||
| + | } | ||
| + | table.tableizer-table tr:nth-child(even) td { background: #DDD; } | ||
| + | table.tableizer-table tr:nth-child(odd) td { background: #EEE; } | ||
| + | |||
| + | table.tableizer-table tr:hover td { | ||
| + | background-color: #CCF; | ||
} | } | ||
| Line 456: | Line 523: | ||
#primary_nav_wrap | #primary_nav_wrap | ||
{ | { | ||
| − | margin-top: 0px; | + | margin-top:0px; |
overflow-x: visible; | overflow-x: visible; | ||
/*position: relative;*/ | /*position: relative;*/ | ||
/*overflow: hidden;*/ | /*overflow: hidden;*/ | ||
| − | background-color: | + | background-color: #333; |
| − | position: | + | position: fixed; |
| − | top: | + | top: 17px; |
| + | height: 32px; | ||
width: 100%; | width: 100%; | ||
min-width: 1000px; | min-width: 1000px; | ||
| Line 473: | Line 541: | ||
margin:0; | margin:0; | ||
padding:0 0 0 20%; | padding:0 0 0 20%; | ||
| − | |||
} | } | ||
#primary_nav_wrap ul a | #primary_nav_wrap ul a | ||
| Line 494: | Line 561: | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
| − | |||
} | } | ||
#primary_nav_wrap ul li.current-menu-item | #primary_nav_wrap ul li.current-menu-item | ||
| Line 503: | Line 569: | ||
{ | { | ||
background-color:rgba(160, 192, 239, 0.25); | background-color:rgba(160, 192, 239, 0.25); | ||
| + | transition: all .1s ease-out; | ||
| + | cursor: pointer | ||
} | } | ||
#primary_nav_wrap ul ul | #primary_nav_wrap ul ul | ||
{ | { | ||
| − | |||
position:absolute; | position:absolute; | ||
top:100%; | top:100%; | ||
left:0; | left:0; | ||
background-color:rgba(15, 19, 25, 0.7); | background-color:rgba(15, 19, 25, 0.7); | ||
| − | padding:0 | + | padding:0; |
| + | transition: all .2s ease-out; | ||
| + | opacity: 0; /* for anim display:none; -> display:block; */ | ||
| + | visibility: hidden; | ||
| + | margin: -20px 0 0 0; | ||
} | } | ||
#primary_nav_wrap ul ul li | #primary_nav_wrap ul ul li | ||
{ | { | ||
float:none; | float:none; | ||
| − | width:200px | + | width:200px; |
} | } | ||
#primary_nav_wrap ul ul a | #primary_nav_wrap ul ul a | ||
{ | { | ||
line-height:120%; | line-height:120%; | ||
| − | padding:10px 15px | + | padding:10px 15px; |
} | } | ||
#primary_nav_wrap ul li:hover > ul | #primary_nav_wrap ul li:hover > ul | ||
{ | { | ||
| − | + | opacity: 1; | |
| + | visibility: visible; | ||
| + | margin: 0; | ||
| + | |||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.div-table { | .div-table { | ||
display: table; | display: table; | ||
| Line 555: | Line 624: | ||
| − | <!-- start of content -- | + | <!-------------- start of content ------------> |
| − | + | ||
| − | <div | + | <!--<div class="igem_2017_content_wrapper">--> |
| − | < | + | <nav> |
| − | + | <div id="primary_nav_wrap" style="z-index: 2000"> | |
| − | + | <ul> | |
| − | + | <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen">Home</a></li> | |
| − | + | <li><a onclick="">Project</a> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<ul> | <ul> | ||
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Description">Description</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Model">Model</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Design">Design</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Results">Results</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Notebook">Notebook</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/FutureResearch">Future Research</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Protocols">Protocols</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/InterLab">InterLab</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li><a onclick="">Human Practices</a> | |
| − | + | ||
| − | + | ||
<ul> | <ul> | ||
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Overview">Overview</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/HP/Silver">Human Practices (Silver)</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/HP/Gold_Integrated">Integrated (Gold)</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/Engagement">Public Engagement</a></li> | |
| − | </ul></li> | + | <li><a href="https://2017.igem.org/Team:Groningen/Applied_Design">Applied Design</a></li> |
| − | + | <li><a href="https://2017.igem.org/Team:Groningen/FutureOutlook">Future Outlook</a></li> | |
| − | </li> | + | <li><a href="https://2017.igem.org/Team:Groningen/Safety">Safety</a></li> |
| − | </ul> | + | </ul> |
| − | </div> | + | </li> |
| + | <li><a href="https://2017.igem.org/Team:Groningen/Parts">Parts</a></li> | ||
| + | <li><a href="https://2017.igem.org/Team:Groningen/Collaborations">Collaborations</a></li> | ||
| + | <li><a onclick="">Team</a> | ||
| + | <ul> | ||
| + | <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Team">Team Members</a></li> | ||
| + | <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Achievements">Achievements</a></li> | ||
| + | <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Attributions">Attributions</a></li> | ||
| + | <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Fun">Fun Activities</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="https://2017.igem.org/Team:Groningen/Sponsors">Sponsors</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </nav> | ||
| + | <!------------- toggle mobile menu -----------> | ||
| + | <script> | ||
| + | function mobnavtoggle() { | ||
| + | document.getElementByID("primary_nav_wrap").classList.toggle("mobnav"); | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | <style> | ||
| + | .mobicon {display:none;} | ||
| + | </style> | ||
| + | |||
| + | <!-------------- The Modal ----------------> | ||
| − | |||
<div id="myModal" class="modal"> | <div id="myModal" class="modal"> | ||
<img class="modal-content" id="img01"> | <img class="modal-content" id="img01"> | ||
<div id="caption"></div> | <div id="caption"></div> | ||
</div> | </div> | ||
| + | |||
| + | <div id="myModalh" class="modal"> | ||
| + | <img class="modal-contenth" id="img01h"> | ||
| + | <div id="captionh"></div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <!------------ header slider ----------------> | ||
| + | |||
| + | <style> | ||
| + | .mySlides {display:none} | ||
| + | .slideshow-container { | ||
| + | position: relative; | ||
| + | margin: auto; | ||
| + | } | ||
| + | .header_title { | ||
| + | color: green; //#00a94d; | ||
| + | } | ||
| + | .slideshow-container img { | ||
| + | filter: blur(3px); | ||
| + | width:100%; | ||
| + | height:350px; | ||
| + | object-fit: cover; | ||
| + | } | ||
| + | _:-ms-fullscreen, :root .ie11up { /* fucking piece of shit m$ */ | ||
| + | .slideshow-container img { | ||
| + | background-size: cover; | ||
| + | background-position: center center; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { | ||
| + | .slideshow-container img { | ||
| + | background-size: cover; | ||
| + | background-position: center center; | ||
| + | } | ||
| + | } | ||
| + | /* Caption text */ | ||
| + | .slidetext { | ||
| + | position: absolute; | ||
| + | bottom: 275px; | ||
| + | height:50px; | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
| + | } | ||
| + | /* The dots/bullets/indicators */ | ||
| + | .dot { | ||
| + | height: 15px; | ||
| + | width: 15px; | ||
| + | margin: 0 2px; | ||
| + | background-color: #bbb; | ||
| + | border-radius: 50%; | ||
| + | display: inline-block; | ||
| + | transition: background-color 0.6s ease; | ||
| + | } | ||
| + | .activeslide { | ||
| + | background-color: #717171; | ||
| + | } | ||
| + | /* Fading animation */ | ||
| + | .fade { | ||
| + | -webkit-animation-name: fade; | ||
| + | -webkit-animation-duration: 1.5s; | ||
| + | animation-name: fade; | ||
| + | animation-duration: 1.5s; | ||
| + | } | ||
| + | @-webkit-keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | @keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | /* On smaller screens, decrease text size */ | ||
| + | @media only screen and (max-width: 300px) { | ||
| + | .slidetext {font-size: 11px} | ||
| + | } | ||
| + | /* remove old header bg shitstyle */ | ||
| + | .header { | ||
| + | display: none; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <div class="slideshow-container"> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/0/03/2017-10-14_19.37.13.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/a/ae/2017-10-17_14.37.13.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/4/43/2017-10-17_14.37.07.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/b/bd/2017-10-14_19.38.08.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/f/ff/2017-10-14_19.37.42.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/7/73/20171027_123215.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/f/fb/20171027_123230.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/0/06/20171027_123249.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | <div class="mySlides fade"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/a/a0/20171101_225544.jpg" style="width:100%"> | ||
| + | <div class="slidetext"><h2 class="header_title"></h2></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | <div style="text-align:center"> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | |||
| + | $( document ).ready(function() { | ||
| + | stringPathName = window.location.pathname | ||
| + | switch (stringPathName) { | ||
| + | case "/Team:Groningen": | ||
| + | HTit = "IMPACT"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Description": | ||
| + | HTit = "DESCRIPTION"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Model": | ||
| + | HTit = "MODEL"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Design": | ||
| + | HTit = "DESIGN"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Results": | ||
| + | HTit = "RESULTS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Notebook": | ||
| + | HTit = "NOTEBOOK"; | ||
| + | break; | ||
| + | case "/Team:Groningen/FutureResearch": | ||
| + | HTit = "FUTURE RESEARCH"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Protocols": | ||
| + | HTit = "PROTOCOLS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/InterLab": | ||
| + | HTit = "INTERLAB"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Overview": | ||
| + | HTit = "OVERVIEW"; | ||
| + | break; | ||
| + | case "/Team:Groningen/HP/Silver": | ||
| + | HTit = "HUMAN PRACTICES"; | ||
| + | break; | ||
| + | case "/Team:Groningen/HP/Gold_Integrated": | ||
| + | HTit = "INTEGRATED"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Engagement": | ||
| + | HTit = "ENGAGEMENT"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Applied_Design": | ||
| + | HTit = "APPLIED DESIGN"; | ||
| + | break; | ||
| + | case "/Team:Groningen/FutureOutlook": | ||
| + | HTit = "FUTURE OUTLOOK"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Safety": | ||
| + | HTit = "SAFETY"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Parts": | ||
| + | HTit = "PARTS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Collaborations": | ||
| + | HTit = "COLLABORATIONS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Team": | ||
| + | HTit = "TEAM MEMBERS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Achievements": | ||
| + | HTit = "ACHIEVEMENTS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Attributions": | ||
| + | HTit = "ATTRIBUTIONS"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Fun": | ||
| + | HTit = "FUN ACTIVITIES"; | ||
| + | break; | ||
| + | case "/Team:Groningen/Sponsors": | ||
| + | HTit = "SPONSORS"; | ||
| + | break; | ||
| + | default: | ||
| + | HTit = "Sudazima"; | ||
| + | break; | ||
| + | } | ||
| + | var elements = document.getElementsByClassName("header_title"); | ||
| + | for(var i = 0, length = elements.length; i < length; i++) { | ||
| + | elements[i].innerHTML = HTit; | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | |||
| + | function showSlides() { | ||
| + | var i; | ||
| + | var slides = document.getElementsByClassName("mySlides"); | ||
| + | var dots = document.getElementsByClassName("dot"); | ||
| + | for (i = 0; i < slides.length; i++) { | ||
| + | slides[i].style.display = "none"; | ||
| + | } | ||
| + | slideIndex++; | ||
| + | if (slideIndex > slides.length) {slideIndex = 1} | ||
| + | for (i = 0; i < dots.length; i++) { | ||
| + | dots[i].className = dots[i].className.replace(" activeslide", ""); | ||
| + | } | ||
| + | slides[slideIndex-1].style.display = "block"; | ||
| + | dots[slideIndex-1].className += " activeslide"; | ||
| + | setTimeout(showSlides, 6000); // Change image every 6 seconds | ||
| + | } | ||
| + | var slideIndex = Math.floor((Math.random() * 9) + 1); | ||
| + | showSlides(); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | <!-------- banner image map -----------> | ||
| + | |||
| + | <map name="imagemap_sponsors" id="imagemapbanner"> | ||
| + | <area href="http://www.kivi.nl/" shape="rect" coords="41,30,516,315" style="outline:none;" target="_blank" /> | ||
| + | <area href="https://www.gatc-biotech.com/en/index.html" shape="rect" coords="34,464,517,716" style="outline:none;" target="_blank" /> | ||
| + | <area href="https://www.baseclear.com/" shape="rect" coords="30,334,535,469" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rivm.nl/" shape="rect" coords="583,32,1251,343" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/about-us/support-the-university/groninger-university-fund/" shape="rect" coords="585,370,1436,429" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.corbion.com/" shape="rect" coords="557,469,913,693" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.dsm.com/" shape="rect" coords="927,454,1441,722" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://ubboemmiusfonds.nl/" shape="rect" coords="1274,28,1438,358" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/sciencelinx/" shape="rect" coords="1556,18,1903,204" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/gbb/" shape="rect" coords="1491,234,1881,420" style="outline:none;" target="_blank" /> | ||
| + | <area href="https://www.arla.com/" shape="rect" coords="1476,419,1896,711" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/enteg/" shape="rect" coords="1973,230,2327,384" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.backerfoundation.nl/" shape="rect" coords="1974,22,2328,226" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.qiagen.com/" shape="rect" coords="1959,423,2313,733" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.be-basic.org/" shape="rect" coords="2382,373,2736,729" style="outline:none;" target="_blank" /> | ||
| + | <area href="https://www.eppendorf.com/" shape="rect" coords="2753,416,3334,550" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/gbb/maxgruber/information/the-max-gruber-foundation" shape="rect" coords="2755,551,3336,709" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/stratingh/" shape="rect" coords="3348,407,3776,687" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/" shape="rect" coords="2455,32,2966,192" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/fse/" shape="rect" coords="2985,47,3423,178" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/jbi/" shape="rect" coords="2461,231,3062,360" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/alice/" shape="rect" coords="3063,232,3528,358" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://www.rug.nl/research/zernike/" shape="rect" coords="3385,60,3790,182" style="outline:none;" target="_blank" /> | ||
| + | <area href="http://cgmartini.nl/index.php" shape="rect" coords="3530,222,3830,348" style="outline:none;" target="_blank" /> | ||
| + | </map> | ||
| + | |||
| + | <script> | ||
| + | $(document).ready(function() { | ||
| + | var origWidth = 3850; | ||
| + | var origHeight = 770; | ||
| + | var banner = $('#bannerimg'); | ||
| + | var map = $('map[name^="imagemap_sponsors"]'); | ||
| + | var newWidth = banner.innerWidth(); | ||
| + | var newHeight = banner.innerHeight(); | ||
| + | var dx = newWidth / origWidth; | ||
| + | var dy = newHeight / origHeight; | ||
| + | map.find('area').each(function() { | ||
| + | var coords = $(this).attr('coords').split(','); | ||
| + | coords[0] = parseFloat(coords[0]) * dx; | ||
| + | coords[1] = parseFloat(coords[1]) * dy; | ||
| + | coords[2] = parseFloat(coords[2]) * dx; | ||
| + | coords[3] = parseFloat(coords[3]) * dy; | ||
| + | $(this).attr('coords', coords.join(',')); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <!-------------- scrollspy -------------> | ||
| + | |||
| + | <style> | ||
| + | |||
| + | #myScrollspy | ||
| + | { | ||
| + | top:400px; | ||
| + | background-color: #fff; | ||
| + | position: absolute; | ||
| + | width: 230px; | ||
| + | display:block; | ||
| + | //height: 100%; | ||
| + | margin-left: -270px; //main-col 750px | ||
| + | } | ||
| + | #myScrollspy ul | ||
| + | { | ||
| + | list-style:none; | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | } | ||
| + | #myScrollspy ul a | ||
| + | { | ||
| + | display:block; //block lenght a | ||
| + | max-width: 230px; | ||
| + | z-index: 2000; | ||
| + | width:100%; | ||
| + | height:100%; | ||
| + | |||
| + | color: black; | ||
| + | text-decoration:none; | ||
| + | font-weight:600; | ||
| + | font-size:14px; | ||
| + | line-height:30px; | ||
| + | text-align:left; | ||
| + | padding: 2px 0px 2px 20px; | ||
| + | } | ||
| + | #myScrollspy ul li | ||
| + | { | ||
| + | //display:block; | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | } | ||
| + | |||
| + | #myScrollspy ul li.active { | ||
| + | background:green; | ||
| + | transition: all .1s ease-out; | ||
| + | } | ||
| + | #myScrollspy ul li.active:hover { | ||
| + | background-color:rgba(120, 255, 180, 0.5); | ||
| + | transition: all .1s ease-out; | ||
| + | } | ||
| + | #myScrollspy ul li:hover { | ||
| + | background-color:rgba(160, 192, 239, 0.5); | ||
| + | transition: all .1s ease-out; | ||
| + | } | ||
| + | |||
| + | #myScrollspy.sticky { | ||
| + | position: fixed; | ||
| + | top: 48px; | ||
| + | } | ||
| + | |||
| + | div.scrollcol { | ||
| + | width:750px; | ||
| + | } | ||
| + | div.marginsnav { | ||
| + | margin-left:250px; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <!-- fucking lol piece of shit igem site --> | ||
| + | <script src="https://static.igem.org/mediawiki/2017/6/60/Scrollspy.txt"></script> | ||
| + | |||
| + | <script> | ||
| + | // Add scrollspy to document | ||
| + | //$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:100}); }); | ||
| + | |||
| + | // Add smooth scrolling on all links inside the navbar | ||
| + | |||
| + | /* | ||
| + | var animateScroll = function(target, offset, speed) { | ||
| + | var is = $(document).scrollTop(); | ||
| + | var must = parseInt($(target).offset().top) + offset; | ||
| + | if (typeof speed == 'undefined') { | ||
| + | speed = Math.sqrt(Math.pow(is - must, 2)) / 75 | ||
| + | } | ||
| + | var setTo; | ||
| + | if (is < must) { | ||
| + | setTo = is + speed; | ||
| + | if (setTo > must) { | ||
| + | setTo = must; | ||
| + | } | ||
| + | } else if (is > must) { | ||
| + | setTo = is - speed; | ||
| + | if (setTo < must) { | ||
| + | setTo = must; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | $(document).scrollTop(setTo); | ||
| + | if (setTo != must) { | ||
| + | setTimeout(function() {animateScroll(target, offset, speed);}, 10); | ||
| + | } | ||
| + | }*/ | ||
| + | |||
| + | var jump=function(e) | ||
| + | { | ||
| + | if (e){ | ||
| + | e.preventDefault(); | ||
| + | |||
| + | //$("body").scrollspy({target: "#myScrollspy", offset:100}); legion says this is bad nad dumb | ||
| + | |||
| + | var target = $(this).attr("href"); | ||
| + | }else{ | ||
| + | var target = location.hash; | ||
| + | } | ||
| + | |||
| + | |||
| + | console.log(target); | ||
| + | $('html,body').animate ( | ||
| + | { | ||
| + | scrollTop: $(target).offset().top - 90 | ||
| + | },1000 ); | ||
| + | |||
| + | //animateScroll(target, -90); | ||
| + | |||
| + | } | ||
| + | |||
| + | if ('scrollRestoration' in history) { | ||
| + | history.scrollRestoration = 'manual'; | ||
| + | } | ||
| + | |||
| + | $('html, body').hide(); | ||
| + | |||
| + | $(document).ready(function() { | ||
| + | $('a[href^="#snav"]').bind("click", jump); | ||
| + | |||
| + | if (location.hash){ | ||
| + | setTimeout(function(){ | ||
| + | $('html, body').scrollTop(0).show(); | ||
| + | $("body").scrollspy({target: "#myScrollspy", offset:100}); | ||
| + | jump(); | ||
| + | }, 0); | ||
| + | }else{ | ||
| + | $('html, body').show(); | ||
| + | $("body").scrollspy({target: "#myScrollspy", offset:100}); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | <!-- PIECE OF SHIT POGRAMM BY GREEDY NEW WORLD ORDER M$ --> | ||
| + | |||
| + | <script> | ||
| + | // Get IE or Edge browser version | ||
| + | var versionshitie = detectIE(); | ||
| + | //document.getElementById('result').innerHTML = versionshitie; | ||
| + | |||
| + | function detectIE() { | ||
| + | var ua = window.navigator.userAgent; | ||
| + | var msie = ua.indexOf('MSIE '); | ||
| + | if (msie > 0) { | ||
| + | return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); | ||
| + | } | ||
| + | |||
| + | var trident = ua.indexOf('Trident/'); | ||
| + | if (trident > 0) { | ||
| + | var rv = ua.indexOf('rv:'); | ||
| + | return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); | ||
| + | } | ||
| + | var edge = ua.indexOf('Edge/'); | ||
| + | if (edge > 0) { | ||
| + | return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); | ||
| + | } | ||
| + | return false; | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | |||
| + | </html> | ||
Latest revision as of 03:01, 2 November 2017
