Difference between revisions of "Team:TUDelft/Header"
Weronika77 (Talk | contribs) |
Weronika77 (Talk | contribs) |
||
| Line 2: | Line 2: | ||
<script> | <script> | ||
| + | |||
| + | /* -------------------------------------- to remove the MediaWiki style */ | ||
$(document).ready(function() { | $(document).ready(function() { | ||
$("#HQ_page").removeAttr('id'); | $("#HQ_page").removeAttr('id'); | ||
| Line 9: | Line 11: | ||
$("#mw-content-text").removeAttr('id'); | $("#mw-content-text").removeAttr('id'); | ||
}); | }); | ||
| + | |||
| + | |||
| + | <!----------------- GO TO TOP 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> | </script> | ||
| Line 43: | Line 63: | ||
| − | /* | + | /* --------------------------------------------- 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 122: | Line 142: | ||
} | } | ||
| + | |||
| + | |||
| + | <!----- 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: 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 */ | ||
| + | } | ||
| + | |||
| + | <!----- RANDOM---> | ||
#logo { | #logo { | ||
| Line 245: | Line 289: | ||
</div> | </div> | ||
| − | + | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> | |
Revision as of 09:26, 21 June 2019
