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

""