Difference between revisions of "Template:NUS Singapore-A"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
  <meta charset="utf-8">
+
<meta charset="utf-8">
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
 +
<link rel="icon" href="https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png">
  
−
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
−
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
+
−
  <link rel="icon" href="https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png">
+
−
 
+
−
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
 
</head>
 
</head>
 +
 
<style>
 
<style>
 
/***************************************************** DEFAULT WIKI SETTINGS  ***************************************/
 
/***************************************************** DEFAULT WIKI SETTINGS  ***************************************/
Line 56: Line 56:
 
}
 
}
  
 +
/***************End of Back to top button ***********/
 +
 +
/************************************************** Back to top button style **************************************************/
 +
 +
#BacktoTopBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 3px;
 +
  right: 10px;
 +
  z-index: 99;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #F5B041;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 5px;
 +
  border-radius: 20px;
 +
}
 +
 +
#BacktoTopBtn:hover {
 +
  background-color: #2980B9;
 +
}
 +
 +
/*******************/
 +
 +
 +
body, html {
 +
    height: 100%;
 +
    line-height: 1.8;
 +
}
  
−
/***************************************** W3.CSS Style change **************************************/
 
 
.w3-bar .w3-button {
 
.w3-bar .w3-button {
 
     padding: 16px;
 
     padding: 16px;
 +
}
 +
 +
.w3-button {
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  font-size: 1.1em;
 +
  letter-spacing: 0.2em;
 +
  background-color: transparent;
 +
}
 +
 +
.w3-dropdown-hover  {
 +
 +
}
 +
 +
.w3-dropdown-content {
 +
  background-color: rgba(255, 255, 255, 0.9);
 +
}
 +
 +
.nav {
 +
  width: 100%;
 +
  height: 60px;
 +
  /*padding-top: 1em;*/
 +
/* This color means white and slightly transparent */
 +
  background-color: rgba(255, 255, 255, 0.82);
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  letter-spacing: .1em;
 +
  text-align: center;
 +
  position: relative;
 +
  z-index: 3;
 
}
 
}
  
Line 294: Line 353:
 
}
 
}
  
−
 
−
/************************************************** Back to top button style **************************************************/
 
−
 
−
#BacktoTopBtn {
 
−
  display: none;
 
−
  position: fixed;
 
−
  bottom: 3px;
 
−
  right: 10px;
 
−
  z-index: 99;
 
−
  border: none;
 
−
  outline: none;
 
−
  background-color: #F5B041;
 
−
  color: white;
 
−
  cursor: pointer;
 
−
  padding: 5px;
 
−
  border-radius: 20px;
 
−
}
 
−
 
−
#BacktoTopBtn:hover {
 
−
  background-color: #2980B9;
 
−
}
 
−
 
−
}
 
 
</style>
 
</style>
−
 
−
 
  
  
Line 362: Line 396:
 
       }
 
       }
 
     }
 
     }
−
 
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
 
</script>
−
</head>
 
  
  
−
 
−
 
−
 
−
<!--********************************  Here is where the main content starts ************************************-->
 
  
 
<body>
 
<body>
−
<!-------------------------------------START OF NAV BAR HTML------------------------------------------------------>
 
−
 
  
 
<div class="nusgem_mail">CONNECT WITH US</div>
 
<div class="nusgem_mail">CONNECT WITH US</div>
  
 
<div class="outer-border bg-primary">
 
<div class="outer-border bg-primary">
 +
 
   <div class="w3-hide-small">
 
   <div class="w3-hide-small">
−
  <a href="https://www.instagram.com/nusgem2018/"><i class="fa fa-instagram instalogo"></i></a>
+
    <a href="https://www.instagram.com/nusgem2018/"><i class="fa fa-instagram instalogo"></i></a>
−
  <a href="https://www.facebook.com/NUSGEM2018/"><i class="fa fa-facebook fblogo"></i></a>
+
    <a href="https://www.facebook.com/NUSGEM2018/"><i class="fa fa-facebook fblogo"></i></a>
−
  <a href="mailto:nusigem@gmail.com"><i class="fa fa-envelope maillogo"></i></a>
+
    <a href="mailto:nusigem@gmail.com"><i class="fa fa-envelope maillogo"></i></a>
 
   </div>
 
   </div>
  
 
   <div class="inner-border" style="background-image: none;">
 
   <div class="inner-border" style="background-image: none;">
−
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
+
 
 +
 
 +
<!-------------------------------------START OF NAV BAR HTML------------------------------------------------------>
 +
 
 +
     <div style="text-align:center;  display:block;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
 
     </div>
 
     </div>
