We Keep Coding

AngularJS infinite scrolling (ng-repeat) - removing top elements from the DOM [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I have an ng-repeat which loads thousands of records with some complexity that can have an height between 100px and 1200px. Needless to say the performance gets quite a hit.
Infinite scrolling module would work just fine in most cases until you hit an edge case where you've scrolled down close to the bottom and most of the elements have been loaded into the DOM, which brings me back to square one.
Angular-vs-repeat would be perfect for my case, but I haven't figured out how to compute each following element's height, since they're not fixed.
Which takes me back to Infinite scrolling.
I assume if the top elements (above the viewport) would be replaced with an empty DIV with a computed height equal of their total height sum the performance wouldn't be a problem. While scrolling up would render them back into the dom and subtract the empty DIV's height.
Has anyone tackled this before? Any suggestions? Code snippets would be wonderful.

ng-repeat has a pretty steep performance drop off with long lists due to the overhead associated with its bindings. One performance-conscious library I'm particularly fond of is ag-grid, which conveniently has an example with variable row heights. You might see if it would work for your purposes.
If nothing out there seems to fit your needs for this, you can always roll your own directive and handle the DOM manipulation yourself like the code snippet I threw together below. It doesn't cover everything you mentioned, but it includes infinite scrolling and removes old elements, replacing their height with an empty <div>, without using ng-repeat.
angular.module('SuperList', [])
.controller('mainCtrl', ['$scope', '$compile',
function($scope, $compile) {
// Magic numbers
var itemsPerLoad = 4;
var thresholdPx = 1200;
var removeThresholdPx = 1600;
// Options to control your directive are cool
$scope.listOptions = {
items: [],
renderer: renderer,
threshold: thresholdPx,
removeThreshold: removeThresholdPx,
loadFn: loadNewItems
};
// This function creates a div for each item in our dataset whenever
// it's called by the directive
function renderer(item) {
var itemElem = angular.element('<div></div');
itemElem.css('height', item.height + 'px');
itemElem.html(item.text);
return itemElem;
// If each row needs special angular behavior, you can compile it with
// something like the following instead of returning basic html
// return $compile(itemElem)($scope);
}
// This gets called by the directive when we need to populate more items
function loadNewItems() {
// Let's do it async like we're getting something from the server
setTimeout(function() {
for (var i = 0; i < itemsPerLoad; i++) {
// Give each item random text and height
$scope.listOptions.items.push({
text: Math.random().toString(36).substr(2, Infinity),
height: Math.floor(100 + Math.random() * 1100)
});
}
// Call the refresh function to let the directive know we've loaded
// We could, of course, use $watch in the directive and just make
// sure a $digest gets called here, but doing it this way is much faster.
$scope.listOptions.api.refresh();
}, 500);
// return true to let the directive know we're waiting on data, so don't
// call this function again until that happens
return true;
}
}
])
.directive('itemList', function() {
return {
restrict: 'A',
scope: {
itemList: '='
},
link: function(scope, element, attrs) {
var el = element[0];
var emptySpace = angular.element('<div class="empty-space"></div>');
element.append(emptySpace);
// Keep a selection of previous elements so we can remove them
// if the user scrolls far enough
var prevElems = null;
var prevHeight = 0;
var nextElems = 0;
var nextHeight = 0;
// Options are defined above the directive to keep things modular
var options = scope.itemList;
// Keep track of how many rows we've rendered so we know where we left off
var renderedRows = 0;
var pendingLoad = false;
// Add some API functions to let the calling scope interact
// with the directive more effectively
options.api = {
refresh: refresh
};
element.on('scroll', checkScroll);
// Perform the initial setup
refresh();
function refresh() {
addRows();
checkScroll();
}
// Adds any rows that haven't already been rendered. Note that the
// directive does not process any removed items, so if that functionality
// is needed you'll need to make changes to this directive
function addRows() {
nextElems = [];
for (var i = renderedRows; i < options.items.length; i++) {
var e = options.renderer(options.items[i]);
nextElems.push(e[0])
element.append(e);
renderedRows++;
pendingLoad = false;
}
nextElems = angular.element(nextElems);
nextHeight = el.scrollHeight;
// Do this for the first time to initialize
if (!prevElems && nextElems.length) {
prevElems = nextElems;
prevHeight = nextHeight;
}
}
function checkScroll() {
// Only check if we need to load if there isn't already an async load pending
if (!pendingLoad) {
if ((el.scrollHeight - el.scrollTop - el.clientHeight) < options.threshold) {
console.log('Loading new items!');
pendingLoad = options.loadFn();
// If we're not waiting for an async event, render the new rows
if (!pendingLoad) {
addRows();
}
}
}
// if we're past the remove threshld, remove all previous elements and replace
// lengthen the empty space div to fill the space they occupied
if (options.removeThreshold && el.scrollTop > prevHeight + options.removeThreshold) {
console.log('Removing previous elements');
prevElems.remove();
emptySpace.css('height', prevHeight + 'px');
// Stage the next elements for removal
prevElems = nextElems;
prevHeight = nextHeight;
}
}
}
};
});
.item-list {
border: 1px solid green;
width: 600px;
height: 300px;
overflow: auto;
}
.item-list > div {
border: 1px solid blue;
}
.item-list > .empty-space {
background: #aaffaa;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body ng-app="SuperList" ng-controller="mainCtrl">
<div class="item-list" item-list="listOptions"></div>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="test.js"></script>
</body>
</html>

jQuery fade in box with unique content

I am making an info screen, and for that, it needs to show reviews from their customers pulled from Trustpilot.
I got the reviews and everything formatted in HTML showing the 20 latest, but I want to present it very sweet. I am not a JavaScript guru, but I thought i would do it using jQuery and its fadein function.
What is want, is have 20 unique divs fading in with X milliseconds difference popping randomly up. By unique I mean, that each div must have unique content. And by randomly popping up, I mean that if box 1 spawns first, then the next should be 5, then 14 etc, and then another cycle the next time around.
Just like what I made here;
$(function() {
var box = $('.box');
var delay = 100;
for (i = 0; i < 30; i++) {
setTimeout(function() {
var new_box = box.clone();
$('.container').append(new_box);
new_box.fadeIn();
}, delay);
delay += 500; // Delay the next box by an extra 500ms
}
});
http://jsfiddle.net/CCawh/5/
Is this even possible, and how would this be done?
I am very new to JavaScript, so please bear with me if I ask to much
Thanks in advance.
EDIT:
The HTML i want to spawn will all be wrapped in divs, so it would go like this;
<div id="one">content</div>
<div id="two">content</div>
<div id="three">content</div>
<div id="four">content</div>
etc.

Made up a nice function for you. I believe this may be what you are looking for
Here's a rundown of how it works :
Populate an array with numbers randomly generated 1-10 in this case.
Run through that array with a set interval, and when everything has
been added stop the interval
pretty straightforward from there. Set the visibility etc. You should be able to change up the function to dynamically add HTML elements and what-not, but just giving you something to start with.
var usedNum = [];
var i, j, y;
i = 0;
for(y = 0; y < 10; y++){
var x = Math.floor((Math.random() * 10) + 1);
if(!isUsed(x)) usedNum.push(x);
else y--;
}
var showInterval = setInterval ( function(){
if(i == 10){
clearInterval(showInterval);
}
$(".container div[data-line='" + usedNum[i] + "']").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
i++;
}, 500);
function isUsed(num) {
var used = false;
for(j = 0; j < usedNum.length; j++){
if(usedNum[j] == num){
used = true;
}
}
return used;
}
Demo fiddle : http://jsfiddle.net/xS39F/3/
Edit:
You can also mess around with the speed of the animation. In this demo (http://jsfiddle.net/adjit/XYU34/1/) I set the speed to 1000 so the next element starts fading in before the last element was done fading in. Makes it look a little smoother.

Instead of using a for loop and setTimeout, would setInterval work better for what you need? Some HTML might help better understand what you're trying to achieve.
$(function() {
var box = $('.box');
var delay = 100;
var interval = setInterval(function() {
var new_box = box.clone();
$('.container').append(new_box);
new_box.fadeIn();
}, delay);
delay += 500; // Delay the next box by an extra 500ms
}, delay);
});

ReactJS: Modeling Bi-Directional Infinite Scrolling

Our application uses infinite scrolling to navigate large lists of heterogenous items. There are a few wrinkles:
It's common for our users to have a list of 10,000 items and need to scroll through 3k+.
These are rich items, so we can only have a few hundred in the DOM before browser performance becomes unacceptable.
The items are of varying heights.
The items may contain images and we allow the user to jump to a specific date. This is tricky because the user can jump to a point in the list where we need to load images above the viewport, which would push the content down when they load. Failing to handle that means that the user may jump to a date, but then be shifted to an earlier date.
Known, incomplete solutions:
(react-infinite-scroll) - This is just a simple "load more when we hit the bottom" component. It does not cull any of the DOM, so it will die on thousands of items.
(Scroll Position with React) - Shows how to store and restore the scroll position when inserting at the top or inserting at the bottom, but not both together.
I'm not looking for the code for a complete solution (although that would be great.) Instead, I'm looking for the "React way" to model this situation. Is scroll position state or not? What state should I be tracking to retain my position in the list? What state do I need to keep so that I trigger a new render when I scroll near the bottom or top of what is rendered?

This is a mix of an infinite table and an infinite scroll scenario. The best abstraction I found for this is the following:
Overview
Make a <List> component that takes an array of all children. Since we do not render them, it's really cheap to just allocate them and discard them. If 10k allocations is too big, you can instead pass a function that takes a range and return the elements.
<List>
{thousandelements.map(function() { return <Element /> })}
</List>
Your List component is keeping track of what the scroll position is and only renders the children that are in view. It adds a large empty div at the beginning to fake the previous items that are not rendered.
Now, the interesting part is that once an Element component is rendered, you measure its height and store it in your List. This lets you compute the height of the spacer and know how many elements should be displayed in view.
Image
You are saying that when the image are loading they make everything "jump" down. The solution for this is to set the image dimensions in your img tag: <img src="..." width="100" height="58" />. This way the browser doesn't have to wait to download it before knowing what size it is going to be displayed. This requires some infrastructure but it's really worth it.
If you can't know the size in advance, then add onload listeners to your image and when it is loaded then measure its displayed dimension and update the stored row height and compensate the scroll position.
Jumping at a random element
If you need to jump at a random element in the list that's going to require some trickery with scroll position because you don't know the size of the elements in between. What I suggest you to do is to average the element heights you already have computed and jump to the scroll position of last known height + (number of elements * average).
Since this is not exact it's going to cause issues when you reach back to the last known good position. When a conflict happens, simply change the scroll position to fix it. This is going to move the scroll bar a bit but shouldn't affect him/her too much.
React Specifics
You want to provide a key to all the rendered elements so that they are maintained across renders. There are two strategies: (1) have only n keys (0, 1, 2, ... n) where n is the maximum number of elements you can display and use their position modulo n. (2) have a different key per element. If all the elements share a similar structure it's good to use (1) to reuse their DOM nodes. If they don't then use (2).
I would only have two pieces of React state: the index of the first element and the number of elements being displayed. The current scroll position and the height of all the elements would be directly attached to this. When using setState you are actually doing a rerender which should only happen when the range changes.
Here is an example of infinite list using some of the techniques I describe in this answer. It's going to be some work but React is definitively a good way to implement an infinite list :)

have a look at http://adazzle.github.io/react-data-grid/index.html#
This looks like a powerful and performant datagrid with Excel-like features and lazy loading/optimized rendering (for millions of rows) with rich editing features (MIT licenced).
Not yet tried in our project but will do so pretty soon.
A great resource to search for things like these is also http://react.rocks/
In this case, a tag search is helpful:
http://react.rocks/tag/InfiniteScroll

I was facing a similar challenge for modeling single-direction infinite scrolling with heterogeneous item heights and so made an npm package out of my solution:
https://www.npmjs.com/package/react-variable-height-infinite-scroller
and a demo: http://tnrich.github.io/react-variable-height-infinite-scroller/
You can check out the source code for the logic, but I basically followed the recipe #Vjeux outlined in the above answer. I haven't yet tackled jumping to a particular item, but I'm hoping to implement that soon.
Here's the nitty-gritty of what the code currently looks like:
var React = require('react');
var areNonNegativeIntegers = require('validate.io-nonnegative-integer-array');
var InfiniteScoller = React.createClass({
propTypes: {
averageElementHeight: React.PropTypes.number.isRequired,
containerHeight: React.PropTypes.number.isRequired,
preloadRowStart: React.PropTypes.number.isRequired,
renderRow: React.PropTypes.func.isRequired,
rowData: React.PropTypes.array.isRequired,
},
onEditorScroll: function(event) {
var infiniteContainer = event.currentTarget;
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
var currentAverageElementHeight = (visibleRowsContainer.getBoundingClientRect().height / this.state.visibleRows.length);
this.oldRowStart = this.rowStart;
var newRowStart;
var distanceFromTopOfVisibleRows = infiniteContainer.getBoundingClientRect().top - visibleRowsContainer.getBoundingClientRect().top;
var distanceFromBottomOfVisibleRows = visibleRowsContainer.getBoundingClientRect().bottom - infiniteContainer.getBoundingClientRect().bottom;
var rowsToAdd;
if (distanceFromTopOfVisibleRows < 0) {
if (this.rowStart > 0) {
rowsToAdd = Math.ceil(-1 * distanceFromTopOfVisibleRows / currentAverageElementHeight);
newRowStart = this.rowStart - rowsToAdd;
if (newRowStart < 0) {
newRowStart = 0;
}
this.prepareVisibleRows(newRowStart, this.state.visibleRows.length);
}
} else if (distanceFromBottomOfVisibleRows < 0) {
//scrolling down, so add a row below
var rowsToGiveOnBottom = this.props.rowData.length - 1 - this.rowEnd;
if (rowsToGiveOnBottom > 0) {
rowsToAdd = Math.ceil(-1 * distanceFromBottomOfVisibleRows / currentAverageElementHeight);
newRowStart = this.rowStart + rowsToAdd;
if (newRowStart + this.state.visibleRows.length >= this.props.rowData.length) {
//the new row start is too high, so we instead just append the max rowsToGiveOnBottom to our current preloadRowStart
newRowStart = this.rowStart + rowsToGiveOnBottom;
}
this.prepareVisibleRows(newRowStart, this.state.visibleRows.length);
}
} else {
//we haven't scrolled enough, so do nothing
}
this.updateTriggeredByScroll = true;
//set the averageElementHeight to the currentAverageElementHeight
// setAverageRowHeight(currentAverageElementHeight);
},
componentWillReceiveProps: function(nextProps) {
var rowStart = this.rowStart;
var newNumberOfRowsToDisplay = this.state.visibleRows.length;
this.props.rowData = nextProps.rowData;
this.prepareVisibleRows(rowStart, newNumberOfRowsToDisplay);
},
componentWillUpdate: function() {
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
this.soonToBeRemovedRowElementHeights = 0;
this.numberOfRowsAddedToTop = 0;
if (this.updateTriggeredByScroll === true) {
this.updateTriggeredByScroll = false;
var rowStartDifference = this.oldRowStart - this.rowStart;
if (rowStartDifference < 0) {
// scrolling down
for (var i = 0; i < -rowStartDifference; i++) {
var soonToBeRemovedRowElement = visibleRowsContainer.children[i];
if (soonToBeRemovedRowElement) {
var height = soonToBeRemovedRowElement.getBoundingClientRect().height;
this.soonToBeRemovedRowElementHeights += this.props.averageElementHeight - height;
// this.soonToBeRemovedRowElementHeights.push(soonToBeRemovedRowElement.getBoundingClientRect().height);
}
}
} else if (rowStartDifference > 0) {
this.numberOfRowsAddedToTop = rowStartDifference;
}
}
},
componentDidUpdate: function() {
//strategy: as we scroll, we're losing or gaining rows from the top and replacing them with rows of the "averageRowHeight"
//thus we need to adjust the scrollTop positioning of the infinite container so that the UI doesn't jump as we
//make the replacements
var infiniteContainer = React.findDOMNode(this.refs.infiniteContainer);
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
var self = this;
if (this.soonToBeRemovedRowElementHeights) {
infiniteContainer.scrollTop = infiniteContainer.scrollTop + this.soonToBeRemovedRowElementHeights;
}
if (this.numberOfRowsAddedToTop) {
//we're adding rows to the top, so we're going from 100's to random heights, so we'll calculate the differenece
//and adjust the infiniteContainer.scrollTop by it
var adjustmentScroll = 0;
for (var i = 0; i < this.numberOfRowsAddedToTop; i++) {
var justAddedElement = visibleRowsContainer.children[i];
if (justAddedElement) {
adjustmentScroll += this.props.averageElementHeight - justAddedElement.getBoundingClientRect().height;
var height = justAddedElement.getBoundingClientRect().height;
}
}
infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustmentScroll;
}
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
if (!visibleRowsContainer.childNodes[0]) {
if (this.props.rowData.length) {
//we've probably made it here because a bunch of rows have been removed all at once
//and the visible rows isn't mapping to the row data, so we need to shift the visible rows
var numberOfRowsToDisplay = this.numberOfRowsToDisplay || 4;
var newRowStart = this.props.rowData.length - numberOfRowsToDisplay;
if (!areNonNegativeIntegers([newRowStart])) {
newRowStart = 0;
}
this.prepareVisibleRows(newRowStart , numberOfRowsToDisplay);
return; //return early because we need to recompute the visible rows
} else {
throw new Error('no visible rows!!');
}
}
var adjustInfiniteContainerByThisAmount;
//check if the visible rows fill up the viewport
//tnrtodo: maybe put logic in here to reshrink the number of rows to display... maybe...
if (visibleRowsContainer.getBoundingClientRect().height / 2 <= this.props.containerHeight) {
//visible rows don't yet fill up the viewport, so we need to add rows
if (this.rowStart + this.state.visibleRows.length < this.props.rowData.length) {
//load another row to the bottom
this.prepareVisibleRows(this.rowStart, this.state.visibleRows.length + 1);
} else {
//there aren't more rows that we can load at the bottom so we load more at the top
if (this.rowStart - 1 > 0) {
this.prepareVisibleRows(this.rowStart - 1, this.state.visibleRows.length + 1); //don't want to just shift view
} else if (this.state.visibleRows.length < this.props.rowData.length) {
this.prepareVisibleRows(0, this.state.visibleRows.length + 1);
}
}
} else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {
//scroll to align the tops of the boxes
adjustInfiniteContainerByThisAmount = visibleRowsContainer.getBoundingClientRect().top - infiniteContainer.getBoundingClientRect().top;
// this.adjustmentScroll = true;
infiniteContainer.scrollTop = infiniteContainer.scrollTop + adjustInfiniteContainerByThisAmount;
} else if (visibleRowsContainer.getBoundingClientRect().bottom < infiniteContainer.getBoundingClientRect().bottom) {
//scroll to align the bottoms of the boxes
adjustInfiniteContainerByThisAmount = visibleRowsContainer.getBoundingClientRect().bottom - infiniteContainer.getBoundingClientRect().bottom;
// this.adjustmentScroll = true;
infiniteContainer.scrollTop = infiniteContainer.scrollTop + adjustInfiniteContainerByThisAmount;
}
},
componentWillMount: function(argument) {
//this is the only place where we use preloadRowStart
var newRowStart = 0;
if (this.props.preloadRowStart < this.props.rowData.length) {
newRowStart = this.props.preloadRowStart;
}
this.prepareVisibleRows(newRowStart, 4);
},
componentDidMount: function(argument) {
//call componentDidUpdate so that the scroll position will be adjusted properly
//(we may load a random row in the middle of the sequence and not have the infinte container scrolled properly initially, so we scroll to the show the rowContainer)
this.componentDidUpdate();
},
prepareVisibleRows: function(rowStart, newNumberOfRowsToDisplay) { //note, rowEnd is optional
//setting this property here, but we should try not to use it if possible, it is better to use
//this.state.visibleRowData.length
this.numberOfRowsToDisplay = newNumberOfRowsToDisplay;
var rowData = this.props.rowData;
if (rowStart + newNumberOfRowsToDisplay > this.props.rowData.length) {
this.rowEnd = rowData.length - 1;
} else {
this.rowEnd = rowStart + newNumberOfRowsToDisplay - 1;
}
// var visibleRows = this.state.visibleRowsDataData.slice(rowStart, this.rowEnd + 1);
// rowData.slice(rowStart, this.rowEnd + 1);
// setPreloadRowStart(rowStart);
this.rowStart = rowStart;
if (!areNonNegativeIntegers([this.rowStart, this.rowEnd])) {
var e = new Error('Error: row start or end invalid!');
console.warn('e.trace', e.trace);
throw e;
}
var newVisibleRows = rowData.slice(this.rowStart, this.rowEnd + 1);
this.setState({
visibleRows: newVisibleRows
});
},
getVisibleRowsContainerDomNode: function() {
return this.refs.visibleRowsContainer.getDOMNode();
},
render: function() {
var self = this;
var rowItems = this.state.visibleRows.map(function(row) {
return self.props.renderRow(row);
});
var rowHeight = this.currentAverageElementHeight ? this.currentAverageElementHeight : this.props.averageElementHeight;
this.topSpacerHeight = this.rowStart * rowHeight;
this.bottomSpacerHeight = (this.props.rowData.length - 1 - this.rowEnd) * rowHeight;
var infiniteContainerStyle = {
height: this.props.containerHeight,
overflowY: "scroll",
};
return (
<div
ref="infiniteContainer"
className="infiniteContainer"
style={infiniteContainerStyle}
onScroll={this.onEditorScroll}
>
<div ref="topSpacer" className="topSpacer" style={{height: this.topSpacerHeight}}/>
<div ref="visibleRowsContainer" className="visibleRowsContainer">
{rowItems}
</div>
<div ref="bottomSpacer" className="bottomSpacer" style={{height: this.bottomSpacerHeight}}/>
</div>
);
}
});
module.exports = InfiniteScoller;

Rotating coverflow effect

HTML:
- for (x in dict)
div.test
div.ContentFlow
div.loadIndicator
div.indicator
div.flow
- for (var i in dict[x])
img(class='item', src='/images/' + dict[x][i] + '.jpg')
my CSS:
.test {
display:block;
}
.ContentFlow {
margin-top: 10%;
}
client-side JS:
var count = 0
var items;
var amount = 0;
$(window).load(function(){
items = $("#test .ContentFlow");
amount = items.length;
items.hide();
items.eq(count).show();
}
$(window).load(setInterval(function(){
// tried this as well
//var items = $("#test .ContentFlow");
//var amount = items.length;
items.eq(count).hide();
count >= amount-1 ? count = 0 : count++;
items.eq(count).show();
}, 1000));
ConentFlow css/js:
http://www.jacksasylum.eu/ContentFlow/docu.php
I am trying to rotate the .ContentFlow div every 5 secs. However, its not working. After setting display:none for ContentFlow class, nothing gets displayed at load time and thereafter. If I dont set display:none for ContentFlow divs in my css, all the divs show up at load time
Which properties should I use for it to work. Please let me know if the question is not clear.

Move
items = $(".ContentFlow");
var amount = items.length;
inside the functions so that it is executed after window load.
Refactored:
var count = 0;
$(window).load(function(){
// Hide at first
$("#test .ContentFlow").hide();
// Start repeating toggle
setInterval(function(){
var items = $("#test .ContentFlow");
var amount = items.length;
items.eq(count).hide();
(count >= amount-1) ? count = 0 : count++;
items.eq(count).show();
}, 1000);
};
Instead of doing the initial hiding using $("#test .ContentFlow").hide();, you might want to just set a style .ContentFlow{display:none;} to avoid flicker when the page is still loading.

I recommend that you use the latest version of ContentFlow v1.0.2 that allows for multiple ContentFlows to be on the same webpage, each with a unique JavaScript handler.
Then, you can use the ContentFlow Slideshow Plugin which you then handle all the timing requirements you need.
The nice thing about the Slideshow plugin is that each ContentFlow can be set to a different timing speed.

Jquery Tools & Scrollable

I have scrollable with the navigator plugin and history set to true. This is so that users can use id'd links to scroll to the selection of their choice in the scrollable list (about 50 items). I have circular set to true.
The items show in groups of 4. But the previous and next buttons only move by 1 item, whereas I want them to move by 4 items. How do I do this?
I can't group them in div pages since the indexed tab list then matches to these div pages rather than the contained items.
I tried creating a click handler with api.move(-2), but all kinds of strange things happen (doesn't pre-empt native scroll-by-one; rewinds instead of advancing, or advances and then rewinds in one sequence - not acceptable).
I'm obviously missing something basic. Pointers would be appreciated.
Thanks,
Henrik

Here's what I ended up doing: I grabbed the api and replaced the next and prev functions; disabled circular; added first and last buttons. Sort of a workaround/semi-solution. You can see the result at http://cityrinks.ca/wiki/wiki.php?n=ListOfRinks.TableOfRinks
$(function() {
$(".scrollable")
.scrollable({
vertical: true,
mousewheel: true,
circular:false
})
.navigator({
navi: "#rinktabs",
naviItem: 'a',
activeClass: 'current',
history: false
});
var api = $(".scrollable").data("scrollable");
api.next = function(time) {
index = this.getIndex();
size = this.getSize();
interval = size - index;
if (interval > 4) interval = 4;
return this.move(interval, time);
};
api.prev = function(time) {
index = this.getIndex();
if (index > 4) index = 4;
return this.move(-index, time);
};
$("#firstbutton").click(function() {
var api = $(".scrollable").data("scrollable");
return api.begin(api.speed);
});
$("#lastbutton").click(function() {
var api = $(".scrollable").data("scrollable");
return api.end(api.speed);
});
});