Difference between revisions of "Template:Groningen"
| (157 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(); | ||
| 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 85: | Line 87: | ||
position: relative; | position: relative; | ||
| − | height: auto; | + | //height: auto; |
| − | min-height: 100%; | + | //min-height: 100%; |
} | } | ||
| Line 149: | 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 |
} | } | ||
| Line 172: | Line 174: | ||
} | } | ||
.imglabh { | .imglabh { | ||
| − | display: block; | + | /*display: block;*/ |
| − | max-width: | + | max-width: 100%; |
| + | overflow: visible; | ||
margin: auto; | margin: auto; | ||
text-align: center; | text-align: center; | ||
| Line 208: | Line 211: | ||
text-decoration:none; | text-decoration:none; | ||
text-align:center; | text-align:center; | ||
| − | cursor:pointer;white-space:nowrap | + | cursor:pointer; |
| + | white-space:nowrap; | ||
} | } | ||
| Line 485: | 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 537: | Line 570: | ||
background-color:rgba(160, 192, 239, 0.25); | background-color:rgba(160, 192, 239, 0.25); | ||
transition: all .1s ease-out; | 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%; | ||
| Line 546: | Line 579: | ||
background-color:rgba(15, 19, 25, 0.7); | background-color:rgba(15, 19, 25, 0.7); | ||
padding:0; | padding:0; | ||
| − | transition: all . | + | transition: all .2s ease-out; |
| − | opacity: 0 | + | 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 | ||
| Line 553: | Line 588: | ||
float:none; | float:none; | ||
width:200px; | width:200px; | ||
| − | |||
| − | |||
} | } | ||
#primary_nav_wrap ul ul a | #primary_nav_wrap ul ul a | ||
| Line 560: | Line 593: | ||
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; | opacity: 1; | ||
| + | visibility: visible; | ||
| + | margin: 0; | ||
| + | |||
} | } | ||
| Line 591: | Line 624: | ||
| − | <!-- start of content --> | + | <!-------------- start of content ------------> |
<!--<div class="igem_2017_content_wrapper">--> | <!--<div class="igem_2017_content_wrapper">--> | ||
<nav> | <nav> | ||
| − | <div id="primary_nav_wrap" style="z-index: 2000"> | + | <div id="primary_nav_wrap" style="z-index: 2000"> |
| − | <ul | + | <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> | |
| − | </ul> | + | <li><a href="https://2017.igem.org/Team:Groningen/Safety">Safety</a></li> |
| − | </div> | + | </ul> |
| + | </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> | </nav> | ||
| − | <!-- The Modal --> | + | <!------------- 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"> | ||
| Line 648: | Line 694: | ||
| − | <!-- header slider --> | + | <!------------ header slider ----------------> |
<style> | <style> | ||
| Line 657: | Line 703: | ||
} | } | ||
.header_title { | .header_title { | ||
| − | color: #00a94d; | + | color: green; //#00a94d; |
} | } | ||
.slideshow-container img { | .slideshow-container img { | ||
| Line 664: | Line 710: | ||
height:350px; | height:350px; | ||
object-fit: cover; | 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 */ | /* Caption text */ | ||
| Line 742: | Line 801: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<img src="https://static.igem.org/mediawiki/2017/0/06/20171027_123249.jpg" style="width:100%"> | <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 class="slidetext"><h2 class="header_title"></h2></div> | ||
</div> | </div> | ||
| Line 749: | Line 812: | ||
<div style="text-align:center"> | <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> | ||
| Line 765: | Line 829: | ||
switch (stringPathName) { | switch (stringPathName) { | ||
case "/Team:Groningen": | case "/Team:Groningen": | ||
| − | HTit = " | + | HTit = "IMPACT"; |
break; | break; | ||
case "/Team:Groningen/Description": | case "/Team:Groningen/Description": | ||
| Line 833: | Line 897: | ||
HTit = "SPONSORS"; | HTit = "SPONSORS"; | ||
break; | break; | ||
| − | + | default: | |
HTit = "Sudazima"; | HTit = "Sudazima"; | ||
break; | break; | ||
| Line 860: | Line 924: | ||
setTimeout(showSlides, 6000); // Change image every 6 seconds | setTimeout(showSlides, 6000); // Change image every 6 seconds | ||
} | } | ||
| − | var slideIndex = Math.floor((Math.random() * | + | var slideIndex = Math.floor((Math.random() * 9) + 1); |
showSlides(); | showSlides(); | ||
</script> | </script> | ||
| − | <!-- banner image map--> | + | <!-------- banner image map -----------> |
<map name="imagemap_sponsors" id="imagemapbanner"> | <map name="imagemap_sponsors" id="imagemapbanner"> | ||
| Line 915: | Line 979: | ||
</script> | </script> | ||
| − | <!-- scrollspy --> | + | <!-------------- scrollspy -------------> |
<style> | <style> | ||
| + | |||
#myScrollspy | #myScrollspy | ||
{ | { | ||
| − | + | top:400px; | |
| − | + | background-color: #fff; | |
| − | background-color: # | + | position: absolute; |
| − | position: | + | |
| − | + | ||
width: 230px; | width: 230px; | ||
| + | display:block; | ||
| + | //height: 100%; | ||
| + | margin-left: -270px; //main-col 750px | ||
} | } | ||
#myScrollspy ul | #myScrollspy ul | ||
{ | { | ||
list-style:none; | list-style:none; | ||
| − | |||
| − | |||
margin:0; | margin:0; | ||
| + | padding:0; | ||
} | } | ||
#myScrollspy ul a | #myScrollspy ul a | ||
{ | { | ||
| − | display:block; | + | display:block; //block lenght a |
| − | + | max-width: 230px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
z-index: 2000; | z-index: 2000; | ||
width:100%; | width:100%; | ||
height: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 | #myScrollspy ul li | ||
{ | { | ||
| − | + | //display:block; | |
| − | + | ||
| − | + | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
| − | |||
| − | |||
} | } | ||
| − | #myScrollspy ul li.active | + | |
| − | {background: | + | #myScrollspy ul li.active { |
| − | #myScrollspy ul li.active:hover | + | background:green; |
| − | {background-color:rgba(255, | + | transition: all .1s ease-out; |
| − | #myScrollspy ul li:hover | + | } |
| − | {background-color:rgba(160, 192, 239, 0. | + | #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> | </style> | ||
| Line 971: | Line 1,053: | ||
<script> | <script> | ||
// Add scrollspy to document | // Add scrollspy to document | ||
| − | $( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset: | + | //$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:100}); }); |
| + | |||
// Add smooth scrolling on all links inside the navbar | // 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> | </script> | ||
</html> | </html> | ||
Latest revision as of 03:01, 2 November 2017
