Difference between revisions of "Template:Groningen"

 
(185 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; // hide vertical
+
     //overflow-y: hidden; hide vertical
−
     overflow-x: hidden; // hide horizontal
+
     //overflow-x: hidden; hide horizontal
 
}
 
}
  
Line 172: Line 174:
 
}
 
}
 
.imglabh {
 
.imglabh {
−
     display: block;
+
     /*display: block;*/
−
     max-width: 70%;
+
     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 370: Line 374:
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     text-align: center;
 
     text-align: center;
 +
    max-width:999px;
 
}
 
}
 
#container {  
 
#container {  
Line 484: 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 507: 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 528: 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 537: 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
 
{
 
{
−
    display:none;
 
 
     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
 
{
 
{
−
     display:block
+
     opacity: 1;
 +
    visibility: visible;
 +
    margin: 0;
 +
 
 
}
 
}
  
−
#myScrollspy
 
−
{
 
−
    margin-top:30px;
 
−
    overflow-x: visible;
 
−
    background-color: #333;
 
−
    position: fixed;
 
−
    height: 100%;
 
−
    width: 230px;
 
−
}
 
−
#myScrollspy ul
 
−
{
 
−
    list-style:none;
 
−
    position:relative;
 
−
    float:left;
 
−
    margin:0;
 
−
}
 
−
#myScrollspy ul a
 
−
{
 
−
    display:block;
 
−
    color: white;
 
−
    position:relative;
 
−
    text-decoration:none;
 
−
    font-weight:700;
 
−
    font-size:15px;
 
−
    line-height:32px;
 
−
    padding:0 15px;
 
−
    z-index: 2000;
 
−
    width:100%;
 
−
    height:100%;
 
−
}
 
−
#myScrollspy ul li
 
−
{
 
−
    z-index: 2000;
 
−
    position:relative;
 
−
    float:left;
 
−
    margin:0;
 
−
    padding:0;
 
−
    width:100%;
 
−
    height:100%;
 
−
}
 
−
#myScrollspy ul li.active
 
−
{background:red;}
 
−
#myScrollspy ul li.active:hover
 
−
{background-color:rgba(255, 170, 170, 0.25);}
 
−
#myScrollspy ul li:hover
 
−
{background-color:rgba(160, 192, 239, 0.25);}
 
  
 
.div-table {
 
.div-table {
Line 630: 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><a href="https://2017.igem.org/Team:Groningen">Home</a></li>
+
   <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
−
  <li style=""><a href="https://2017.igem.org/Team:Groningen/Description">Project</a>
+
  <li><a href="https://2017.igem.org/Team:Groningen">Home</a></li>
−
   <ul>
+
  <li><a onclick="">Project</a>
−
      <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 href="https://2017.igem.org/Team:Groningen/Overview">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/Description">Description</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/Model">Model</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/Design">Design</a></li>
−
      <li><a href="https://2017.igem.org/Team:Groningen/Engagement">Public Engagement</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Results">Results</a></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/Notebook">Notebook</a></li>
−
      <li><a href="https://2017.igem.org/Team:Groningen/FutureOutlook">Future Outlook</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/Safety">Safety</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Protocols">Protocols</a></li>
−
    </ul></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/InterLab">InterLab</a></li>
−
  <li><a href="https://2017.igem.org/Team:Groningen/Parts">Parts</a>
+
    </ul>
−
  </li>
+
  </li>
−
  <li><a href="https://2017.igem.org/Team:Groningen/Collaborations">Collaborations</a>
+
  <li><a onclick="">Human Practices</a>
−
  </li>
+
−
  <li><a href="https://2017.igem.org/Team:Groningen/Team">Team</a>
+
 
     <ul>
 
     <ul>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Team">Team Members</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Overview">Overview</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Achievements">Achievements</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Silver">Human Practices (Silver)</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Attributions">Attributions</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Gold_Integrated">Integrated (Gold)</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Fun">Fun Activities</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/Sponsors">Sponsors</a>
+
    <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>
 
</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 688: Line 694:
  
  
−
<!-- header slider -->
+
<!------------ header slider ---------------->
  
 
<style>
 
<style>
Line 697: Line 703:
 
}
 
}
 
.header_title {
 
.header_title {
−
   color: #00a94d;
+
   color: green; //#00a94d;
 
}
 
}
 
.slideshow-container img {
 
.slideshow-container img {
Line 704: 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 */
 
.slidetext {
 
.slidetext {
−
  /*color: #111;*/
 
−
  /*font-size: 15px;*/
 
−
  padding: 8px 12px;
 
 
   position: absolute;
 
   position: absolute;
−
   bottom: 8px;
+
   bottom: 275px;
 +
  height:50px;
 
   width: 100%;
 
   width: 100%;
 
   text-align: center;
 
   text-align: center;
Line 746: Line 763:
 
@media only screen and (max-width: 300px) {
 
@media only screen and (max-width: 300px) {
 
   .slidetext {font-size: 11px}
 
   .slidetext {font-size: 11px}
 +
}
 +
/* remove old header bg shitstyle */
 +
.header {
 +
display: none;
 
}
 
}
 
</style>
 
</style>
Line 752: Line 773:
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/0/03/2017-10-14_19.37.13.jpg" style="width:100%">
 
   <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">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/a/ae/2017-10-17_14.37.13.jpg" style="width:100%">
 
   <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">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/4/43/2017-10-17_14.37.07.jpg" style="width:100%">
 
   <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">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/b/bd/2017-10-14_19.38.08.jpg" style="width:100%">
 
   <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">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/f/ff/2017-10-14_19.37.42.jpg" style="width:100%">
 
   <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">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/7/73/20171027_123215.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2017/7/73/20171027_123215.jpg" style="width:100%">
−
   <div class="slidetext"><h2 class="header_title">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/f/fb/20171027_123230.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2017/f/fb/20171027_123230.jpg" style="width:100%">
−
   <div class="slidetext"><h2 class="header_title">COLLABORATIONS</h2></div>
+
   <div class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
 
<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">COLLABORATIONS</h2></div>
+
   <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>
 
</div>
 
</div>
Line 787: 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 796: Line 822:
 
   <span class="dot"></span>
 
   <span class="dot"></span>
 
</div>
 
</div>
−
 
−
<div id="demo">demo defautl</div>
 
  
 
<script>
 
<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;
 +
}
 +
});
  
  
Line 819: 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 874: Line 979:
 
</script>
 
</script>
  
−
<!-- scrollspy -->
+
<!-------------- 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 src="https://static.igem.org/mediawiki/2017/6/60/Scrollspy.txt"></script> <!-- fucking lol piece of shit igem site -->
 
 
<script>
 
<script>
 
// Add scrollspy to document
 
// Add scrollspy to document
−
$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:200}); });
+
//$( 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
−
$('body').on('click','a[href^="#nav"]',function(event){
+
 
−
     event.preventDefault();
+
/*
−
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
+
var animateScroll = function(target, offset, speed) {
−
    //change this number to create the additional off set       
+
    var is = $(document).scrollTop();
−
    var customoffset = 75
+
    var must = parseInt($(target).offset().top) + offset;
−
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
+
    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