Difference between revisions of "Template:Team:Freiburg/wiki content start bubble"
(39 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<style> | <style> | ||
− | /*===================Amazing Bubble Sidebar==========================*/ | + | /*========= Implementing general font styling ========*/ |
− | + | #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- | + | margin: 0; |
+ | margin-left: 40px; | ||
+ | margin-top: 140px; | ||
+ | /*position: fixed; top: 10%; */ | ||
+ | position:fixed; | ||
} | } | ||
− | + | #bubble_sidebar { | |
border-radius:50%; | border-radius:50%; | ||
background-color: #DDE7F1; | background-color: #DDE7F1; | ||
Line 14: | Line 27: | ||
box-shadow: inset -1px -2px 5px 2px #F9F9F9; | box-shadow: inset -1px -2px 5px 2px #F9F9F9; | ||
text-align: center; | text-align: center; | ||
+ | color: #C5162F; | ||
} | } | ||
− | + | #bubble_sidebar { | |
− | + | z-index: 600; | |
} | } | ||
− | + | #bubble_sidebar p { | |
margin: 0; | margin: 0; | ||
/*padding: 35px 0px 0px 0px;*/ | /*padding: 35px 0px 0px 0px;*/ | ||
Line 27: | Line 41: | ||
zoom: 1; | zoom: 1; | ||
*display: inline; | *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;*/ | ||
Line 39: | Line 55: | ||
.bubble1 { | .bubble1 { | ||
− | width: | + | width: 80px; |
− | height: | + | height: 80px; |
+ | margin-left: -25px; | ||
} | } | ||
.bubble1 span { | .bubble1 span { | ||
− | height: | + | height: 80px; |
} | } | ||
.bubble2 { | .bubble2 { | ||
− | width: | + | width: 110px; |
− | height: | + | height: 110px; |
− | margin-left: | + | margin-left: -15px; |
} | } | ||
.bubble2 span { | .bubble2 span { | ||
− | height: | + | height: 110px; |
} | } | ||
.bubble3 { | .bubble3 { | ||
− | width: | + | width: 60px; |
− | height: | + | height: 60px; |
− | margin-left: | + | margin-left: -30px; |
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
.bubble3 span { | .bubble3 span { | ||
− | height: | + | 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 73: | Line 131: | ||
<div class="central_position_wrap"> | <div class="central_position_wrap"> | ||
− | <div | + | <div id="bubble_wrapper"> |
− | <div | + | <div id="bubble_sidebar" class="bubble1"> |
− | <span></span><p> | + | <span></span><p><a id="bubble1" href=""><img id="bubble1_img" src=""></a></p> |
</div> | </div> | ||
− | <div | + | <div id="bubble_sidebar" class="bubble2"> |
− | <span></span><p> | + | <span></span><p><a id="bubble2" href="#firstHeading">text</a></p> |
</div> | </div> | ||
− | <div | + | <div id="bubble_sidebar" class="bubble3"> |
− | <span></span><p> | + | <span></span><p><a id="bubble3" href="">next</a></p> |
</div> | </div> | ||
</div> | </div> |
Latest revision as of 02:58, 19 September 2015