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

(Undo revision 403838 by BambooPanda (talk))
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://www.w3schools.com/w3css/4/w3.css">
+
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
</head>
+
  <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>
 
<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 353: Line 294:
 
}
 
}
  
 +
 +
/************************************************** 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 396: Line 362:
 
       }
 
       }
 
     }
 
     }
 +
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</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>
  
−
<!-- Navbar in desktop (sit on top) -->
+
       <div class="dropdown">
−
<div class="nav" id="myNav">
+
         <button class="dropbtn">PROJECT</button>
−
  <div class="w3-bar w3-card" id="myNavbar">
+
         <div class="dropdown-content">
−
 
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
−
    <!-- Right-sided navbar links -->
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
−
    <div class="w3-hide-small" style="display: inline-block;">
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results">Results</a>
−
 
+
           <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">
−
       <div class="w3-dropdown-hover w3-mobile">
+
         <button class="dropbtn">LAB</button>
−
         <button class="w3-button">LAB<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/Notebook">Notebook</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/Safety">Safety</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/InterLab">InterLab Study</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="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</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="w3-dropdown-hover w3-mobile">
+
       <div class="dropdown">
−
         <button class="w3-button">PARTS<i class="fa fa-caret-down"></i></button>
+
         <button class="dropbtn">PARTS</button>
−
         <div class="w3-dropdown-content w3-bar-block">
+
         <div class="dropdown-content">
−
           <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/Part_Collection">Parts Overview</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/Composite_Part">Composite Parts</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve" class="w3-bar-item w3-button w3-mobile">Improved Parts</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODELLING</a>
+
       <div class="dropdown">
−
 
+
         <button class="dropbtn">MODELLING</button>
−
       <div class="w3-dropdown-hover w3-mobile">
+
         <div class="dropdown-content">
−
         <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
−
         <div class="w3-dropdown-content w3-bar-block">
+
        <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
−
           <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="w3-dropdown-hover w3-mobile">
+
       <div class="dropdown">
−
         <button class="w3-button">HUMAN PRACTICES<i class="fa fa-caret-down"></i></button>
+
         <button class="dropbtn">HARDWARE</button>
−
         <div class="w3-dropdown-content w3-bar-block">
+
         <div class="dropdown-content">
−
           <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">Overview</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/PDF-LA!">PDF-LA!</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/Sensor">Light Wait - 2-in-1 Sensor</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/Pump">Light Wait - Peristaltic Pump</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/Hardware/CoJar">Light Wait - Fermentation Chamber</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>
+
      <div class="dropdown">
−
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->
+
        <button class="dropbtn">HUMAN PRACTICES</button>
−
 
+
        <div class="dropdown-content">
−
    <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/Human_Practices">Integrated Human Practices</a>
−
   </div>
+
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
 +
          <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>
  
  
−
<!-- NavBar on small screens when clicking the menu icon -->
+
<!----------------------------------------SCRIPT FOR STICKY NAV BAR------------------------------------------------->
−
<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">
+
<script>
−
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close</a>
+
  
−
  <a href="https://2018.igem.org/Team:NUS_Singapore-A" onclick="w3_close()" class="w3-bar-item w3-button" onclick="w3_close()">HOME</a>
+
var yourNavigation = $(".nav");
−
     
+
    stickyDiv = "sticky";
−
  <div class="w3-dropdown-hover w3-mobile">
+
    yourHeader = $('.logo').height()+120;
−
    <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>
+
  
−
  <div class="w3-dropdown-hover w3-mobile">
+
$(window).scroll(function() {
−
    <button class="w3-button">LAB<i class="fa fa-caret-down"></i></button>
+
  if( $(this).scrollTop() > yourHeader ) {
−
    <div class="w3-dropdown-content w3-bar-block">
+
    yourNavigation.addClass(stickyDiv);
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Notebook</a>
+
  } else {
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Safety</a>
+
    yourNavigation.removeClass(stickyDiv);
−
        <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>
 
  
−
  <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODELLING</a>
+
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 +
function myFunction() {
 +
    var x = document.getElementById("myNav");
 +
    if (x.className === "nav") {
 +
        x.className += " responsive";
 +
    } else {
 +
        x.className = "nav";
 +
    }
 +
}
  
−
  <div class="w3-dropdown-hover w3-mobile">
+
</script>
−
    <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
+
<!------------------------------------END OF SCRIPT FOR STICKY NAV BAR----------------------------------------------->
−
    <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>
+
  
−
  <div class="w3-dropdown-hover w3-mobile">
+
<!------------------------------------------END OF NAV BAR HTML------------------------------------------------------>
−
    <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>
 
  
−
<script>
+
<!--******************************************  Back to top button ***********************************************-->
−
// Modal Image Gallery
+
<button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button>
−
function onClick(element) {
+
−
  document.getElementById("img01").src = element.src;
+
−
  document.getElementById("modal01").style.display = "block";
+
−
  var captionText = document.getElementById("caption");
+
−
  captionText.innerHTML = element.alt;
+
−
}
+
  
  
−
// Toggle between showing and hiding the sidebar when clicking the menu icon
+
<script>
−
var mySidebar = document.getElementById("mySidebar");
+
//**************************************** Back to top button Javascript ****************************************//
 +
// When the user scrolls down 50px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
  
−
function w3_open() {
+
function scrollFunction() {
−
     if (mySidebar.style.display === 'block') {
+
     if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
−
         mySidebar.style.display = 'none';
+
         document.getElementById("BacktoTopBtn").style.display = "block";
 
     } else {
 
     } else {
−
         mySidebar.style.display = 'block';
+
         document.getElementById("BacktoTopBtn").style.display = "none";
 
     }
 
     }
 
}
 
}
  
−
// Close the sidebar with the close button
+
// When the user clicks on the button, scroll to the top of the document
−
function w3_close() {
+
function topFunction() {
−
     mySidebar.style.display = "none";
+
     document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 
}
 
}
 
</script>
 
</script>
 +
 +
</body>
 +
  
 
</html>
 
</html>

Revision as of 09:27, 17 October 2018

CONNECT WITH US