Paging Problems when the slidee is a div containing a table

[marko.f...@googlemail.com]

Hi,

I'm just implemented a table scroller with this great plugin. Everything works fine except the paging. I'm using Sly for scrolling a table with columns which are dynamically created using knockout.js. So I have some event where a column is added an I'm calling slyScroller.reload() so that everything is recalculated for the new table width. But somehow the scrollbar and the pager doesn't recognize any pages, so that the pager shows only one page and I can only scroll to the right but not back. Is there a way to set the page size in pixel or something like that?

My markup looks something like this:

<ul class="pages"></ul>
<ul class="pager hide">
<li class="previous">
<a href="#">&larr; Back</a>
</li>
<li class="next">
<a href="#">Forward &rarr;</a>
</li>
</ul>
<div id="basic" class="frame" style="width: 750px; min-height: 250px">
<div class="slidee">
<table class="table table-bordered" style="width: 1px">
<thead>
<tr>
<th>
...
</th>
<th>
...
</th>
...

</tr>
</thead>
<tbody>
<tr>
<td>
....
</td>
<td>
....
</td>
<td>
....
</td>
</tr>
</tbody>
</table>
</div>
</div>

And the statement for sly looks something like that:

var defaultOptions = {
horizontal: 1,
itemNav: 'basic',
smart: 1,
releaseSwing: 1,
pagesBar: $('.pages'),
scrollBar: $('.scrollbar'),
scrollBy: 1,
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
prevPage: $('.previous'),
nextPage: $('.next')
}

var options = $.extend({}, allBindingsAccessor().sliderOptions, defaultOptions);

scroller = new Sly($(element), options).init();

Has somebody an idea what could cause my problem?

Any help would be greatly appreciated!

Cheers

Marko

[Sly.js]

As Markup documentation clearly states, the items are a direct children of SLIDEE. Thus in your case, you have only one item, and that is the table.

Dunno what exactly does your layout look like, but possible solution to your problem might be not using item based navigation at all, as table cells are definitely not suitable for this.

With itemNav disabled, you scroll by scrollBy amount of pixels, and page size equals size of a FRAME in a current Sly direction.

[marko.f...@googlemail.com]

Thank you very much, for your fast response to my question. However I'm not sure if I understood your answer completely. I just tried to disable the item based navigation by just removing the itemnav option. But after that change the scrollbar doesn't work anymore.

Did I misunderstood something?

Thanks in advance!

Marko

[Sly.js]

Read the markup documentation linked above. Reason why it doesn't work for you is explained there.