Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updates to sliders

  • Loading branch information...
commit 570aeab09df8d37cf0baa2855ccb9320a92bbc5a 1 parent 1e1b5f5
@addyosmani addyosmani authored
Showing with 53 additions and 14 deletions.
  1. +51 −12 demo/app.js
  2. +2 −2 demo/demo.html
View
63 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,7 +191,7 @@
}else{
- if(delta < 0)
+ if(delta < 0 && sliderVal < cflowlength)
{
sliderVal +=1;
}
@@ -172,6 +199,8 @@
}
+
+
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
+ });
+
+
+
+
+});
-
-});
View
4 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}
Please sign in to comment.
Something went wrong with that request. Please try again.