Difference between revisions of "Template:Groningen"

 
(118 intermediate revisions by 3 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 9: 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 73: Line 73:
 
/* START GENERAL STYLES */
 
/* START GENERAL STYLES */
 
html {
 
html {
−
     height: 100%;
+
     //height: 100%;
 
     width: 100%;
 
     width: 100%;
 
     margin: 0;
 
     margin: 0;
Line 87: Line 87:
  
 
     position: relative;
 
     position: relative;
−
     height: auto;
+
     //height: auto;
−
     min-height: 100%;
+
     //min-height: 100%;
  
 
}
 
}
Line 151: Line 151:
 
     height:1000px;
 
     height:1000px;
 
     width: 1000px;
 
     width: 1000px;
−
     overflow: auto;  
+
     //overflow: auto;  
−
     overflow-y: hidden; // hide vertical
+
     //overflow-y: hidden; hide vertical
−
     overflow-x: hidden; // hide horizontal
+
     //overflow-x: hidden; hide horizontal
 
}
 
}
  
Line 211: 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 488: 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 540: 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
Line 568: Line 599:
 
     visibility: visible;
 
     visibility: visible;
 
     margin: 0;
 
     margin: 0;
 +
 
}
 
}
  
Line 592: Line 624:
  
  
−
<!-- start of content -->
+
<!-------------- start of content ------------>
  
 
<!--<div class="igem_2017_content_wrapper">-->
 
<!--<div class="igem_2017_content_wrapper">-->
Line 600: Line 632:
 
   <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
 
   <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 href="https://2017.igem.org/Team:Groningen">Home</a></li>
−
   <li style=""><a href="https://2017.igem.org/Team:Groningen/Description">Project</a>
+
   <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/Description">Description</a></li>
Line 612: Line 644:
 
     </ul>
 
     </ul>
 
   </li>
 
   </li>
−
   <li><a href="https://2017.igem.org/Team:Groningen/Overview">Human Practices</a>
+
   <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/Overview">Overview</a></li>
Line 625: Line 657:
 
   <li><a href="https://2017.igem.org/Team:Groningen/Parts">Parts</a></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 href="https://2017.igem.org/Team:Groningen/Collaborations">Collaborations</a></li>
−
   <li><a href="https://2017.igem.org/Team:Groningen/Team">Team</a>
+
   <li><a onclick="">Team</a>
 
     <ul>
 
     <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/Team">Team Members</a></li>
Line 638: Line 670:
 
</nav>
 
</nav>
  
−
<!-- toggle mobile menu -->
+
<!------------- toggle mobile menu ----------->
 
<script>
 
<script>
 
function mobnavtoggle() {
 
function mobnavtoggle() {
−
  document.getElementByID("primary_nav_wrap")[0].classList.toggle("mobnav");
+
  document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
 
}
 
}
 
</script>
 
</script>
Line 649: Line 681:
 
</style>
 
</style>
  
−
<!-- The Modal -->
+
<!-------------- The Modal ---------------->
  
 
<div id="myModal" class="modal">
 
<div id="myModal" class="modal">
Line 662: Line 694:
  
  
−
<!-- header slider -->
+
<!------------ header slider ---------------->
  
 
<style>
 
<style>
Line 671: Line 703:
 
}
 
}
 
.header_title {
 
.header_title {
−
   color: #00a94d;
+
   color: green; //#00a94d;
 
}
 
}
 
