[Proto-Scripty] Re: Add scroll buttons to Scriptaculous slider?
You prob just need to store the new slidePos.
scroll
right
var slidePos = 0
function increment(){
slidePos = slidePos + .1;
slider2.setValue(slidePos);
}
var slider2 = new Control.Slider('handle2', 'track2', {
onSlide: function(v) { scrollHorizontal(v, $('scrollable1'),
slider2); },
onChange: function(v) { scrollHorizontal(v, $('scrollable1'),
slider2);slidePos=v }
});
im working on this issue now, let me know if that doesn't work
On Oct 10, 1:02 am, djvern <[EMAIL PROTECTED]> wrote:
> Hi Diodeus,
>
> Thanks for you quick reply! That works, but it only moves one
> increment on the first click. How can I get it to keep moving along
> when the linked is clicked repeatedly? Do I need to set up a loop of
> some kind? Sorry, my knowledge of javascript is very limited!
>
> On Oct 9, 6:03 pm, Diodeus <[EMAIL PROTECTED]> wrote:
>
> > First you need to store your current slider position when the scroll
> > occurs. Then set the slider position to this value +/- your increment
> > when the link is clicked.
>
> > scroll
> > right
>
> > var slidePos = 0
>
> > var slider2 = new Control.Slider('handle2', 'track2', {
> > onSlide: function(v) { scrollHorizontal(v, $('scrollable1'),
> > slider2); },
> > onChange: function(v) { scrollHorizontal(v, $('scrollable1'),
> > slider2);slidePos=v }
>
> > });
>
> > On Oct 9, 12:10 pm, djvern <[EMAIL PROTECTED]> wrote:
>
> > > Hi,
>
> > > I am using a Scriptaculous slider to scroll a div but I want to be
> > > able to control the position of the scroller using buttons too. See my
> > > example here:
>
> > >http://www.stickycreation.co.uk/laurus/scroll_testX.html
>
> > > This file links to the prototype framework and the js file slider.js,
> > > which contains the following code:
>
> > > // script.aculo.us slider.js v1.6.5, Wed Nov 08 14:17:49 CET 2006
>
> > > // Copyright (c) 2005, 2006 Marty Haught, Thomas Fuchs
> > > //
> > > // script.aculo.us is freely distributable under the terms of an MIT-
> > > style license.
> > > // For details, see the script.aculo.us web site: http://script.aculo.us/
>
> > > if(!Control) var Control = {};
> > > Control.Slider = Class.create();
>
> > > // options:
> > > // axis: 'vertical', or 'horizontal' (default)
> > > //
> > > // callbacks:
> > > // onChange(value)
> > > // onSlide(value)
> > > Control.Slider.prototype = {
> > > initialize: function(handle, track, options) {
> > > var slider = this;
>
> > > if(handle instanceof Array) {
> > > this.handles = handle.collect( function(e) { return $(e) });
> > > } else {
> > > this.handles = [$(handle)];
> > > }
>
> > > this.track = $(track);
> > > this.options = options || {};
>
> > > this.axis = this.options.axis || 'horizontal';
> > > this.increment = this.options.increment || 1;
> > > this.step = parseInt(this.options.step || '1');
> > > this.range = this.options.range || $R(0,1);
>
> > > this.value = 0; // assure backwards compat
> > > this.values = this.handles.map( function() { return 0 });
> > > this.spans = this.options.spans ?
> > > this.options.spans.map(function(s){ return $(s) }) : false;
> > > this.options.startSpan = $(this.options.startSpan || null);
> > > this.options.endSpan = $(this.options.endSpan || null);
>
> > > this.restricted = this.options.restricted || false;
>
> > > this.maximum = this.options.maximum || this.range.end;
> > > this.minimum = this.options.minimum || this.range.start;
>
> > > // Will be used to align the handle onto the track, if necessary
> > > this.alignX = parseInt(this.options.alignX || '0');
> > > this.alignY = parseInt(this.options.alignY || '0');
>
> > > this.trackLength = this.maximumOffset() - this.minimumOffset();
>
> > > this.handleLength = this.isVertical() ?
> > > (this.handles[0].offsetHeight != 0 ?
> > > this.handles[0].offsetHeight :
> > > this.handles[0].style.height.replace(/px$/,"")) :
> > > (this.handles[0].offsetWidth != 0 ?
> > > this.handles[0].offsetWidth :
> > > this.handles[0].style.width.replace(/px$/,""));
>
> > > this.active = false;
> > > this.dragging = false;
> > > this.disabled = false;
>
> > > if(this.options.disabled) this.setDisabled();
>
> > > // Allowed values array
> > > this.allowedValues = this.options.values ?
> > > this.options.values.sortBy(Prototype.K) : false;
> > > if(this.allowedValues) {
> > > this.minimum = this.allowedValues.min();
> > > this.maximum = this.allowedValues.max();
> > > }
>
> > > this.eventMouseDown = this.startDrag.bindAsEventListener(this);
> > > this.eventMouseUp = this.endDrag.bindAsEventListener(this);
> > > this.eventMouseMove = this.update.bindAsEventListener(this);
>
> > > // Initialize handles in reverse (make sure first handle is
> > > active)
> > > this.handles.each( function(h,i) {
> > > i = slide
[Proto-Scripty] Re: Add scroll buttons to Scriptaculous slider?
Hi Diodeus,
Thanks for you quick reply! That works, but it only moves one
increment on the first click. How can I get it to keep moving along
when the linked is clicked repeatedly? Do I need to set up a loop of
some kind? Sorry, my knowledge of javascript is very limited!
On Oct 9, 6:03 pm, Diodeus <[EMAIL PROTECTED]> wrote:
> First you need to store your current slider position when the scroll
> occurs. Then set the slider position to this value +/- your increment
> when the link is clicked.
>
> scroll
> right
>
> var slidePos = 0
>
> var slider2 = new Control.Slider('handle2', 'track2', {
> onSlide: function(v) { scrollHorizontal(v, $('scrollable1'),
> slider2); },
> onChange: function(v) { scrollHorizontal(v, $('scrollable1'),
> slider2);slidePos=v }
>
> });
>
> On Oct 9, 12:10 pm, djvern <[EMAIL PROTECTED]> wrote:
>
> > Hi,
>
> > I am using a Scriptaculous slider to scroll a div but I want to be
> > able to control the position of the scroller using buttons too. See my
> > example here:
>
> >http://www.stickycreation.co.uk/laurus/scroll_testX.html
>
> > This file links to the prototype framework and the js file slider.js,
> > which contains the following code:
>
> > // script.aculo.us slider.js v1.6.5, Wed Nov 08 14:17:49 CET 2006
>
> > // Copyright (c) 2005, 2006 Marty Haught, Thomas Fuchs
> > //
> > // script.aculo.us is freely distributable under the terms of an MIT-
> > style license.
> > // For details, see the script.aculo.us web site: http://script.aculo.us/
>
> > if(!Control) var Control = {};
> > Control.Slider = Class.create();
>
> > // options:
> > // axis: 'vertical', or 'horizontal' (default)
> > //
> > // callbacks:
> > // onChange(value)
> > // onSlide(value)
> > Control.Slider.prototype = {
> > initialize: function(handle, track, options) {
> > var slider = this;
>
> > if(handle instanceof Array) {
> > this.handles = handle.collect( function(e) { return $(e) });
> > } else {
> > this.handles = [$(handle)];
> > }
>
> > this.track = $(track);
> > this.options = options || {};
>
> > this.axis = this.options.axis || 'horizontal';
> > this.increment = this.options.increment || 1;
> > this.step = parseInt(this.options.step || '1');
> > this.range = this.options.range || $R(0,1);
>
> > this.value = 0; // assure backwards compat
> > this.values = this.handles.map( function() { return 0 });
> > this.spans = this.options.spans ?
> > this.options.spans.map(function(s){ return $(s) }) : false;
> > this.options.startSpan = $(this.options.startSpan || null);
> > this.options.endSpan = $(this.options.endSpan || null);
>
> > this.restricted = this.options.restricted || false;
>
> > this.maximum = this.options.maximum || this.range.end;
> > this.minimum = this.options.minimum || this.range.start;
>
> > // Will be used to align the handle onto the track, if necessary
> > this.alignX = parseInt(this.options.alignX || '0');
> > this.alignY = parseInt(this.options.alignY || '0');
>
> > this.trackLength = this.maximumOffset() - this.minimumOffset();
>
> > this.handleLength = this.isVertical() ?
> > (this.handles[0].offsetHeight != 0 ?
> > this.handles[0].offsetHeight :
> > this.handles[0].style.height.replace(/px$/,"")) :
> > (this.handles[0].offsetWidth != 0 ?
> > this.handles[0].offsetWidth :
> > this.handles[0].style.width.replace(/px$/,""));
>
> > this.active = false;
> > this.dragging = false;
> > this.disabled = false;
>
> > if(this.options.disabled) this.setDisabled();
>
> > // Allowed values array
> > this.allowedValues = this.options.values ?
> > this.options.values.sortBy(Prototype.K) : false;
> > if(this.allowedValues) {
> > this.minimum = this.allowedValues.min();
> > this.maximum = this.allowedValues.max();
> > }
>
> > this.eventMouseDown = this.startDrag.bindAsEventListener(this);
> > this.eventMouseUp = this.endDrag.bindAsEventListener(this);
> > this.eventMouseMove = this.update.bindAsEventListener(this);
>
> > // Initialize handles in reverse (make sure first handle is
> > active)
> > this.handles.each( function(h,i) {
> > i = slider.handles.length-1-i;
> > slider.setValue(parseFloat(
> > (slider.options.sliderValue instanceof Array ?
> > slider.options.sliderValue[i] : slider.options.sliderValue)
> > ||
> > slider.range.start), i);
> > Element.makePositioned(h); // fix IE
> > Event.observe(h, "mousedown", slider.eventMouseDown);
> > });
>
> > Event.observe(this.track, "mousedown", this.eventMouseDown);
> > Event.observe(document, "mouseup", this.eventMouseUp);
> > Event.observe(document, "mousemove", this.eventMouseMove);
>
> > this.initialized = true;
> > },
> > dispose: function() {
> > var slider = this;
> > Event.stopObserving(this.track, "mousedown"
[Proto-Scripty] Re: Add scroll buttons to Scriptaculous slider?
First you need to store your current slider position when the scroll
occurs. Then set the slider position to this value +/- your increment
when the link is clicked.
scroll
right
var slidePos = 0
var slider2 = new Control.Slider('handle2', 'track2', {
onSlide: function(v) { scrollHorizontal(v, $('scrollable1'),
slider2); },
onChange: function(v) { scrollHorizontal(v, $('scrollable1'),
slider2);slidePos=v }
});
On Oct 9, 12:10 pm, djvern <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I am using a Scriptaculous slider to scroll a div but I want to be
> able to control the position of the scroller using buttons too. See my
> example here:
>
> http://www.stickycreation.co.uk/laurus/scroll_testX.html
>
> This file links to the prototype framework and the js file slider.js,
> which contains the following code:
>
> // script.aculo.us slider.js v1.6.5, Wed Nov 08 14:17:49 CET 2006
>
> // Copyright (c) 2005, 2006 Marty Haught, Thomas Fuchs
> //
> // script.aculo.us is freely distributable under the terms of an MIT-
> style license.
> // For details, see the script.aculo.us web site: http://script.aculo.us/
>
> if(!Control) var Control = {};
> Control.Slider = Class.create();
>
> // options:
> // axis: 'vertical', or 'horizontal' (default)
> //
> // callbacks:
> // onChange(value)
> // onSlide(value)
> Control.Slider.prototype = {
> initialize: function(handle, track, options) {
> var slider = this;
>
> if(handle instanceof Array) {
> this.handles = handle.collect( function(e) { return $(e) });
> } else {
> this.handles = [$(handle)];
> }
>
> this.track = $(track);
> this.options = options || {};
>
> this.axis = this.options.axis || 'horizontal';
> this.increment = this.options.increment || 1;
> this.step = parseInt(this.options.step || '1');
> this.range = this.options.range || $R(0,1);
>
> this.value = 0; // assure backwards compat
> this.values= this.handles.map( function() { return 0 });
> this.spans = this.options.spans ?
> this.options.spans.map(function(s){ return $(s) }) : false;
> this.options.startSpan = $(this.options.startSpan || null);
> this.options.endSpan = $(this.options.endSpan || null);
>
> this.restricted = this.options.restricted || false;
>
> this.maximum = this.options.maximum || this.range.end;
> this.minimum = this.options.minimum || this.range.start;
>
> // Will be used to align the handle onto the track, if necessary
> this.alignX = parseInt(this.options.alignX || '0');
> this.alignY = parseInt(this.options.alignY || '0');
>
> this.trackLength = this.maximumOffset() - this.minimumOffset();
>
> this.handleLength = this.isVertical() ?
> (this.handles[0].offsetHeight != 0 ?
> this.handles[0].offsetHeight :
> this.handles[0].style.height.replace(/px$/,"")) :
> (this.handles[0].offsetWidth != 0 ?
> this.handles[0].offsetWidth :
> this.handles[0].style.width.replace(/px$/,""));
>
> this.active = false;
> this.dragging = false;
> this.disabled = false;
>
> if(this.options.disabled) this.setDisabled();
>
> // Allowed values array
> this.allowedValues = this.options.values ?
> this.options.values.sortBy(Prototype.K) : false;
> if(this.allowedValues) {
> this.minimum = this.allowedValues.min();
> this.maximum = this.allowedValues.max();
> }
>
> this.eventMouseDown = this.startDrag.bindAsEventListener(this);
> this.eventMouseUp = this.endDrag.bindAsEventListener(this);
> this.eventMouseMove = this.update.bindAsEventListener(this);
>
> // Initialize handles in reverse (make sure first handle is
> active)
> this.handles.each( function(h,i) {
> i = slider.handles.length-1-i;
> slider.setValue(parseFloat(
> (slider.options.sliderValue instanceof Array ?
> slider.options.sliderValue[i] : slider.options.sliderValue)
> ||
> slider.range.start), i);
> Element.makePositioned(h); // fix IE
> Event.observe(h, "mousedown", slider.eventMouseDown);
> });
>
> Event.observe(this.track, "mousedown", this.eventMouseDown);
> Event.observe(document, "mouseup", this.eventMouseUp);
> Event.observe(document, "mousemove", this.eventMouseMove);
>
> this.initialized = true;
> },
> dispose: function() {
> var slider = this;
> Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
> Event.stopObserving(document, "mouseup", this.eventMouseUp);
> Event.stopObserving(document, "mousemove", this.eventMouseMove);
> this.handles.each( function(h) {
> Event.stopObserving(h, "mousedown", slider.eventMouseDown);
> });
> },
> setDisabled: function(){
> this.disabled = true;
> },
> setEnabled: function(){
> this.disabled = false;
> },
> getNearestValue: function(value){
> if(this.allowedValues){
> if(value >= this.allowedValues.max())
> return(
