scrollable move problem --- please urgent help needed !! Created Jul 3, 2009

Do I understand you correctly that you always want to end up on the first item of a page regardless of what the argument to seekTo is?

You need to do some math then:

function seekToPage(itemindex) {
  var size = api.getConf().size,
      // add size to avoid zero division
      targetpage = Math.floor((itemindex + size) / size);
  // subtract size revert to zero origin of array index
  api.seekTo(targetpage * size - size);
}

thank you very much for the response.
but it does not do what i want.
there are 3 items visible on the scrollable at one time.
I say seekTo(10) so the 10th item should b the first item that is visible on the scrollable
right now it shows
item8 , item9, item10
it should show
item10,item11,item12

seekTo(10) takes you to the 11th item, as the index starts with 0.

If you want to keep the order of the pages and items in your scrollable, well, you are confined to:

1. page: index 0-2, 1st-3rd item
2. page: index 3-5, 4th-6th item
3. page: index 6-8, 7th-9th item
4. page: index 9-11, 10th-12th item

So api.seekTo(9) takes you to the 10th item, the 1st item of the 4th page. Which is what you wanted.

with reference to ur example
if i say api.seekTo(5) it takes me to second page
with item 3,4,5

Now, what do you mean with "item 3, 4, 5"? As I wrote 3, 4, 5 are the index numbers referring to items 4, 5, 6.

But, yes, with {size: 3} api.seekTo(5) takes you to the second page.

The function I wrote is most probably redundant, as scrollable should do this out of the box. Was side-tracked by your question ;-)

However, in case you want "sliding pages" on demand, that's not included and not trivial to implement, imho. You'd potentially have to rebuild your scrollable on every other onSeek call, so that when you call for instance the 2nd item (index 1), you would have to move/slide your whole scrollable by 1 position, so that the 2nd item becomes the 1st item (index 0), and so on for all items, plus appending the original 1st item at the end. Just switching 2 items in position seems odd.

While this is probably feasable, I'd argue that it goes against the grain of scrollable: Form and function should be related, so the grouping should make sense, content-wise. And regrouping not. Sometimes what makes sense actually looks good ;-)

thats right , but i need the solution ...........
i found a way but its not working
var size = api1.getConf().size; //i.e. 3
x=itemindex%size;
y=x+itemindex;
api.seekTo(y);

if itemindex = 5; it seeks 7 and 5 becomes the first item
if i say 12, it should seek 12 , but it is going to 9 , can u tell me why ??

What exactly do you want to achieve? And be clear about whether you talk about item index numbers or 1st, 2nd etc. item, please.

I have the suspicion that you don't need any function, but just give the correct argument to api.seekTo; or perhaps, if itemindex is actually not referring to an index number, you just have to subtract 1.

ok , i have a grid, at the top there are buttons that say
morning (5 am to 12 pm), afternoon(12 pm to 6pm), evening(6 pm to 8 pm)........
in the scrollbar , there are items (programmes) of different timings
for example
from itemindex 0 to itemindex 4 = morning programmes
from itemindex 5 to 9 = afternoon programmes
from itemindex 10 to 16 = evening programmes

when i click on morning i seekTo(0)
when i click on afternoon i seekTo(5) - here is the problem , 5 is the third itemindex on page 2, i want that when i say 5, the item at the 5th index should b the first in that scrollbar

i hope i have explained it clearly now......

0 to 4, 5 to 9 etc. means 5 items per page, means you need to set {size: 5} (not size 3 as you said) or not set size at all, as 5 is the default.

With {size: 5} seekTo(5) selects the first item on page 2, unless maths have changed fundamentally ;-)

Wait! now I get it. You have {size: 3} even though content-wise the grouping should be 5 items per page (each program containing 5 items). Well, then what I said about the "sliding" pages is the answer that doesn't satisfy you.

Personally, I think you are sacrificing clarity for the audience (5 items per page) for some design idea (3 items per page). Our conversation could serve as proof for my hypothesis ;-)

That being said, you must script your seek calls that they rearrange the items either within a page or within the whole scrollable. A lot of dirty work, are you seeking for someone to do it for you ;-)

Am sorry but am not getting you.
I just need help.
No matter whatever item i seek, it should b the first item among the visible items, thats what i want to achieve
the size is 3.
i may seek(4), seek (14), seek(22) whatever,
the index that i am seeking should b the first on that visible page, thats it.....

can anyone help me on this ??

i tried this :
api.seekTo(itemindex);
if((itemindex%3) > 0)
api1.move(2);
else
api1.move(3);
here it moves properly but when i say seekTo(17)
it should move 2 items forward but it does not, i dono why..........
also after some time the next buttons also behave strangely
like after 17th or 18th item(index) there are more items, but it goes to 0th item , then again when i click on next it goes to 18th

Ok. Tried it out in practice.

This works:

function seekToPage(itemindex) {
  var size = api.getConf().size, last = api.getItems().length - size;
  if (itemindex < last) {
    // not last page
    api.seekTo(itemindex);
  } else {
    api.seekTo(last);
  }
}

Here's a sample page to prove it.

So scrollable does most of what you want out of the box. Unless you seekTo an item who's index is higher than the index of the first item of the last page. Looks like a bug to me. The function seekToPage above works around it.

Thanks for your efforts !
But am not able to achieve what i want. I am pulling my hair :(
have a look at this :
http://www.reallifedeveloper.co.za/reallife/trial/tnstest.html

click on the buttons Matin (6 am to 12 pm)
apres-midi (12 pm to 6 pm)
debut de soiree ( 6 pm to 8 pm)
soiree ( 8 pm to 10 pm)
nuit (10 pm to 5 am)

the index numbers are stored in an array.
on clicking it sends the index where it should move.
but its not moving correctly
dono why .............

Ah, mon chère, ç'est un peu pêle-mêle, ça ;-)

A few ideas:

• Take a deep breath, and outline the structue clearly (in your mind, on paper or wherever) so you can understand it yourself (just joking, but still ... a bit of calm would be good).
• Start with a slimmed down skeleton.

ATM you have redundant code in quite lot of places, like:

$("div.scrollable").scrollable({size: 3, api:true});
var api1=$("div.scrollable:eq(0)").scrollable({size: 3, api:true});
var api2=$("div.scrollable:eq(1)").scrollable({size: 3, api:true});

where the first line can/must be omitted.

The mixture of inline scripting and the final jQuery is confusing, maybe not only for the reader, but also for the browser. You can use the power of jQuery e.g. to set up the onclick actions in the tv-linklbox etc. Take the time to read some of the very good jQuery docs, it will save you time in the end.

Your prev and next buttons (left and right) are not properly disabled when at the beginning or the end of the scrollable.

On the upside, it (almost) works most of the time ;-)

Sorry, I don't think cleaning up,rearranging and fixing your code can be done in this forum; well, at least not by me, I'm too lazy to do the dirty work for you which is mostly not jquery.tools related - unless you pay me of course ;-)

you don't clean my code.......
you just tell me about the scrollable, why it is not working as needed.
why the next button behave strangely sometimes....
why when i say go to index 18, that index doesn't show up at all ??

In my humble opinion the scrollable does not work as intended because some of your code unrelated to scrollable is broken or to painful for my personal lazyness to sort out.

I came to that conclusion after I set up a sample page where scrollable does what you want it to do by working around a possible bug in scrollable that I reported here.

Of course, chances are that my conclusion is utterly wrong and you find someone who solves the problem in 10 minutes.

Thanks everyone about this discussion. This issue will be fixed on Tools 1.1. scheduled on beginning of next month.