Difference between revisions of "Template:BNU-CHINA/article"
(Created page with "<html> <div class="content container"> <article class="col-md-10 col-md-offset-1"> <header class="page-header"> <h1></html>{{{1}}}<html><small></html>{...") |
|||
(48 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <style> | ||
+ | body { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2015/</html>{{{3}}}<html>.jpg"); | ||
+ | background-size: 100% auto; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1024px) { | ||
+ | #mw-content-text, body { | ||
+ | background: #f9f9f9; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function () { | ||
+ | var baseline = $("#top_menu_14").height(); | ||
+ | var scrollToHash = function(hash) { | ||
+ | if (hash.indexOf("#") == 0) { | ||
+ | var $target = $(hash); | ||
+ | $("html, body").animate({scrollTop: $target.offset().top - $(".sub-header").height() - baseline + 2}, "slow"); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | |||
+ | $(".sub-header").css({ | ||
+ | "transform": "translate3D(0, -100%, 0)", | ||
+ | "top": baseline + "px" | ||
+ | }); | ||
+ | |||
+ | $("article h2").each(function (index, item) { | ||
+ | var $temp = $(item).clone(); | ||
+ | $temp.children().remove(); | ||
+ | $("ul.sub-nav").append($("<li>").append( | ||
+ | $("<a>").addClass("btn-filter btn") | ||
+ | .attr("data-tartget", index) | ||
+ | .text($temp.text()) | ||
+ | )); | ||
+ | }); | ||
+ | |||
+ | $("ul.sub-nav").append($("<li>").append( | ||
+ | $("<a>").addClass("btn-filter btn") | ||
+ | .attr("href", "#") | ||
+ | .text("Top ▴") | ||
+ | )); | ||
+ | |||
+ | $("ul.sub-nav a").click(function () { | ||
+ | $("html, body").animate({scrollTop: $($("article h2")[$(this).attr("data-tartget")]).offset().top - $(".sub-header").height()}, "slow"); | ||
+ | }); | ||
+ | |||
+ | $(document).scroll(function (event) { | ||
+ | if (($(window).scrollTop() <= $(".navbar-siren").height() + baseline)) { | ||
+ | $(".sub-header").css({ | ||
+ | "transform": "translate3D(0, -100%, 0)" | ||
+ | }); | ||
+ | } else { | ||
+ | $(".sub-header").css({ | ||
+ | "transform": "translate3D(0, 0, 0)" | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | var currentIdx = -1; | ||
+ | $("article h2").each(function (index, item) { | ||
+ | if($(window).scrollTop() > $(item).offset().top - baseline - $(".sub-header").height()) { | ||
+ | currentIdx = index; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | if($(window).scrollTop() + $(window).height() == $(document).height()) { | ||
+ | currentIdx = $("article h2").length - 1; | ||
+ | } | ||
+ | |||
+ | $("ul.sub-nav a").css({ | ||
+ | "color": "#278A75" | ||
+ | }); | ||
+ | |||
+ | if (currentIdx >= 0) { | ||
+ | $($("ul.sub-nav a")[currentIdx]).css({ | ||
+ | "color": "#D3853D" | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $("a[href]").on("click", function() { | ||
+ | var hash = this.href.substring(this.href.indexOf("#")); | ||
+ | scrollToHash(hash); | ||
+ | }); | ||
+ | |||
+ | scrollToHash(window.location.hash); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | <div class="sub-header text-right"> | ||
+ | <ul class="sub-nav col-md-12"> | ||
+ | </ul> | ||
+ | </div> | ||
<div class="content container"> | <div class="content container"> | ||
− | <article class="col- | + | <article class="col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0"> |
<header class="page-header"> | <header class="page-header"> | ||
<h1></html>{{{1}}}<html><small></html>{{{2}}}<html></small></h1> | <h1></html>{{{1}}}<html><small></html>{{{2}}}<html></small></h1> | ||
</header> | </header> | ||
</html> | </html> |
Latest revision as of 01:33, 19 September 2015