Difference between revisions of "Team:TUDelft/Header"

 
(17 intermediate revisions by 4 users not shown)
Line 4: Line 4:
 
         <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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
 
+
<script>
−
        <script>
+
$('.js-anchor-link').click(function(e){
−
            $(document).ready(function() {
+
  e.preventDefault();
−
                $("#HQ_page").removeAttr('id');
+
  var target = $($(this).attr('href'));
−
                $("#globalWrapper").removeAttr('id');
+
  if(target.length){
−
                $("#content").removeAttr('id');
+
    var scrollTo = target.offset().top;
−
                $("#bodyContent").removeAttr('id');
+
    $('body, html').animate({scrollTop: scrollTo+'px'}, 800);
−
                $("#mw-content-text").removeAttr('id');
+
  }
−
            });
+
});
−
 
+
</script>
−
        </script>
+
 
         <style>
 
         <style>
 
             /*  om MediaWiki style weg te halen*/
 
             /*  om MediaWiki style weg te halen*/
Line 33: Line 32:
 
             }
 
             }
  
 +
 
 
         </style>
 
         </style>
 
     </head>
 
     </head>
Line 94: Line 94:
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
            <div class="dropdowntu">
+
  <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Parts</b>  
 
                 <button class="dropbtn"><b>Parts</b>  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 100: Line 100:
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
 
                     <a href="https://2019.igem.org/Team:TUDelft/Parts">Parts Overview</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Parts">Parts Overview</a>
−
                    <a href="https://2019.igem.org/Team:TUDelft/Basic_Part">Basic Parts</a>
+
       
−
                    <a href="https://2019.igem.org/Team:TUDelft/Composite_Part">Composite Parts</a>
+
−
                    <a href="https://2019.igem.org/Team:TUDelft/Part_Collection">Parts Collection</a>
+
−
+
−
           
+
−
 
+
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
 +
 +
             
 +
       
 
             <div class="dropdowntu">
 
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Human Practices</b>
 
                 <button class="dropbtn"><b>Human Practices</b>
Line 145: Line 143:
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
 +
 +
 +
 
  
 
             <a class="social" href="mailto:igem@tudelft.nl"><img id="social" src="https://static.igem.org/mediawiki/2019/b/b4/T--TUDELFT--mailicon.png" alt="Email" /></a>
 
             <a class="social" href="mailto:igem@tudelft.nl"><img id="social" src="https://static.igem.org/mediawiki/2019/b/b4/T--TUDELFT--mailicon.png" alt="Email" /></a>
Line 159: Line 160:
  
 
         </div>
 
         </div>
−
 
−
        <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
 
−
            }
 
−
            //            <!-- hamburger -->
 
−
            function myFunction() {
 
−
                var x = document.getElementById("myTopnav");
 
−
                if (x.className === "navbartu") {
 
−
                    x.className += " responsive";
 
−
                } else {
 
−
                    x.className = "navbartu";
 
−
                }
 
−
            }
 
−
     
 
−
$(document).ready(function(){
 
−
            // Add smooth scrolling to all links
 
−
            $(".jump").on('click', function(event) {
 
−
 
−
                // Make sure this.hash has a value before overriding default behavior
 
−
                if (this.hash !== "") {
 
−
                    // Prevent default anchor click behavior
 
−
                    event.preventDefault();
 
−
 
−
                    // Store hash
 
−
                    var hash = this.hash;
 
−
                        // Add hash (#) to URL when done scrolling (default click behavior)
 
−
                        window.location.hash = hash;
 
−
                    // Using jQuery's animate() method to add smooth page scroll
 
−
                    // The optional number (100) specifies the number of milliseconds it takes to scroll to the specified area
 
−
                    $('html, body').animate({
 
−
                        scrollTop: $(hash).offset() .top -100
 
−
                    }, 200, function(){
 
−
 
−
                    });
 
−
                } // End if
 
−
            });
 
−
        });
 
−
 
−
        </script>
 
  
 
     </body>
 
     </body>
  
 
</html>
 
</html>

Latest revision as of 04:00, 24 November 2019