Difference between revisions of "Team:Freiburg/Testpage"
Line 19: | Line 19: | ||
/*========= END: style for navigation bar ==========*/ | /*========= END: style for navigation bar ==========*/ | ||
</style> | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | var $bubbles = $("#bubble_sidebar"), | ||
+ | $window = $(window), | ||
+ | $doc_heighttop = $(document).height() - $window.height(); | ||
+ | |||
+ | //console.log('windowwidth:'+$window.width()); | ||
+ | //console.log('windowheight:'+$window.height()); | ||
+ | |||
+ | $(window).scroll(function(event) { | ||
+ | if ($window.width() > 1144) { | ||
+ | // y is scroll progress (distance from top) | ||
+ | // top is about bottomline of window | ||
+ | var y = $(this).scrollTop(), | ||
+ | top = $(this).scrollTop() + $window.height() -100; | ||
+ | //console.log($(this).scrollTop()+' doc_heighttop:'+$doc_heighttop+' top:'+top); | ||
+ | |||
+ | // use CSS transform to move button into view when user scrolls down | ||
+ | if (y > 60 ) { | ||
+ | //console.log('bubbles inside'); | ||
+ | $bubbles.css({"display":"inline", "transform": "translateY(0)"}); // = 30 px inside right | ||
+ | } | ||
+ | |||
+ | // move bubbles out of view when page is scrolled up again | ||
+ | if (y < 60) { | ||
+ | //console.log('bubbles outside'); | ||
+ | $bubbles.css({"transform": "translateY(130px)"}); // = 100 px outside | ||
+ | } | ||
+ | // define position of bubbles relative to page top, increases dynamically with scrolling | ||
+ | $bubbles.css({"top": top }); | ||
+ | |||
+ | } else { | ||
+ | $bubbles.css({"display": "none" }); // if page is too small, no bubbles is displayed | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $(window).resize(function(){ | ||
+ | if ($window.width() < 1144) { | ||
+ | $bubbles.css({"display": "none" }); // if the user resizes the window when the bubbles is displayed | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | /* upwards navigation bubbles */ | ||
+ | |||
+ | #upwards_bubbles{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* min-width is chosen so the bubbles does just not interfere with the content box */ | ||
+ | /* 1021 content_box-width + 46 bubbles-width + 20 scrollbar + some buffer space */ | ||
+ | @media screen and (min-width: 1144px){ | ||
+ | #upwards_bubbles{ | ||
+ | transition: transform 0.5s ease; | ||
+ | display: inline; | ||
+ | position: absolute; | ||
+ | top: 900px; | ||
+ | right: 30px; | ||
+ | z-index: 1000; | ||
+ | transform: translateY(130px); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <div id="upwards_bubbles"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_bubbles.png"></a></div> | ||
+ | |||
+ | <style> | ||
Revision as of 16:27, 18 September 2015