Scrolling now works correctly when loading thumbnails

client/css/style.css

@@ -615,7 +615,7 @@ button {
 	display: none;
 	color: #222;
 	font: 12px Lato;
-	max-width: 480px;
+	max-width: 100%;
 	padding: 6px 8px;
 	margin-top: 2px;
 }

client/js/libs/jquery/stickyscroll.js

@@ -1,7 +1,7 @@
 /*!
  * stickyscroll
  * https://github.com/erming/stickyscroll
- * v2.1.1
+ * v2.2.0
  */
 (function($) {
 	$.fn.sticky = function() {
@@ -10,21 +10,21 @@
 				$(this).sticky(options);
 			});
 		}
-		
+
 		var isBottom = false;
 		var self = this;
-		
+
 		this.unbind(".sticky");
 		this.on("beforeAppend.sticky", function() {
 			isBottom = isScrollBottom.call(self);
 		});
-		
+
 		this.on("afterAppend.sticky", function() {
 			if (isBottom) {
 				self.scrollBottom();
 			}
 		});
-		
+
 		var overflow = this.css("overflow-y");
 		if (overflow == "visible") {
 			overflow = "auto";
@@ -32,12 +32,12 @@
 		this.css({
 			"overflow-y": overflow
 		});
-		
+
 		$(window).unbind(".sticky");
 		$(window).on("resize.sticky", function() {
 				self.scrollBottom();
 		});
-		
+
 		this.scrollBottom();
 		return this;
 	};
@@ -48,6 +48,8 @@
 		});
 	};
 
+	$.fn.isScrollBottom = isScrollBottom;
+
 	function isScrollBottom() {
 		if ((this.scrollTop() + this.outerHeight() + 1) >= this.prop("scrollHeight")) {
 			return true;

client/js/shout.js

@@ -595,7 +595,21 @@ $(function() {
 
 	chat.on("click", ".toggle-button", function() {
 		var self = $(this);
-		self.parent().next(".toggle-content").toggleClass("show");
+		var chat = self.closest(".chat");
+		var bottom = chat.isScrollBottom();
+		var content = self.parent().next(".toggle-content");
+		if (bottom && !content.hasClass("show")) {
+			var img = content.find("img");
+			if (img.length != 0 && !img.width()) {
+				img.on("load", function() {
+					chat.scrollBottom();
+				});
+			}
+		}
+		content.toggleClass("show");
+		if (bottom) {
+			chat.scrollBottom();
+		}
 	});
 
 	var windows = $("#windows");