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

 
(24 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
#bubble_wrapper {
 
#bubble_wrapper {
 
     float:left;
 
     float:left;
−
     margin: 5% auto;
+
     margin: 0;
 +
    margin-left: 40px;
 +
    margin-top: 140px;
 
     /*position: fixed; top: 10%; */
 
     /*position: fixed; top: 10%; */
 
     position:fixed;  
 
     position:fixed;  
Line 29: Line 31:
  
 
#bubble_sidebar {
 
#bubble_sidebar {
−
 
+
    z-index: 600;
 
}
 
}
  
Line 39: Line 41:
 
   zoom: 1;  
 
   zoom: 1;  
 
   *display: inline;  
 
   *display: inline;  
 +
    font-size: 70%;
 +
    font-family: Roboto;
 
}
 
}
  
Line 51: Line 55:
  
 
.bubble1 {
 
.bubble1 {
−
     width: 110px;
+
     width: 80px;
−
     height: 110px;
+
     height: 80px;
 +
    margin-left: -25px;
 
}
 
}
  
 
.bubble1 span {
 
.bubble1 span {
−
     height: 110px;
+
     height: 80px;
 
}
 
}
  
 
.bubble2 {
 
.bubble2 {
−
     width: 100px;
+
     width: 110px;
−
     height: 100px;
+
     height: 110px;
−
     margin-left: 60px;
+
     margin-left: -15px;
 
}
 
}
  
 
.bubble2 span {
 
.bubble2 span {
−
     height: 100px;
+
     height: 110px;
 
}
 
}
  
 
.bubble3 {
 
.bubble3 {
−
     width: 90px;
+
     width: 60px;
−
     height: 90px;
+
     height: 60px;
−
     margin-left: 20px;
+
     margin-left: -30px;
 
     margin-top: 5px;
 
     margin-top: 5px;
 
}
 
}
  
 
.bubble3 span {
 
.bubble3 span {
−
     height: 90px;
+
     height: 60px;
 +
}
 +
 
 +
@media screen and (max-width: 1279px){
 +
  #bubble_wrapper{
 +
    display: none;
 +
  }
 
}
 
}
  
Line 86: Line 97:
 
<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());
 
−
    //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('blob inside');
 
−
            $blob.css({"display":"inline", "transform": "translateY(0)"}); // = 30 px inside right
 
−
          }
 
  
−
          // move blob out of view when page is scrolled up again
+
    $window.bind("scroll resize", function() {
−
          if (y <  60) {
+
        var gap = $window.height() - $el.height() - 370;
−
            //console.log('blob outside');
+
        var visibleFoot = 172 - $window.scrollBottom();
−
            $blob.css({"transform": "translateY(130px)"}); // = 100 px outside
+
        var scrollTop = $window.scrollTop()
−
          }
+
−
            // define position of blob relative to page top, increases dynamically with scrolling
+
−
            $blob.css({"top": top });
+
  
−
         } else {
+
         if (scrollTop > $document.height() - $window.height() -370){
−
             $blob.css({"display": "none" }); // if page is too small, no blob is displayed
+
             $el.css({
 +
                    top: (172 - scrollTop) + "px",
 +
                    bottom: "auto"
 +
            });
 
         }
 
         }
 
     });
 
     });
−
 
+
});
−
    $(window).resize(function(){
+
});
−
        if ($window.width() < 1144) {
+
−
            $blob.css({"display": "none" }); // if the user resizes the window when the blob is displayed
+
−
        }         
+
−
    });
+
−
});
+
−
 
+
  
  
Line 139: Line 133:
 
         <div id="bubble_wrapper">
 
         <div id="bubble_wrapper">
 
             <div id="bubble_sidebar" class="bubble1">
 
             <div id="bubble_sidebar" class="bubble1">
−
                     <span></span><p><a href=""></a></p>
+
                     <span></span><p><a id="bubble1" href=""><img id="bubble1_img" src=""></a></p>
 
             </div>
 
             </div>
  
 
             <div id="bubble_sidebar" class="bubble2">
 
             <div id="bubble_sidebar" class="bubble2">
−
                     <span></span><p><a href=""></a></p>
+
                     <span></span><p><a id="bubble2" href="#firstHeading">text</a></p>
 
             </div>
 
             </div>
  
 
             <div id="bubble_sidebar" class="bubble3">
 
             <div id="bubble_sidebar" class="bubble3">
−
                     <span></span><p><a href=""></a></p>
+
                     <span></span><p><a id="bubble3" href="">next</a></p>
 
             </div>
 
             </div>
 
         </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>

Latest revision as of 02:58, 19 September 2015