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

Revision as of 12:58, 18 September 2015 (view source) SabineB (Talk | contribs) ← Older edit		Latest revision as of 02:58, 19 September 2015 (view source) JulianB (Talk | contribs)
(28 intermediate revisions by 2 users not shown)
Line 14:		Line 14:
	#bubble_wrapper {		#bubble_wrapper {
	float:left;		float:left;
−	margin-right: 1%;	+	margin: 0;
−	margin-left: 1%;	+	margin-left: 40px;
−	margin-top: 5%;	+	margin-top: 140px;
	/*position: fixed; top: 10%; */		/*position: fixed; top: 10%; */
	position:fixed;		position:fixed;
Line 31:		Line 31:
	#bubble_sidebar {		#bubble_sidebar {
−		+	z-index: 600;
	}		}
Line 41:		Line 41:
	zoom: 1;		zoom: 1;
	*display: inline;		*display: inline;
		+	font-size: 70%;
		+	font-family: Roboto;
	}		}
Line 53:		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 111:		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 145:		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

text

next