(26 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
<script type="text/javascript" src="https://2018.igem.org/Template:Toronto/js/jqueryeasing1_3?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2018.igem.org/Template:Toronto/js/jqueryeasing1_3?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript" async | ||
+ | src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async> | ||
+ | </script> | ||
</head> | </head> | ||
Line 358: | Line 362: | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
} | } | ||
+ | |||
+ | |||
+ | .page-section { | ||
+ | /*height: 480px;*/ | ||
+ | width: 60%; | ||
+ | margin-left: 25%; | ||
+ | margin-top: 0px; | ||
+ | padding: 3em; | ||
+ | background: linear-gradient(45deg, #ffffff 10%, #ffffff 90%); | ||
+ | color: black; | ||
+ | box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5); | ||
+ | } | ||
+ | .navigation { | ||
+ | transition: all 0.1s ease; | ||
+ | position: fixed; | ||
+ | width: 20%; | ||
+ | margin-left: 2%; | ||
+ | background-color: #999; | ||
+ | color: #ffffff; | ||
+ | border-radius: 20px; | ||
+ | text-align: center; | ||
+ | font-family: "Arial", Helvetica, sans-serif; | ||
+ | font-size: 14px; | ||
+ | line-height: 14px; | ||
+ | } | ||
+ | .navigation__link { | ||
+ | display: block; | ||
+ | color: #ddd; | ||
+ | text-decoration: none; | ||
+ | padding: 10px; | ||
+ | font-weight: 400; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | .navigation__link:hover { | ||
+ | background-color: #aaa; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | .navigation__link.active { | ||
+ | color: white; | ||
+ | background-color: rgba(0, 0, 0, 0.1); | ||
+ | } | ||
+ | .backgroundTertiaryHandler{ | ||
+ | background-color: black; | ||
+ | background: linear-gradient(0deg, #ffffff 10%, rgba(15,65,92,1.0) 90%); | ||
+ | padding-top: 25px; | ||
+ | margin-top: 0px; | ||
+ | } | ||
+ | .backgroundTertiaryHandler h3{ | ||
+ | font-size: 64px; | ||
+ | line-height: 65px; | ||
+ | text-align: center; | ||
+ | color: black; | ||
+ | } | ||
+ | .backgroundTertiaryHandler h1{ | ||
+ | font-size: 24px; | ||
+ | line-height: 25px; | ||
+ | color: black; | ||
+ | } | ||
+ | .backgroundTertiaryHandler p{ | ||
+ | font-size: 14px; | ||
+ | line-height: 14px; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
Line 434: | Line 502: | ||
.animate({'top':'25px'},200); | .animate({'top':'25px'},200); | ||
}); | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $('a[href*=#]').bind('click', function(e) { | ||
+ | e.preventDefault(); // prevent hard jump, the default behavior | ||
+ | |||
+ | var target = $(this).attr("href"); // Set the target as variable | ||
+ | |||
+ | // perform animated scrolling by getting top-position of target-element and set it as scroll target | ||
+ | $('html, body').stop().animate({ | ||
+ | scrollTop: $(target).offset().top | ||
+ | }, 600, function() { | ||
+ | location.hash = target; //attach the hash (#jumptarget) to the pageurl | ||
+ | }); | ||
+ | |||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | var scrollDistance = $(window).scrollTop(); | ||
+ | |||
+ | // Show/hide menu on scroll | ||
+ | //if (scrollDistance >= 850) { | ||
+ | // $('nav').fadeIn("fast"); | ||
+ | //} else { | ||
+ | // $('nav').fadeOut("fast"); | ||
+ | //} | ||
+ | |||
+ | // Assign active class to nav links while scolling | ||
+ | $('.page-section').each(function(i) { | ||
+ | if ($(this).position().top <= scrollDistance) { | ||
+ | $('.navigation a.active').removeClass('active'); | ||
+ | $('.navigation a').eq(i).addClass('active'); | ||
+ | } | ||
+ | }); | ||
+ | }).scroll(); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | $(function() { | ||
+ | var $anchor = $("#scroller-anchor"); | ||
+ | var $scroller = $('#mainNav'); | ||
+ | |||
+ | var move = function() { | ||
+ | var st = $(window).scrollTop(); | ||
+ | var ot = $anchor.offset().top - 50; | ||
+ | if(st > ot) { | ||
+ | $scroller.css({ | ||
+ | position: "fixed", | ||
+ | top: "50px", | ||
+ | float: "left" | ||
+ | }); | ||
+ | } else { | ||
+ | $scroller.css({ | ||
+ | position: "relative", | ||
+ | top: "", | ||
+ | float: "left" | ||
+ | }); | ||
+ | } | ||
+ | }; | ||
+ | $(window).scroll(move); | ||
+ | move(); | ||
}); | }); | ||
</script> | </script> | ||
Line 468: | Line 602: | ||
</a> | </a> | ||
<div class="sdt_box" style="z-index: 99; opacity: 1.0;"> | <div class="sdt_box" style="z-index: 99; opacity: 1.0;"> | ||
− | |||
<a href="https://2018.igem.org/Team:Toronto/Model">Model</a> | <a href="https://2018.igem.org/Team:Toronto/Model">Model</a> | ||
</div> | </div> | ||
Line 485: | Line 618: | ||
<div class="sdt_box" style="z-index: 99; opacity: 1.0;"> | <div class="sdt_box" style="z-index: 99; opacity: 1.0;"> | ||
<a href="https://2018.igem.org/Team:Toronto/Human_Practices">Human Practices</a> | <a href="https://2018.igem.org/Team:Toronto/Human_Practices">Human Practices</a> | ||
− | <a href="https://2018.igem.org/Team:Toronto/ | + | <a href="https://2018.igem.org/Team:Toronto/Public_Engagement">Engagement</a> |
<a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Outreach">Outreach</a> | <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Outreach">Outreach</a> | ||
</div> | </div> |
Latest revision as of 00:23, 17 October 2018