Difference between revisions of "Template:NYMU-Taipei-css"

 
(48 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
 
−
<!-- Bootstrap -->
 
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
−
 
−
 
 
<script>
 
<script>
−
+
// When the user scrolls down 20px from the top of the document, show the button
−
// back-to-top from bootsnipp
+
window.onscroll = function() {scrollFunction()};
−
+
−
$(document).ready(function(){
+
−
    $(window).scroll(function () {
+
−
            if ($(this).scrollTop() > 50) {
+
−
                $('#back-to-top').fadeIn();
+
−
            } else {
+
−
                $('#back-to-top').fadeOut();
+
−
            }
+
−
        });
+
−
        // scroll body to 0px on click
+
−
        $('#back-to-top').click(function () {
+
−
            $('#back-to-top').tooltip('hide');
+
−
            $('body,html').animate({
+
−
                scrollTop: 0
+
−
            }, 800);
+
−
            return false;
+
−
        });
+
−
       
+
−
        $('#back-to-top').tooltip('show');
+
  
−
     });
+
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 Chrome, Safari and Opera
 +
    document.documentElement.scrollTop = 0; // For IE and Firefox
 +
}
 
</script>
 
</script>
 
 
−
+
 
 
<style type="text/css" rel="stylesheet">
 
<style type="text/css" rel="stylesheet">
 
 
−
/* back-to-top */
+
 
−
.back-to-top {
+
−
cursor: pointer;
+
−
position: fixed;
+
−
bottom: 20px;
+
−
right: 20px;
+
−
display:none;
+
−
}
+
  
 
 
Line 101: Line 80:
 
color:  #38a541;
 
color:  #38a541;
 
text-decoration:underline;
 
text-decoration:underline;
 +
}
 +
 +
#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: #afafaf; /* 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 */
 +
}
 +
 +
#myBtn:hover {
 +
background-color: #555; /* Add a dark-grey background on hover */
 
}
 
}
  
Line 129: Line 127:
 
<a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br>
 
<a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br>
 
<a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br>
 
<a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br>
 +
<a href="https://2017.igem.org/Team:NYMU-Taipei/Attributions" >Special Thanks</a>
 
 
 
</p>
 
</p>
Line 135: Line 134:
 
</div>
 
</div>
 
 
−
+
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
−
<!--back-to-top-->
+
 
−
+
−
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left">
+
−
<span class="glyphicon glyphicon-chevron-up"></span>
+
−
</a>
+
−
+
 
 
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 16:46, 26 October 2017

CONTACT US

Email us: 2017igem.nymutaipei@gmail.com
Call us: 886-2-28267316
Facebook: NYMU iGEM Team

AFFILIATIONS & ACKNOWLEDGMENT

IGEM 2017
National Yang-Ming University
Special Thanks