|
|
(43 intermediate revisions by the same user not shown) |
Line 2: |
Line 2: |
| <head> | | <head> |
| <meta charset="utf-8"/> | | <meta charset="utf-8"/> |
− | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link rel="stylesheet" type="text/css" | | <link rel="stylesheet" type="text/css" |
− | href="http://20161.igem.org/Template:Team:TU_Darmstadt/Css?action=raw&ctype=text/css" /> | + | href="https://2016.igem.org/Template:Team:TU_Darmstadt/Css?action=raw&ctype=text/css" /> |
− | | + | <script type="text/javascript" src="https://2016.igem.org/Template:Team:TU_Darmstadt/Js? |
− | <script type="text/javascript"> | + | action=raw&ctype=text/javascript"></script> |
− | (function($) {
| + | </head> |
− | | + | <noscript> |
− | skel.breakpoints({
| + | <style type="text/css"> |
− | wide: '(max-width: 1680px)',
| + | .js-message { |
− | normal: '(max-width: 1280px)',
| + | position: fixed; |
− | narrow: '(max-width: 980px)',
| + | top: 30px; |
− | narrower: '(max-width: 840px)',
| + | right: 30px; |
− | mobile: '(max-width: 736px)',
| + | background: white; |
− | mobilep: '(max-width: 480px)'
| + | line-height: 12px; |
− | });
| + | font-size: 10px; |
− | | + | width: 280px; |
− | $(function() {
| + | z-index: 999; |
− | | + | color: red; |
− | var $window = $(window),
| + | |
− | $body = $('body');
| + | |
− | | + | |
− | // Disable animations/transitions until the page has loaded.
| + | |
− | $body.addClass('is-loading');
| + | |
− | | + | |
− | $window.on('load', function() {
| + | |
− | $body.removeClass('is-loading');
| + | |
− | });
| + | |
− | | + | |
− | // Fix: Placeholder polyfill.
| + | |
− | $('form').placeholder();
| + | |
− | | + | |
− | // Prioritize "important" elements on narrower.
| + | |
− | skel.on('+narrower -narrower', function() {
| + | |
− | $.prioritize(
| + | |
− | '.important\\28 narrower\\29',
| + | |
− | skel.breakpoint('narrower').active
| + | |
− | );
| + | |
− | });
| + | |
− | | + | |
− | // Dropdowns.
| + | |
− | $('#nav > ul').dropotron({
| + | |
− | offsetY: -15,
| + | |
− | hoverDelay: 0,
| + | |
− | alignment: 'center'
| + | |
− | });
| + | |
− | | + | |
− | // Off-Canvas Navigation.
| + | |
− | | + | |
− | // Title Bar.
| + | |
− | $(
| + | |
− | '<div id="titleBar">' +
| + | |
− | '<a href="#navPanel" class="toggle"></a>' +
| + | |
− | '<span class="title">' + $('#logo').html() + '</span>' +
| + | |
− | '</div>'
| + | |
− | )
| + | |
− | .appendTo($body);
| + | |
− | | + | |
− | // Navigation Panel.
| + | |
− | $(
| + | |
− | '<div id="navPanel">' +
| + | |
− | '<nav>' +
| + | |
− | $('#nav').navList() +
| + | |
− | '</nav>' +
| + | |
− | '</div>'
| + | |
− | )
| + | |
− | .appendTo($body)
| + | |
− | .panel({
| + | |
− | delay: 500,
| + | |
− | hideOnClick: true,
| + | |
− | hideOnSwipe: true,
| + | |
− | resetScroll: true,
| + | |
− | resetForms: true,
| + | |
− | side: 'left',
| + | |
− | target: $body,
| + | |
− | visibleClass: 'navPanel-visible'
| + | |
− | });
| + | |
− | | + | |
− | // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
| + | |
− | if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
| + | |
− | $('#titleBar, #navPanel, #page-wrapper')
| + | |
− | .css('transition', 'none');
| + | |
− | | + | |
− | });
| + | |
− | | + | |
− | })(jQuery);
| + | |
− | </script>
| + | |
− | <script type="text/javascript">
| + | |
− | $(document).ready(function(){
| + | |
− | $("#header").load("header.html");
| + | |
− | $("#footer").load("footer.html");
| + | |
− | $(window).scroll(function(event){
| + | |
− | var scrollY = $(window).scrollTop();
| + | |
− | var navbar = $(".navbar");
| + | |
− | var computer = $(".computer")
| + | |
− | var tablet = $(".tablet")
| + | |
− | var topButton = $('button.back_top');
| + | |
− | var highlights = $(".rechts");
| + | |
− |
| + | |
− | if(scrollY > $("#title").height()){
| + | |
− | navbar.css({"top":"17px", "position":"fixed"});
| + | |
− | }else{
| + | |
− | navbar.css({"top":"0", "position":"static"});
| + | |
− | }
| + | |
− |
| + | |
− | // if(scrollY > 1300){
| + | |
− | // highlights.css({"top": "10vh","position": "fixed","right":"0"});
| + | |
− | // }else{
| + | |
− | // highlights.css({"top": "0","position": "static"});
| + | |
− | //}
| + | |
− |
| + | |
− |
| + | |
− | /*$("#lab1b").click(function(){
| + | |
− | $("#lab1c").toggle();
| + | |
− | });*/
| + | |
− |
| + | |
− | }); | + | |
− | $('#groupparts').load('cgi/api/groupparts.cgi',{
| + | |
− | t:'iGEM016',g:'TU_Darmstadt'},function(){
| + | |
− | $('#groupparts').tablesorter();});
| + | |
− |
| + | |
− | });
| + | |
− | | + | |
− | | + | |
− | $(document).ready(function(){
| + | |
− |
| + | |
− | if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
| + | |
− | $(".tablet").show();
| + | |
− | $("#tabletbutton").click(function(){
| + | |
− | $("#tabletmenu").toggle();
| + | |
− | });
| + | |
− | }
| + | |
− | else{
| + | |
− | $(".computer").show();
| + | |
− | }
| + | |
− | });
| + | |
− | | + | |
− | $(document).ready(function(){
| + | |
− |
| + | |
− | if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
| + | |
− | $("#logoleiste").css({"width":"70vw"});
| + | |
− | }
| + | |
− | else{
| + | |
− | $("#logoleiste").css({"width":"50vw"});
| + | |
− | }
| + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | | + | |
− | <!-- START JS and CSS for the Scrollbox -->
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | $(window).scroll(function(e) {
| + | |
− | var $element = $('.scrollbox');
| + | |
− | var headerHeight = $('#head').outerHeight();
| + | |
− | var isFixed = ($element.css('position') == 'fixed');
| + | |
− | | + | |
− | if ($(this).scrollTop() > headerHeight) {
| + | |
− | if(!isFixed) { | + | |
− | console.log('scroll');
| + | |
− | $element.addClass("scrolled");
| + | |
− | }
| + | |
| } | | } |
− | if ($(this).scrollTop() < headerHeight) { | + | </style> |
− | if(isFixed) {
| + | <div class="js-message abstract"> |
− | console.log('dont scroll');
| + | If you can see this message, you do not use Javascript. This Website is best to use with Javascript enabled. Without Javascript enabled, many features including the mobile version are not usable. |
− | $element.removeClass("scrolled");
| + | </div> |
− | }
| + | </noscript> |
− | }
| + | |
− | });
| + | |
− | | + | |
− | function scrollToTop() {
| + | |
− | $('body,html').animate({
| + | |
− | scrollTop: 0
| + | |
− | }, 400);
| + | |
− | }
| + | |
− | </script> | + | |
− | | + | |
− | <style> | + | |
− | .scrollbox {
| + | |
− | z-index: 999;
| + | |
− | -webkit-transition: top 1.5s;
| + | |
− | transition: top 1.5s;
| + | |
− | width: 13.6vw;
| + | |
− | }
| + | |
− | | + | |
− | .scrollbox div, .scrollbox button {
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | | + | |
− | .scrollbox.scrolled {
| + | |
− | position: fixed;
| + | |
− | top: 70px;
| + | |
− | bottom: auto;
| + | |
− | }
| + | |
− | | + | |
− | @media only screen and (max-width: 800px) {
| + | |
− | | + | |
− | body{
| + | |
− | width:100%;
| + | |
− | padding:0;
| + | |
− | }
| + | |
− | | + | |
− | .vviki{
| + | |
− | width:100%;
| + | |
− | padding:0;
| + | |
− | }
| + | |
− | | + | |
− | #HQ_page{
| + | |
− | width:100%;
| + | |
− | padding:0;
| + | |
− | }
| + | |
− | | + | |
− | #head{
| + | |
− | padding:0;
| + | |
− | margin:0;
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | .page {
| + | |
− | width: 100%;
| + | |
− | float: none;
| + | |
− | margin-left:0;
| + | |
− | margin-right:0;
| + | |
− | }
| + | |
− | | + | |
− | .page_full {
| + | |
− | width: 100%;
| + | |
− | float: none;
| + | |
− | margin-left:0;
| + | |
− | margin-right:0;
| + | |
− | }
| + | |
− | | + | |
− | .page > .abstract {
| + | |
− | width: 90%;
| + | |
− | }
| + | |
− |
| + | |
− | .abstract2{ | + | |
− | width:80%;
| + | |
− | }
| + | |
− | | + | |
− | .right {
| + | |
− | width: 100%;
| + | |
− | float: none;
| + | |
− | }
| + | |
− | | + | |
− | .scrollbox {
| + | |
− | width: 100%;
| + | |
− | left: 0px;
| + | |
− | right:0px;
| + | |
− | background-color: whitesmoke;
| + | |
− | box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
| + | |
− | border:3px solid #019ac8;
| + | |
− | border-radius:6px;
| + | |
− | }
| + | |
− | | + | |
− | .scrollbox.scrolled {
| + | |
− | top: auto;
| + | |
− | bottom: 0;
| + | |
− | }
| + | |
− | | + | |
− | .scrollbox > div {
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .back_top_full{
| + | |
− | width:auto;
| + | |
− | }
| + | |
− | | + | |
− | .see_other_full{
| + | |
− | width:auto;
| + | |
− | }
| + | |
− | | + | |
− | .highlights{
| + | |
− | border:none;
| + | |
− | }
| + | |
− |
| + | |
− | .banner{
| + | |
− | width:100%;
| + | |
− | margin:0;
| + | |
− | }
| + | |
− | | + | |
− | #banner{
| + | |
− | width:100%;
| + | |
− | margin:0;
| + | |
− | }
| + | |
− | | + | |
− | #title{
| + | |
− | width:100%;
| + | |
− | margin:0;
| + | |
− | }
| + | |
− | .navbar{
| + | |
− | width:100%;
| + | |
− | margin:0;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
− | </style> | + | |
− | | + | |
− | <!-- END Scrollbox -->
| + | |
− | <style>@import 'https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister';</style>
| + | |
− | </head> | + | |
| </html> | | </html> |