Difference between revisions of "Team:LINKS China/Human Practices"

Line 185: Line 185:
 
<div id="sidebar_and_texts">
 
<div id="sidebar_and_texts">
  
 
<!------------------------------------SIDEBAR_START------------------------------------->
 
  <div id="sidebar">
 
 
          <ul class="section_guider" style="list-style: none !important;">
 
              <li><a href="#section1"><img src="https://static.igem.org/mediawiki/2021/a/a5/T--LINKS_China--sectionguider_purple1.png" id="section1_guider"></a></li>
 
              <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/c/c0/T--LINKS_China--sectionguider_purple2.png
 
" id="section2_guider"></a></li>
 
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--sectionguider_purple3.png" id="section3_guider"></a></li>
 
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/2/29/T--LINKS_China--sectionguider_purple4.png" id="section4_guider"></a></li>
 
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/6/6c/T--LINKS_China--sectionguider_purple5.png" id="section5_guider"></a></li>             
 
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--sectionguider_purple6.png" id="section6_guider"></a></li>             
 
              <li><a href="#section7"><img src="https://static.igem.org/mediawiki/2021/c/c2/T--LINKS_China--sectionguider_purple7.png" id="section7_guider"></a></li>             
 
              <li><a href="#section8"><img src="https://static.igem.org/mediawiki/2021/c/ca/T--LINKS_China--sectionguider_purple8.png" id="section8_guider"></a></li>
 
          </ul>
 
 
 
 
          <ul class="section_header" style="list-style: none !important;">
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section1_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section2_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section3_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section4_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section5_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section6_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section7_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section8_header"></li>
 
          </ul>
 
 
      <a id="top_button" href="#"><img src="https://static.igem.org/mediawiki/2021/8/8e/T--LINKS_China--top_button.jpg"></a>
 
 
 
<nav class="section-nav">
 
<ul>
 
<li><a href="#section1">section1</a></li>
 
<li><a href="#section2">section2</a></li>
 
<li><a href="#section3">section3</a></li>
 
<li><a href="#section4">section4</a></li>
 
<li><a href="#section5">section5</a></li>
 
<li><a href="#section6">section6</a></li>
 
<li><a href="#section7">section7</a></li>
 
<li><a href="#section8">section8</a></li>
 
</ul>
 
</nav>
 
 
  </div>
 
<!------------------------------------SIDEBAR_END------------------------------------->
 
  
  
Line 520: Line 473:
 
       width: 100vw;
 
       width: 100vw;
 
       height: 49vw;
 
       height: 49vw;
       background: url(https://static.igem.org/mediawiki/2021/e/e1/T--LINKS_China--imgbackground_ihpv2.jpg);
+
       background: url(https://static.igem.org/mediawiki/2021/7/70/T--LINKS_China--bigimg_ihps.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 559: Line 512:
 
@media only screen and (min-device-width: 768px) {
 
@media only screen and (min-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.27fr 1.63fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
Line 624: Line 573:
 
     width: 11.2vw;
 
     width: 11.2vw;
 
     top: -1.3vw;
 
     top: -1.3vw;
     padding: 1.63vw 0vw 0vw 0vw;
+
     padding: 1.75vw 0vw 0vw 0vw;
 
     right: 0.55vw;
 
     right: 0.55vw;
 
     height: auto;
 
     height: auto;
Line 637: Line 586:
 
     position: relative;
 
     position: relative;
 
     width: 5vw;
 
     width: 5vw;
     top: 1.5vw;
+
     top: 0.5vw;
 
     left: -0.525vw;
 
     left: -0.525vw;
 
}
 
}
Line 661: Line 610:
 
@media only screen and (max-device-width: 768px) {
 
@media only screen and (max-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.31fr 1.59fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
 
#sidebar {
 
#sidebar {
   display: block;
+
   display: none;
 
   border: 0px solid #600136;
 
   border: 0px solid #600136;
 
}
 
}
Line 709: Line 654:
  
 
.section-nav{
 
.section-nav{
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 773: Line 718:
 
       letter-spacing: 0.6px;
 
       letter-spacing: 0.6px;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 +
      margin-left: 4.5vw;
 +
      margin-right: 4.5vw;
 
}
 
}
  
Line 791: Line 738:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
}
 
}
  
