Team:UCL/QWERTYtest
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | (function($){ | ||
+ | $(function(){ | ||
+ | |||
+ | |||
+ | var wrapper_top = $(".progress .wrapper").offset().top; | ||
+ | $(window).scroll(function (){ | ||
+ | var wrapper_height = $(".progress .wrapper").height(); | ||
+ | |||
+ | // Affixes Progress Bars | ||
+ | var top = $(this).scrollTop(); | ||
+ | if (top > wrapper_top - 10) { | ||
+ | $(".progress .wrapper").addClass("affix"); | ||
+ | } | ||
+ | else { | ||
+ | $(".progress .wrapper").removeClass("affix"); | ||
+ | } | ||
+ | |||
+ | |||
+ | // Calculate each progress section | ||
+ | $(".content div").each(function(i){ | ||
+ | var this_top = $(this).offset().top; | ||
+ | var height = $(this).height(); | ||
+ | var this_bottom = this_top + height; | ||
+ | var percent = 0; | ||
+ | |||
+ | // Scrolled within current section | ||
+ | if (top >= this_top && top <= this_bottom) { | ||
+ | percent = ((top - this_top) / (height - wrapper_height)) * 100; | ||
+ | if (percent >= 100) { | ||
+ | percent = 100; | ||
+ | $(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff"); | ||
+ | } | ||
+ | else { | ||
+ | $(".progress .wrapper .bar:eq("+i+") i").css("color", "#36a7f3"); | ||
+ | } | ||
+ | } | ||
+ | else if (top > this_bottom) { | ||
+ | percent = 100; | ||
+ | $(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff"); | ||
+ | } | ||
+ | console.log(i); | ||
+ | $(".progress .wrapper .bar:eq("+i+") span").css("width", percent + "%"); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | // Smooth Scroll Links | ||
+ | $(".wrapper .bar a").click(function (e){ | ||
+ | e.preventDefault(); | ||
+ | |||
+ | var hash = this.hash.substr(1); | ||
+ | console.log(hash); | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#"+ hash).offset().top - 10 | ||
+ | }, 500); | ||
+ | |||
+ | }); | ||
+ | |||
+ | }); // end of document ready | ||
+ | })(jQuery); // end of jQuery name space | ||
+ | |||
+ | </script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 81: | Line 145: | ||
<script> | <script> | ||
+ | /* http://meyerweb.com/eric/tools/css/reset/ | ||
+ | v2.0 | 20110126 | ||
+ | License: none (public domain) | ||
+ | */ | ||
+ | |||
+ | html, body, div, span, applet, object, iframe, | ||
+ | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
+ | a, abbr, acronym, address, big, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, s, samp, | ||
+ | small, strike, strong, sub, sup, tt, var, | ||
+ | b, u, i, center, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, embed, | ||
+ | figure, figcaption, footer, header, hgroup, | ||
+ | menu, nav, output, ruby, section, summary, | ||
+ | time, mark, audio, video { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-size: 100%; | ||
+ | font: inherit; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | /* HTML5 display-role reset for older browsers */ | ||
+ | article, aside, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | body { | ||
+ | line-height: 1; | ||
+ | } | ||
+ | ol, ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | blockquote, q { | ||
+ | quotes: none; | ||
+ | } | ||
+ | blockquote:before, blockquote:after, | ||
+ | q:before, q:after { | ||
+ | content: ''; | ||
+ | content: none; | ||
+ | } | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | |||
+ | /* CSS RESET DONE */ | ||
+ | |||
+ | |||
+ | body { | ||
+ | color: #fff; | ||
+ | margin: 0 auto; | ||
+ | font: 1em/1.3em Montserrat, Helvetica, sans-serif; | ||
+ | } | ||
+ | .clearfix { | ||
+ | clear: both; | ||
+ | } | ||
+ | .container { | ||
+ | width: 80%; | ||
+ | height: 100%; | ||
+ | padding: 20px 10%; | ||
+ | text-align: center; | ||
+ | background-color: #36a7f3; | ||
+ | } | ||
+ | h1 { | ||
+ | margin: 40px 0; | ||
+ | font-size: 40px; | ||
+ | line-height: 40px; | ||
+ | font-weight: bold; | ||
+ | text-shadow: 0px 1px 1px #888; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 28px; | ||
+ | color: #fff; | ||
+ | font-weight: normal; | ||
+ | text-align: left; | ||
+ | margin-bottom: 20px; | ||
+ | text-shadow: 1px 1px 0 #1e88ce; | ||
+ | } | ||
+ | a { | ||
+ | text-align: left; | ||
+ | text-decoration: none; | ||
+ | color: #fff; | ||
+ | margin: 0 10px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | line-height: 32px; | ||
+ | padding: 0 0 40px 0; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | /* Button styles */ | ||
+ | .btn { | ||
+ | box-sizing:border-box; | ||
+ | -moz-box-sizing:border-box; | ||
+ | -webkit-box-sizing:border-box; | ||
+ | |||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 50px; | ||
+ | |||
+ | border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | |||
+ | line-height: 50px; | ||
+ | padding: 0 30px; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | |||
+ | -webkit-box-shadow: 0 3px 0 0 #1275b7; | ||
+ | box-shadow: 0 3px 0 0 #1275b7; | ||
+ | background-color: #1e88ce; | ||
+ | } | ||
+ | |||
+ | .btn:active, | ||
+ | .btn.active { | ||
+ | top: 2px; | ||
+ | -webkit-box-shadow: 0 1px 0 0 #1275b7; | ||
+ | box-shadow: 0 1px 0 0 #1275b7; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Progress Bar */ | ||
+ | |||
.content { | .content { | ||
width: 60%; | width: 60%; | ||
Line 88: | Line 283: | ||
border-right: 1px solid rgba(255,255,255,.4); | border-right: 1px solid rgba(255,255,255,.4); | ||
} | } | ||
- | + | ||
.progress { | .progress { | ||
position: relative; | position: relative; | ||
Line 103: | Line 298: | ||
position: fixed; | position: fixed; | ||
top: 10px; | top: 10px; | ||
- | + | ||
} | } | ||
.progress .bar { | .progress .bar { | ||
Line 133: | Line 328: | ||
line-height: 40px; | line-height: 40px; | ||
color: #36a7f3; | color: #36a7f3; | ||
- | + | ||
-webkit-transition: color .3s; | -webkit-transition: color .3s; | ||
transition: color .3s; | transition: color .3s; | ||
} | } | ||
+ | |||
+ | .footer { | ||
+ | height: 470px; | ||
+ | font-size: 28px; | ||
+ | text-align: center; | ||
+ | line-height: 470px; | ||
+ | background-color: #444; | ||
+ | } | ||
+ | |||
</script> | </script> | ||
Revision as of 21:32, 14 October 2014
Introduction
Content
Part 1: Do this thing!
Content
Part 2: Do that other thing!
Content