Difference between revisions of "Template:Team:Freiburg/wiki content start bubble"

Line 81: Line 81:
  
  
−
/* upwards navigation blob */
+
/*============== Movement of Amazing Bubble Sidebar ==============*/
−
 
+
/* min-width is chosen so the bubbles do just not interfere with the content box */
−
#bubble_wrapper{
+
/* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
−
    display: none;
+
−
}
+
−
 
+
−
 
+
 
@media screen and (min-width: 1144px){
 
@media screen and (min-width: 1144px){
−
     #bubble_wrapper{
+
     #upwards_blob{
 
         transition: transform 0.5s ease;
 
         transition: transform 0.5s ease;
 
         display: inline;
 
         display: inline;
Line 99: Line 95:
 
     }
 
     }
 
}
 
}
−
 
 
</style>
 
</style>
  
Line 106: Line 101:
 
<script>
 
<script>
  
 +
$().ready(function() {
 +
$(function() {
 +
    $.fn.scrollBottom = function() {
 +
        return $(document).height() - this.scrollTop() - this.height();
 +
    };
  
−
$(document).ready(function(){
+
    var $el = $('#bubble_wrapper>div');
−
  var $blob = $('#bubble_wrapper>div'),
+
    var $window = $(window);
−
      $window = $(window),
+
−
      $doc_heighttop = $(document).height() - $window.height();
+
  
−
     //console.log('windowwidth:'+$window.width());
+
     $window.bind("scroll resize", function() {
−
    //console.log('windowheight:'+$window.height());
+
         var gap = $window.height() - $el.height() - 370;
−
 
+
         var visibleFoot = 172 - $window.scrollBottom();
−
    $(window).scroll(function(event) {
+
        var scrollTop = $window.scrollTop()
−
         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('blob inside');
+
−
            $blob.css({"display":"inline", "transform": "translateY(0)"}); // = 30 px inside right
+
−
          }
+
−
 
+
−
          // move blob out of view when page is scrolled up again
+
−
          if (y <  60) {
+
−
            //console.log('blob outside');
+
−
            $blob.css({"transform": "translateY(130px)"}); // = 100 px outside
+
−
          }
+
−
            // define position of blob relative to page top, increases dynamically with scrolling
+
−
            $blob.css({"top": top });
+
  
 +
        if(scrollTop < 172 + 10){
 +
            $el.css({
 +
                top: (172 - scrollTop) + "px",
 +
                bottom: "auto"
 +
            });
 +
        }else if (visibleFoot > gap) {
 +
            $el.css({
 +
                top: "auto",
 +
                bottom: visibleFoot + "px"
 +
            });
 
         } else {
 
         } else {
−
             $blob.css({"display": "none" }); // if page is too small, no blob is displayed
+
             $el.css({
 +
                top: 0,
 +
                bottom: "auto"
 +
            });
 
         }
 
         }
 
     });
 
     });
−
 
+
});
−
    $(window).resize(function(){
+
});
−
        if ($window.width() < 1144) {
+
−
            $blob.css({"display": "none" }); // if the user resizes the window when the blob is displayed
+
−
        }         
+
−
    });
+
−
});
+
−
 
+
−
 
+
  
 
</script>
 
</script>
Line 171: Line 155:
 
         </div>
 
         </div>
  
−
    <div class="background_image_left"><img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_wiki_background_2_parted_left.png"></div>
+
<div class="background_image_left"><img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_wiki_background_2_parted_left.png"></div>
  
−
    <div class="background_image_right"><img src="https://static.igem.org/mediawiki/2015/f/f4/Freiburg_wiki_background_2_parted_right.png"></div>
+
<div class="background_image_right"><img src="https://static.igem.org/mediawiki/2015/f/f4/Freiburg_wiki_background_2_parted_right.png"></div>
  
 
<div class="page_content">
 
<div class="page_content">
 
</html>
 
</html>

Revision as of 13:37, 18 September 2015