v1.0.1 Bug fixes

tonymorello · Jul 1, 2014 · bfd5d90 · bfd5d90
1 parent 5ca4d7d
commit bfd5d90
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/jquery.skroller.js b/jquery.skroller.js
@@ -47,7 +47,8 @@
 				borderRadius,
 				speed,
 				adjustedWidth,
-				offset;
+				offset,
+				has_scrollbar;
 
 			$(window).load(function(e){
 
@@ -65,7 +66,6 @@
 				// Set the mouse state to 'up' for future use
 				var mouse_state = 'up';
 
-				var has_scrollbar = false;
 
 				// determine scrollbar style
 				switch(style) {
@@ -83,11 +83,13 @@
 						break;
 				}
 
+				buildFrame();
+
 				initialize();
 
 				createStructure();
 
-				detectContentChange();
+				listenForChange();
 
 			});
 
@@ -98,8 +100,6 @@
 			function createStructure(){
 				// determine whether the content needs a scrollbar
 				if(targetH>height){
-					has_scrollbar = true;
-					buildFrame();
 					buildRail();
 					buildScrollbar();
 					calculateSpeed();
@@ -128,6 +128,8 @@
 
 				// Calculate how much of the target element will overflow
 				offset		= (targetH - height) + (padding*2);
+				// Min value for offset is 0
+				if(offset<0) offset = 0;
 
 
 			}
@@ -167,6 +169,7 @@
 
 			// 3. RAIL
 			function buildRail(){
+				var has_scrollbar = true;
 				// attach rail to frame
 				frame.append('<div class="sk_rail"></div>');
 				// set shortcut handle to rail
@@ -282,19 +285,21 @@
 			}
 
 			// 9. DETECT CONTENT CHANGE
-			function detectContentChange(){
+			function listenForChange(){
 
-				frame.on('mousemove', function(e){
+				setInterval(function(e){
 
 					// get current target element total height
 					targetH = target.height();
 					// get current offset value
 					var checkOffset	= (targetH - height) + (padding*2);
+					// Set min value for offset to 0
+					if(checkOffset<0) checkOffset=0;
 
 					// evaluate if the content changed
 					if(checkOffset != offset){
 
-						if(has_scrollbar == false){
+						if(!has_scrollbar){
 							createStructure();
 						}
 
@@ -313,7 +318,7 @@
 					}
 
 
-				});
+				}, 500);
 
 			}
 

diff --git a/jquery.skroller.min.js b/jquery.skroller.min.js
diff --git a/samples/index.html b/samples/index.html
@@ -29,6 +29,14 @@
 		style : 'square'
 	});
 
+	$('#SkrollDynamic').skroller({
+		height : 100
+	});
+
+	$('#addContent').click(function(e){
+		$('#SkrollDynamic').append('<br />and some more content...');
+	});
+
 });
 </script>
 <style>
@@ -228,6 +236,16 @@ <h2><br />
 
 </pre>
 <p>&nbsp;</p>
+<h2>Need to scroll dynamic content? No problem...</h2>
+
+<div id="SkrollDynamic" style="width:300px;" align="justify" >
+	This is some content...
+</div>
+
+<p>
+  <input type="submit" name="addContent" id="addContent" value="Add some more..." />
+</p>
+<p>&nbsp;</p>
 <h2>A note...</h2>
 <p>Skroller is still a work-in-progress so there might be bugs, compatibility issues and it might pose a treath to your pets... I mainly developed it for personal use on my projects but I like sharing (because it's caring) and I will try and keep it updated... feel free to fork it of course and report any issues you may find.</p>
 <p>Also forgive me if my code is not clean / canonical / rational / standardized etc... (you get the point) I am a web designer, self-taught web developer who likes to hack code, so you've been warned! :)</p>