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

 
(44 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<style>
 
<style>
−
/*===================Amazing Bubble Sidebar==========================*/
+
/*========= Implementing general font styling ========*/
−
.bubble_wrapper {
+
#bubble_wrapper p {
 +
    font-family: 'Roboto',sans-serif;
 +
    font-style: normal;
 +
    font-weight: 300;
 +
    font-size: 100%;
 +
}
 +
 
 +
 
 +
/*===================Amazing Bubble Sidebar STYLE ==========================*/
 +
#bubble_wrapper {
 
     float:left;
 
     float:left;
 +
    margin: 0;
 +
    margin-left: 40px;
 +
    margin-top: 140px;
 +
    /*position: fixed; top: 10%; */
 +
    position:fixed;
 
}
 
}
  
−
.bubble_sidebar {
+
#bubble_sidebar {
 
     border-radius:50%;
 
     border-radius:50%;
 
     background-color: #DDE7F1;
 
     background-color: #DDE7F1;
−
     border: 1px solid #0051A2;
+
     /*border: 1px solid #888;*/
 +
    box-shadow: inset -1px -2px 5px 2px #F9F9F9;
 
     text-align: center;
 
     text-align: center;
 +
    color: #C5162F;
 
}
 
}
  
−
.bubble_sidebar p {
+
#bubble_sidebar {
 +
    z-index: 600;
 +
}
 +
 
 +
#bubble_sidebar p {
 +
    margin: 0;
 +
    /*padding: 35px 0px 0px 0px;*/
 +
    vertical-align: middle;
 +
  display: inline-block;
 +
  zoom: 1;
 +
  *display: inline;
 +
    font-size: 70%;
 +
    font-family: Roboto;
 +
}
 +
 
 +
#bubble_sidebar span {
 
     margin: 0;
 
     margin: 0;
−
     padding: 35px 0px 0px 0px;
+
     /*padding: 35px 0px 0px 0px;*/
 +
    vertical-align: middle;
 +
  display: inline-block;
 +
  zoom: 1;
 +
  *display: inline;   
 
}
 
}
  
 
.bubble1 {
 
.bubble1 {
−
     width: 100px;
+
     width: 80px;
−
     height: 100px;
+
     height: 80px;
 +
    margin-left: -25px;
 +
}
 +
 
 +
.bubble1 span {
 +
    height: 80px;
 
}
 
}
  
 
.bubble2 {
 
.bubble2 {
−
     width: 90px;
+
     width: 110px;
−
     height: 90px;
+
     height: 110px;
−
     margin-left: 60px;
+
     margin-left: -15px;
 +
}
 +
 
 +
.bubble2 span {
 +
    height: 110px;
 
}
 
}
  
 
.bubble3 {
 
.bubble3 {
−
     width: 80px;
+
     width: 60px;
−
     height: 80px;
+
     height: 60px;
−
     margin-left: 20px;
+
     margin-left: -30px;
 
     margin-top: 5px;
 
     margin-top: 5px;
 
}
 
}
 +
 +
.bubble3 span {
 +
    height: 60px;
 +
}
 +
 +
@media screen and (max-width: 1279px){
 +
  #bubble_wrapper{
 +
    display: none;
 +
  }
 +
}
 +
 
</style>
 
</style>
 +
 +
 +
 +
<script>
 +
 +
$().ready(function() {
 +
$(function() {
 +
    $.fn.scrollBottom = function() {
 +
        return $(document).height() - this.scrollTop() - this.height();
 +
    };
 +
 +
    var $el = $('#bubble_wrapper>div');
 +
    var $window = $(window);
 +
 +
 +
 +
 +
    $window.bind("scroll resize", function() {
 +
        var gap = $window.height() - $el.height() - 370;
 +
        var visibleFoot = 172 - $window.scrollBottom();
 +
        var scrollTop = $window.scrollTop()
 +
 +
        if (scrollTop > $document.height() - $window.height() -370){
 +
            $el.css({
 +
                    top: (172 - scrollTop) + "px",
 +
                    bottom: "auto"
 +
            });
 +
        }
 +
    });
 +
});
 +
});
 +
 +
 +
</script>
  
  
Line 42: Line 131:
 
     <div class="central_position_wrap">
 
     <div class="central_position_wrap">
  
−
         <div class="bubble_wrapper">
+
         <div id="bubble_wrapper">
−
             <div class="bubble_sidebar bubble1">
+
             <div id="bubble_sidebar" class="bubble1">
−
                     <p>Human Practice</p>
+
                     <span></span><p><a id="bubble1" href=""><img id="bubble1_img" src=""></a></p>
 
             </div>
 
             </div>
  
−
             <div class="bubble_sidebar bubble2">
+
             <div id="bubble_sidebar" class="bubble2">
−
                     <p>Ack-<br>nowledge-<br>ments</p>
+
                     <span></span><p><a id="bubble2" href="#firstHeading">text</a></p>
 
             </div>
 
             </div>
  
−
<div class="bubble_sidebar bubble3">
+
            <div id="bubble_sidebar" class="bubble3">
−
    <p>Main Results</p>
+
                    <span></span><p><a id="bubble3" href="">next</a></p>
−
</div>
+
            </div>
 
         </div>
 
         </div>
  

Latest revision as of 02:58, 19 September 2015