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

Line 80: Line 80:
 
}
 
}
  
−
 
−
/*============== Movement of Amazing Bubble Sidebar ==============*/
 
−
/* min-width is chosen so the bubbles do just not interfere with the content box */
 
−
/* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
 
−
@media screen and (min-width: 1144px){
 
−
    #upwards_blob{
 
−
        transition: transform 0.5s ease;
 
−
        display: inline;
 
−
        position: absolute;
 
−
        top: 900px;
 
−
        right: 30px;
 
−
        z-index: 1000;
 
−
        transform: translateY(130px);
 
−
    }
 
−
}
 
 
</style>
 
</style>
  
Line 101: Line 86:
 
<script>
 
<script>
  
−
$().ready(function() {
 
−
$(function() {
 
−
    $.fn.scrollBottom = function() {
 
−
        return $(document).height() - this.scrollTop() - this.height();
 
−
    };
 
  
−
    var $el = $('#bubble_wrapper>div');
+
$(document).ready(function(){
−
    var $window = $(window);
+
  var $blob = $('#bubble_wrapper>div'),
 +
      $window = $(window),
 +
      $doc_heighttop = $(document).height() - $window.height();
  
−
     $window.bind("scroll resize", function() {
+
     //console.log('windowwidth:'+$window.width());
−
         var gap = $window.height() - $el.height() - 10;
+
    //console.log('windowheight:'+$window.height());
−
         var visibleFoot = 172 - $window.scrollBottom();
+
 
−
        var scrollTop = $window.scrollTop()
+
    $(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('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 {
−
             $el.css({
+
             $blob.css({"display": "none" }); // if page is too small, no blob is displayed
−
                top: 0,
+
−
                bottom: (370 - scrollBottom) + "px"
+
−
            });
+
 
         }
 
         }
 
     });
 
     });
−
});
+
 
−
});
+
    $(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 155: Line 151:
 
         </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:28, 18 September 2015