.slideshow-container img {
 
.slideshow-container img {
Line 678: 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 756: 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 763: 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 779: Line 829:
 
switch (stringPathName) {
 
switch (stringPathName) {
 
     case "/Team:Groningen":
 
     case "/Team:Groningen":
−
         HTit = "HOME";
+
         HTit = "IMPACT";
 
         break;
 
         break;
 
     case "/Team:Groningen/Description":
 
     case "/Team:Groningen/Description":
Line 874: Line 924:
 
     setTimeout(showSlides, 6000); // Change image every 6 seconds
 
     setTimeout(showSlides, 6000); // Change image every 6 seconds
 
}
 
}
−
var slideIndex = Math.floor((Math.random() * 8) + 1);
+
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 929: Line 979:
 
</script>
 
</script>
  
−
<!-- scrollspy -->
+
<!-------------- scrollspy ------------->
  
 
<style>
 
<style>
 +
 
#myScrollspy
 
#myScrollspy
 
{
 
{
−
     margin-top:-372px;
+
     top:400px;
−
    overflow-x: visible;
+
     background-color: #fff;
−
     background-color: #333;
+
     position: absolute;
−
     position: fixed;
+
−
    height: 100%;
+
 
     width: 230px;
 
     width: 230px;
 +
    display:block;
 +
    //height: 100%;
 +
    margin-left: -270px; //main-col 750px
 
}
 
}
 
#myScrollspy ul
 
#myScrollspy ul
 
{
 
{
 
     list-style:none;
 
     list-style:none;
−
    position:relative;
 
−
    float:left;
 
 
     margin:0;
 
     margin:0;
 +
    padding:0;
 
}
 
}
 
#myScrollspy ul a
 
#myScrollspy ul a
 
{
 
{
−
     display:block;
+
     display:block; //block lenght a
−
     color: white;
+
     max-width: 230px;
−
    position:relative;
+
−
    text-decoration:none;
+
−
    font-weight:700;
+
−
    font-size:15px;
+
−
    line-height:32px;
+
−
    padding:0 15px;
+
 
     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
 
{
 
{
−
     z-index: 2000;
+
     //display:block;
−
    position:relative;
+
−
    float:left;
+
 
     margin:0;
 
     margin:0;
 
     padding:0;
 
     padding:0;
−
    width:100%;
 
−
    height:100%;
 
 
}
 
}
−
#myScrollspy ul li.active
+
 
−
{background:red;}
+
#myScrollspy ul li.active {
−
#myScrollspy ul li.active:hover
+
  background:green;
−
{background-color:rgba(255, 170, 170, 0.25);}
+
  transition: all .1s ease-out;
−
#myScrollspy ul li:hover
+
}
−
{background-color:rgba(160, 192, 239, 0.25);}
+
#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 989: Line 1,057:
 
// Add smooth scrolling on all links inside the navbar
 
// Add smooth scrolling on all links inside the navbar
  
−
var jump=function(e) {
+
/*
−
if (e){
+
var animateScroll = function(target, offset, speed) {
−
  e.preventDefault();
+
    var is = $(document).scrollTop();
−
  //$("body").scrollspy({target: "#myScrollspy", offset:100}); legion says this is bad and dumb
+
    var must = parseInt($(target).offset().top) + offset;
−
  var target = $(this).attr("href");
+
    if (typeof speed == 'undefined') {
−
}
+
        speed = Math.sqrt(Math.pow(is - must, 2)) / 75
−
else {
+
    }
−
  var target = location.hash;
+
    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);
  
−
$('html,body').animate( { scrollTop: $(target).offset().top - 90 },1000,function() { location.hash = target; });
 
 
}
 
}
 +
 +
if ('scrollRestoration' in history) {
 +
  history.scrollRestoration = 'manual';
 +
}
  
 
$('html, body').hide();
 
$('html, body').hide();
Line 1,007: Line 1,115:
 
  $('a[href^="#snav"]').bind("click", jump);
 
  $('a[href^="#snav"]').bind("click", jump);
  
−
if (location.hash){
+
    if (location.hash){
−
  setTimeout(function(){
+
        setTimeout(function(){
−
  $('html, body').scrollTop(0).show();
+
            $('html, body').scrollTop(0).show();
−
  $("body").scrollspy({target: "#myScrollspy", offset:100}); jump(); }, 0);
+
            $("body").scrollspy({target: "#myScrollspy", offset:100});
−
  }
+
            jump();
−
  else {
+
        }, 0);
−
  $('html, body').show();
+
    }else{
−
  $("body").scrollspy({target: "#myScrollspy", offset:100});
+
        $('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