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

 
(27 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){
−
/*============== Movement of Amazing Bubble Sidebar ==============*/
+
  #bubble_wrapper{
−
/* min-width is chosen so the bubbles do just not interfere with the content box */
+
    display: none;
−
/* 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 109: Line 105:
 
     var $el = $('#bubble_wrapper>div');
 
     var $el = $('#bubble_wrapper>div');
 
     var $window = $(window);
 
     var $window = $(window);
 +
 +
 +
  
 
     $window.bind("scroll resize", function() {
 
     $window.bind("scroll resize", function() {
−
         var gap = $window.height() - $el.height() - 10;
+
         var gap = $window.height() - $el.height() - 370;
 
         var visibleFoot = 172 - $window.scrollBottom();
 
         var visibleFoot = 172 - $window.scrollBottom();
 
         var scrollTop = $window.scrollTop()
 
         var scrollTop = $window.scrollTop()
  
−
         if(scrollTop < 172 + 10){
+
         if (scrollTop > $document.height() - $window.height() -370){
 
             $el.css({
 
             $el.css({
−
                top: (172 - scrollTop) + "px",
+
                    top: (172 - scrollTop) + "px",
−
                bottom: "auto"
+
                    bottom: "auto"
−
            });
+
−
        }else if (visibleFoot > gap) {
+
−
            $el.css({
+
−
                top: "auto",
+
−
                bottom: visibleFoot + "px"
+
−
            });
+
−
        } else {
+
−
            $el.css({
+
−
                top: 0,
+
−
                bottom: (100+scrollBottom)
+
 
             });
 
             });
 
         }
 
         }
 
     });
 
     });
 
});
 
});
−
});
+
});
 +
 
  
 
</script>
 
</script>
Line 143: 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>

Latest revision as of 02:58, 19 September 2015