Difference between revisions of "Team:TUDelft/Header"

Line 127: Line 127:
 
         }
 
         }
  
 +
<!--- go to top button--->
 +
        #myBtn {
 +
  display: none; /* Hidden by default */
 +
  position: fixed; /* Fixed/sticky position */
 +
  bottom: 20px; /* Place the button at the bottom of the page */
 +
  right: 30px; /* Place the button 30px from the right */
 +
  z-index: 99; /* Make sure it does not overlap */
 +
  border: none; /* Remove borders */
 +
  outline: none; /* Remove outline */
 +
  background-color: #00A6D6; /* Set a background color */
 +
  color: black; /* Text color */
 +
  cursor: pointer; /* Add a mouse pointer on hover */
 +
  padding: 15px; /* Some padding */
 +
  border-radius: 10px; /* Rounded corners */
 +
  font-size: 18px; /* Increase font size */
 +
}
  
 +
#myBtn:hover {
 +
  background-color: #555; /* Add a dark-grey background on hover */
 +
}
  
  
Line 145: Line 164:
 
             height:1500px;
 
             height:1500px;
 
         }
 
         }
 +
 +
<!----- Background image -->
 
body {
 
body {
 
   background-image: url("https://static.igem.org/mediawiki/2019/a/a9/T--TUDELFT--backgroundpattern.png");
 
   background-image: url("https://static.igem.org/mediawiki/2019/a/a9/T--TUDELFT--backgroundpattern.png");
Line 151: Line 172:
 
   background-size: 50%;
 
   background-size: 50%;
 
    
 
    
−
}
 
−
 
−
 
−
 
−
<!------- Top button--->
 
−
#myBtn {
 
−
  display: none; /* Hidden by default */
 
−
  position: fixed; /* Fixed/sticky position */
 
−
  bottom: 20px; /* Place the button at the bottom of the page */
 
−
  right: 30px; /* Place the button 30px from the right */
 
−
  z-index: 99; /* Make sure it does not overlap */
 
−
  border: none; /* Remove borders */
 
−
  outline: none; /* Remove outline */
 
−
  background-color: red; /* Set a background color */
 
−
  color: white; /* Text color */
 
−
  cursor: pointer; /* Add a mouse pointer on hover */
 
−
  padding: 15px; /* Some padding */
 
−
  border-radius: 10px; /* Rounded corners */
 
−
  font-size: 18px; /* Increase font size */
 
−
}
 
−
 
−
#myBtn:hover {
 
−
  background-color: #555; /* Add a dark-grey background on hover */
 
 
}
 
}
  
Line 180: Line 178:
 
     <body>
 
     <body>
  
−
 
+
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  
 
         <!--List  
 
         <!--List  
Line 187: Line 185:
 
         <div class="navbar">
 
         <div class="navbar">
  
−
 
+
            <a href="https://2019.igem.org/Team:TUDelft">
 +
                <img id="logo" src="https://static.igem.org/mediawiki/2019/c/c2/T--TUDELFT--logonavbar-3.png" alt=""></a>
 
             <a class="test" href="https://2019.igem.org/Team:TUDelft"><b>Home</b></a>
 
             <a class="test" href="https://2019.igem.org/Team:TUDelft"><b>Home</b></a>
  
Line 276: Line 275:
  
 
         </div>
 
         </div>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
          <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
          <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
          <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
          <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
        <br>
 +
       
 +
<script>        // When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
  
−
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+
function scrollFunction() {
 +
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
    document.getElementById("myBtn").style.display = "block";
 +
  } else {
 +
    document.getElementById("myBtn").style.display = "none";
 +
  }
 +
}
 +
 
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
  document.body.scrollTop = 0; // For Safari
 +
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 +
}</script>
 
    
 
    
  
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 09:43, 21 June 2019

Home
Description Design Demonstrate
Experiments Safety Notebook Results
Codon Optimization Reaction Kinetics
Parts Overview Basic Parts Parts Composite Parts Collection Contribution Improve
Human Practices Education & Engagement
Team Members Supervisors Collaborations
Attributions Sponsors