Difference between revisions of "Team:TUDelft/Header"

Line 1: Line 1:
 
<html>
 
<html>
−
      <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
<script>
+
    <script>
−
 
+
−
    /*  -------------------------------------- to remove the MediaWiki style */
+
 
         $(document).ready(function() {
 
         $(document).ready(function() {
 
             $("#HQ_page").removeAttr('id');
 
             $("#HQ_page").removeAttr('id');
Line 11: Line 9:
 
             $("#mw-content-text").removeAttr('id');
 
             $("#mw-content-text").removeAttr('id');
 
         });
 
         });
 +
       
 +
       
 +
 +
 
     </script>
 
     </script>
−
 
+
    <style>
−
<style>
+
       
−
         /*  to remove the MediaWiki style */
+
       
 +
       
 +
       
 +
         /*  om MediaWiki style weg te halen*/
 
         p{
 
         p{
 
             margin-bottom: 0 !important;
 
             margin-bottom: 0 !important;
Line 45: Line 50:
  
  
−
         /* --------------------------------------------- font voor alles*/
+
         /*   font voor alles*/
 
         * {
 
         * {
 
             font-family: "Trebuchet MS", Helvetica, sans-serif;
 
             font-family: "Trebuchet MS", Helvetica, sans-serif;
 
         }     
 
         }     
  
−
         /*    ---------------------------------------------- menu bar */
+
         /*    menu bar */
 
         .navbar {
 
         .navbar {
 
             background-color: #def4fa;
 
             background-color: #def4fa;
Line 124: Line 129:
 
         }
 
         }
  
−
<!--- 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 */
 
−
}
 
−
 
−
 
−
 
−
<!----- RANDOM--->
 
  
 
         #logo {
 
         #logo {
Line 161: Line 142:
 
             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 169: Line 148:
 
   background-size: 50%;
 
   background-size: 50%;
 
    
 
    
 +
}
 +
 +
       
 +
        #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 175: Line 175:
 
     <body>
 
     <body>
  
 +
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
 +
 
  
−
 
+
         <!--de lijst
−
         <!--List
+
 
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
  
 
         <div class="navbar">
 
         <div class="navbar">
−
 
 
             <a href="https://2019.igem.org/Team:TUDelft">
 
             <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>
 
                 <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">Home</a>
  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Project</b>
+
                 <button class="dropbtn">Project  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 198: Line 199:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Wetlab</b>
+
                 <button class="dropbtn">Wetlab  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 209: Line 210:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Modeling</b>
+
                 <button class="dropbtn">Modeling  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 219: Line 220:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Parts</b>
+
                 <button class="dropbtn">Parts  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 233: Line 234:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Human Practices</b>
+
                 <button class="dropbtn">Human Practices  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 243: Line 244:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Team</b>
+
                 <button class="dropbtn">Team  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 253: Line 254:
 
             </div>  
 
             </div>  
 
             <div class="dropdown">
 
             <div class="dropdown">
−
                 <button class="dropbtn"><b>Acknowledgements</b>
+
                 <button class="dropbtn">Acknowledgements  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
Line 272: Line 273:
  
 
         </div>
 
         </div>
 +
       
 
         <br>
 
         <br>
 
         <br>
 
         <br>
Line 373: Line 375:
 
         <br>
 
         <br>
 
          
 
          
 +
<script>        // When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
  
−
    
+
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:51, 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