−
   
 
−
    <div class="nav" id="myNav">
 
−
   
 
−
      <div class="dropdown">
 
−
        <button class="dropbtn"><a href="https://2018.igem.org/Team:NUS_Singapore-A" style="text-decoration: none; color: black;">HOME</a></button></div>
 
  
−
       <div class="dropdown">
+
<!-- Navbar in desktop (sit on top) -->
−
         <button class="dropbtn">PROJECT</button>
+
<div class="nav">
−
         <div class="dropdown-content">
+
  <div class="w3-bar w3-card" id="myNavbar">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
+
 
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
+
    <!-- Right-sided navbar links -->
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results">Results</a>
+
    <div class="w3-hide-small" style="display: inline-block;">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate">Demonstrate</a>
+
 
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A" class="w3-bar-item w3-button">HOME</a>
 +
 
 +
       <div class="w3-dropdown-hover w3-mobile">
 +
         <button class="w3-button">PROJECT<i class="fa fa-caret-down"></i></button>
 +
         <div class="w3-dropdown-content w3-bar-block">
 +
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description" class="w3-bar-item w3-button w3-mobile">Description</a>
 +
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design" class="w3-bar-item w3-button w3-mobile">Design</a>
 +
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results" class="w3-bar-item w3-button w3-mobile">Results</a>
 +
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate" class="w3-bar-item w3-button w3-mobile">Demonstrate</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdown">
+
 
−
         <button class="dropbtn">LAB</button>
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <div class="dropdown-content">
+
         <button class="w3-button">LAB<i class="fa fa-caret-down"></i></button>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook" class="w3-bar-item w3-button w3-mobile">Notebook</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety" class="w3-bar-item w3-button w3-mobile">Safety</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab" class="w3-bar-item w3-button w3-mobile">Inter Lab</a>
 +
           <a href="hhttps://2018.igem.org/Team:NUS_Singapore-A/Measurement" class="w3-bar-item w3-button w3-mobile">Measurement</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">PARTS</button>
+
         <button class="w3-button">PARTS<i class="fa fa-caret-down"></i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection">Parts Overview</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection" class="w3-bar-item w3-button w3-mobile">Overview</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part" class="w3-bar-item w3-button w3-mobile">Composite Parts</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve" class="w3-bar-item w3-button w3-mobile">Improved Parts</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODELLING</a>
−
         <button class="dropbtn">MODELLING</button>
+
 
−
         <div class="dropdown-content">
+
       <div class="w3-dropdown-hover w3-mobile">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
+
         <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
−
        <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
+
         <div class="w3-dropdown-content w3-bar-block">
 +
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware" class="w3-bar-item w3-button w3-mobile">Overview</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!" class="w3-bar-item w3-button w3-mobile">PDF-LA!</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor" class="w3-bar-item w3-button w3-mobile">2-in-1 Sensor</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump" class="w3-bar-item w3-button w3-mobile">Peristaltic Pump</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar" class="w3-bar-item w3-button w3-mobile">Fermentation Chamber</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
 
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">HARDWARE</button>
+
         <button class="w3-button">HUMAN PRACTICES<i class="fa fa-caret-down"></i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team" class="w3-bar-item w3-button w3-mobile">Members</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>      
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors" class="w3-bar-item w3-button w3-mobile">Supervisors</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor">Light Wait - 2-in-1 Sensor</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors" class="w3-bar-item w3-button w3-mobile">Sponsors</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump">Light Wait - Peristaltic Pump</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions" class="w3-bar-item w3-button w3-mobile">Attributions</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar">Light Wait - Fermentation Chamber</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations" class="w3-bar-item w3-button w3-mobile">Collaborations</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery" class="w3-bar-item w3-button w3-mobile">Gallery</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" class="w3-bar-item w3-button">AWARDS</a>
 
        
 
        
−
      <div class="dropdown">
+
    </div>
−
        <button class="dropbtn">HUMAN PRACTICES</button>
+
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->
−
        <div class="dropdown-content">
+
 
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
+
    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium w3-hover-white" onclick="w3_open()"><i class="fa fa-bars"></i></a>
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
+
   </div>
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborative_Report">Collaborative Report</a>
+
−
        </div>
+
−
      </div>
+
−
     
+
−
      <div class="dropdown">
+
−
        <button class="dropbtn">TEAM</button>
+
−
        <div class="dropdown-content">
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">Members</a>
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">Sponsors</a>
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">Attributions</a>
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">Collaborations</a>
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery">Gallery</a>
+
−
        </div>
+
−
      </div>
+
−
     
+
−
      <div class="dropdown">
