Difference between revisions of "Team:TUDelft/Header"

Line 1: Line 1:
 
<html>
 
<html>
   
+
      <meta name="viewport" content="width=device-width, initial-scale=1">
<!---- VERWIJDER ALS MERGEN--->
+
<meta name="viewport" content="width=device-width, initial-scale=1">
+
 
+
 
<script>
 
<script>
  
 
+
    /*  -------------------------------------- to remove the MediaWiki style */
    /*  to remove the MediaWiki style */
+
 
         $(document).ready(function() {
 
         $(document).ready(function() {
 
             $("#HQ_page").removeAttr('id');
 
             $("#HQ_page").removeAttr('id');
Line 15: Line 11:
 
             $("#mw-content-text").removeAttr('id');
 
             $("#mw-content-text").removeAttr('id');
 
         });
 
         });
      </script>
+
 
 +
 
 +
 
 +
    </script>
 +
 
 
  <style>
 
  <style>
 
         /*  to remove the MediaWiki style */
 
         /*  to remove the MediaWiki style */
Line 48: Line 48:
  
  
         /*   ------------------------- 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 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 */
 +
}
 +
 +
 +
 +
<!----- RANDOM--->
  
 
         #logo {
 
         #logo {
Line 140: 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 147: Line 173:
 
    
 
    
 
}
 
}
 
  
 
     </style>
 
     </style>
Line 153: Line 178:
 
     <body>
 
     <body>
  
 
+
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  
 
         <!--List  
 
         <!--List  
Line 159: Line 184:
  
 
         <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"><b>Home</b></a>
  
Line 250: 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()};
  
 +
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:49, 21 June 2019