Line 900: Line 847:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
Line 915: Line 862:
 
       margin: 1vw;
 
       margin: 1vw;
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
}
 
 
 
 
 
 
 
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5, #show_on_click6{
 
      display:none;
 
      transition: all 0.5s !important;
 
}
 
 
.show{
 
      display:block !important;
 
      transition: all 0.5s !important;
 
}
 
 
 
.show_buttons{
 
    color: grey;
 
    font-family: "Lato";
 
    cursor: pointer;
 
    border: none;
 
    font-size: 1.5vw;
 
 
}
 
}
  
Line 1,104: Line 1,027:
 
   z-index: 100;
 
   z-index: 100;
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
  top:-100px;
 
}
 
}
  
Line 1,187: Line 1,111:
  
  
<!----------------------------SIDEBAR_EFFECT--------------------------->
 
 
<script>
 
<script>
$(document).ready( function() {
 
 
    $("#section1_guider").hover( function() {
 
        $("#section1_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section1_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section2_guider").hover( function() {
 
        $("#section2_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section2_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
    $("#section3_guider").hover( function() {
 
        $("#section3_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section3_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section4_guider").hover( function() {
 
        $("#section4_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section4_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section5_guider").hover( function() {
 
        $("#section5_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section5_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section6_guider").hover( function() {
 
        $("#section6_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section6_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section7_guider").hover( function() {
 
        $("#section7_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section7_header").animate({opacity: 0}, 150);
 
    });
 
    $("#section8_guider").hover( function() {
 
        $("#section8_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section8_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
 
});
 
 
<!----------------------------NAVBAR_EFFECT--------------------------->
 
 
var prevScrollpos = window.pageYOffset;
 
var prevScrollpos = window.pageYOffset;
 
window.onscroll = function() {
 
window.onscroll = function() {
Line 1,253: Line 1,117:
 
   if (prevScrollpos > currentScrollPos) {
 
   if (prevScrollpos > currentScrollPos) {
 
     document.getElementById("outnav").style.top = "17px";
 
     document.getElementById("outnav").style.top = "17px";
    document.getElementById("sidebar").style.top = "9.7vw";
 
 
   } else {
 
   } else {
 
     document.getElementById("outnav").style.top = "-100px";
 
     document.getElementById("outnav").style.top = "-100px";
    document.getElementById("sidebar").style.top = "5vw";
 
 
   }
 
   }
 
   prevScrollpos = currentScrollPos;
 
   prevScrollpos = currentScrollPos;
 
}
 
}
 +
</script>
  
 
 
 
 
 
window.addEventListener('DOMContentLoaded', () => {
 
 
  const observer = new IntersectionObserver(entries => {
 
    entries.forEach(entry => {
 
      const id = entry.target.getAttribute('id');
 
      if (entry.intersectionRatio > 0) {
 
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
 
      } else {
 
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
 
      }
 
    });
 
  });
 
 
  // Track all sections that have an `id` applied
 
  document.querySelectorAll('section[id]').forEach((section) => {
 
    observer.observe(section);
 
  });
 
 
 
});
 
 
 
 
function myFunction1() {
 
  var element = document.getElementById("show_on_click1");
 
  element.classList.toggle("show");
 
}
 
 
function myFunction2() {
 
  var element = document.getElementById("show_on_click2");
 
  element.classList.toggle("show");
 
}
 
 
function myFunction3() {
 
  var element = document.getElementById("show_on_click3");
 
  element.classList.toggle("show");
 
}
 
 
function myFunction4() {
 
  var element = document.getElementById("show_on_click4");
 
  element.classList.toggle("show");
 
}
 
 
function myFunction5() {
 
  var element = document.getElementById("show_on_click5");
 
  element.classList.toggle("show");
 
}
 
 
function myFunction6() {
 
  var element = document.getElementById("show_on_click6");
 
  element.classList.toggle("show");
 
}
 
 
 
</script>
 
 
</html>
 
</html>

Revision as of 00:09, 22 October 2021