+
−
        <button class="dropbtn">AWARDS</button>
+
−
        <div class="dropdown-content">
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals">Medals</a>
+
−
        </div>
+
−
      </div>
+
−
     
+
−
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
+
−
   </div>  
+
 
</div>
 
</div>
  
  
−
<!----------------------------------------SCRIPT FOR STICKY NAV BAR------------------------------------------------->
+
<!-- NavBar on small screens when clicking the menu icon -->
−
<script>
+
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
 +
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close</a>
  
−
var yourNavigation = $(".nav");
+
  <a href="https://2018.igem.org/Team:NUS_Singapore-A" onclick="w3_close()" class="w3-bar-item w3-button" onclick="w3_close()">HOME</a>
−
    stickyDiv = "sticky";
+
     
−
    yourHeader = $('.logo').height()+120;
+
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">PROJECT<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Description</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Design</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Results</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Demonstrate</a>
 +
      </div>
 +
  </div>
  
−
$(window).scroll(function() {
+
  <div class="w3-dropdown-hover w3-mobile">
−
  if( $(this).scrollTop() > yourHeader ) {
+
    <button class="w3-button">LAB<i class="fa fa-caret-down"></i></button>
−
    yourNavigation.addClass(stickyDiv);
+
    <div class="w3-dropdown-content w3-bar-block">
−
  } else {
+
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Notebook</a>
−
    yourNavigation.removeClass(stickyDiv);
+
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Safety</a>
−
  }
+
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Inter Lab</a>
−
});
+
        <a href="hhttps://2018.igem.org/Team:NUS_Singapore-A/Measurement" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Measurement</a>
 +
    </div>
 +
  </div>
  
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">PARTS<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Overview</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Composite Parts</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Improved Parts</a>
 +
    </div>
 +
  </div>
  
−
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+
  <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODELLING</a>
−
function myFunction() {
+
−
    var x = document.getElementById("myNav");
+
−
    if (x.className === "nav") {
+
−
        x.className += " responsive";
+
−
    } else {
+
−
        x.className = "nav";
+
−
    }
+
−
}
+
  
−
</script>
+
  <div class="w3-dropdown-hover w3-mobile">
−
<!------------------------------------END OF SCRIPT FOR STICKY NAV BAR----------------------------------------------->
+
    <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Overview</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">PDF-LA!</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">2-in-1 Sensor</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Peristaltic Pump</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Fermentation Chamber</a>
 +
    </div>
 +
  </div>
  
−
<!------------------------------------------END OF NAV BAR HTML------------------------------------------------------>
+
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">HUMAN PRACTICES<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Members</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Supervisors</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Sponsors</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Attributions</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Collaborations</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Gallery</a>
 +
    </div>
 +
  </div>
  
 +
  <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" class="w3-bar-item w3-button" onclick="w3_close()">AWARDS</a>
 +
 
 +
</nav>
  
  
 +
 
 +
</div>
 +
</div>
 +
</body>
  
−
<!--******************************************  Back to top button ***********************************************-->
+
<script>
−
<button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button>
+
// Modal Image Gallery
 +
function onClick(element) {
 +
  document.getElementById("img01").src = element.src;
 +
  document.getElementById("modal01").style.display = "block";
 +
  var captionText = document.getElementById("caption");
 +
  captionText.innerHTML = element.alt;
 +
}
  
  
−
<script>
+
// Toggle between showing and hiding the sidebar when clicking the menu icon
−
//**************************************** Back to top button Javascript ****************************************//
+
var mySidebar = document.getElementById("mySidebar");
−
// When the user scrolls down 50px from the top of the document, show the button
+
−
window.onscroll = function() {scrollFunction()};
+
  
−
function scrollFunction() {
+
function w3_open() {
−
     if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
+
     if (mySidebar.style.display === 'block') {
−
         document.getElementById("BacktoTopBtn").style.display = "block";
+
         mySidebar.style.display = 'none';
 
     } else {
 
     } else {
−
         document.getElementById("BacktoTopBtn").style.display = "none";
+
         mySidebar.style.display = 'block';
 
     }
 
     }
 
}
 
}
  
−
// When the user clicks on the button, scroll to the top of the document
+
// Close the sidebar with the close button
−
function topFunction() {
+
function w3_close() {
−
     document.body.scrollTop = 0;
+
     mySidebar.style.display = "none";
−
    document.documentElement.scrollTop = 0;
+
 
}
 
}
 
</script>
 
</script>
−
 
−
</body>
 
−
 
  
 
</html>
 
</html>

Revision as of 09:19, 17 October 2018

CONNECT WITH US