updates to sliders

demo/app.js

@@ -13,9 +13,13 @@
 		var html = $('#demo-frame div.wrapper').html();
 		$('#demo-frame div.wrapper').parent().append(html).end().remove();
 
+
+
 
 
 		setDefault(6);
+
+
 
            //Set the default item to display on load.
            //Correct indexing
@@ -59,6 +63,11 @@
               $('#coverflow').coverflow('select', $itemNumber, true);
               $('.coverflowItem').removeClass('ui-selected');
 	          $('.coverflowItem:eq(' + ($itemNumber) +')').addClass('ui-selected');
+
+	          //
+
+
+
            }
 
 
@@ -91,7 +100,7 @@
 
 
 		//Handle keyboard events
-		$(document).keypress(function(e) 
+		$(document).keydown(function(e) 
 		{
 		  $current = $('#slider').slider('value');
 
@@ -133,7 +142,7 @@
 		range: "max",
 		min: 0,
 		max: 100,
-		value: 100,
+		value: 0 ,
 		slide: function(event, ui) {
 			var topValue = -((100-ui.value)*difference/100);
 			$("#sortable").css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
@@ -146,6 +155,24 @@
 	var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
 
 
+
+	function setScrollPositions(item)
+	{
+
+	var q =  item * 5;
+	var qx = -40;
+
+	$('#slider-vertical').slider('value', q);
+	$('#sortable').css('top', -q + qx);
+
+
+	}
+
+
+	setScrollPositions(defaultItem);
+
+
+
 //mousewheel support
 
 	$(document).mousewheel(function(event, delta){
@@ -164,14 +191,16 @@
 
        }else{
 
-          if(delta < 0)
+          if(delta < 0 && sliderVal < cflowlength)
           {
            sliderVal +=1;
            }
 
        }
 
 
+
+
 		var leftValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
 
 		if (leftValue>0) leftValue = 0;//stop the content scrolling down too much
@@ -180,20 +209,30 @@
 		coverflowItem = Math.floor(sliderVal);
 		skipTo(coverflowItem);
 
-
 
-	    event.preventDefault();//stop any default behaviour
- 	});
+	//
+	var sliderVal2 = $("#slider-vertical").slider("value");
+	sliderVal2 += (delta*50);
 
-	//mousewheel	
+	$("#slider-vertical").slider("value", (sliderVal2));
+	var topValue = -((100-sliderVal2)*difference/100);//calculate the content top from the slider position
 
-});
+	if (topValue>0) topValue = 0;//stop the content scrolling down too much
+	if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
+
+
+
+	$("#sortable").css({top: (coverflowItem * -25 ) });//move the content to the new position
 
-$(function(){
 
-//custom-scrollpanes from ui.
+
+	    event.preventDefault();//stop any default behaviour
+ 	});
+
 
+
+
 
+
+});
 
-
-});

demo/demo.html

@@ -59,10 +59,10 @@
 
 
 /* css for scrollbar below here*/
-#scroll-pane { float:left;overflow: auto; width: 620px; height:300px;position:relative;margin-left:50px;margin-bottom:25px;display:inline}
+#scroll-pane { float:left;overflow: auto; width: 620px; height:172px;position:relative;margin-left:50px;margin-bottom:25px;display:inline}
 #sortable {position:absolute;top:0;left:0}
 .scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;}
-#slider-wrap{float:left;background-color:lightgrey;height:300px;width:20px;border:1px solid gray;border-left:none;}
+#slider-wrap{float:left;background-color:lightgrey;height:172px;width:20px;border:1px solid gray;border-left:none;}
 #slider-vertical{margin-left:5px;position:relative;height:100%}
 .ui-slider-handle{width:20px;height:10px;margin-left:5px;background-color:darkgray;display:block;position:absolute}