Scrolling to a point.

[Michael]

We are trying to make a button which calls some ajax.  But when it's done we want the content to be scrolled up.  So it's front and center.

we have found this.

/**
 * Scrolls the container to the top.
*/
reset: function() {
      this.movable.moveTo({x: 0, y: 0});
},

with in kendo.mobile.scroller.js

But we have yet to find out how to use the method "moveTo(x,y)"

Any help would be GREAT!!!!! 

[Michael]

I did just find something but it's not the greatest.

$(elem).data().kendoMobileView.scroller.movable.moveTo({ x: xp, y: yp });

Maybe someone can tell me the best way to do this.  This is how I get the xp and yp

var pos = $("#ListingWrap").position();

#listingwrap is what I want to be visible.  Currently using pos.top, pos.left.

[Petyo]

Hi Michael,

The syntax (albeit a bit verbose) is the correct way to scroll the scroller to a given point. A scroller scrollTo method would have the same implementation. The way to obtain the element position is also correct. 

Greetings,
Petyo
the Telerik team

[David Gerding]

Hi,
I'm trying to do something very similar in KendoMobile.  But I need a function that will ensure that the row of text in which a targeted word is selected is scrolled to a mid-way point of viewable area of the scroller.  So I have have many screens worth of text in the scroller, and need to get the scroller to center (vertically) the text row given a span ID.  

All of the words in my scroller have a unique ID.  And I'm already getting some behavior like the one I want using the technique suggested here.  Unfortunately, the "scroll" behavior is more of a very temporary jitter or bump, visually, and then the scroller resumes its initial state.

Can "scrollTo" get me the result I need?  Even if the targeted word (as a span) is currently not in view?

Thanks,
Dave G

[Petyo]

Hi David,

A scrollTo method is scheduled for our next major release, but yet not available. Can you showcase the problem you describe? the approach below should work, in general. 

Regards,
Petyo
Telerik

[David Gerding]

Hi Petyo, 
What is the eta for that feature release?  Thanks, Dave G 

[Sebastian]

Hello Michael,

The next major Kendo UI release is slated for late November.

Regards,
Sebastian
Telerik

[David Gerding]

Thanks for the info.  I wish I could wait that long, but really can't.

Assuming I have a collection of spans with infringementing unique IDs, and that those spans are in a div which is in a scroller, can you think of the right script that would "scroll to" the appropriate span given an ID?  I guess the goal would be to get the line of text in which the span resides to always stop at the same "row" or hieight offset relative to to the top of the scroller, so given:

     <div id="scrollerContent" data-role="scroller"  ><div id="readingContent" ></div></div >

Where the spans are added programmatically (and init'd against kendo) depending on what text I'm loading into "readingContent" - is there some way to get this effect?

Thanks,
Dave

[Alexander Valchev]

Hi David,

Can you prepare a small jsBin sample which demonstrates your implementation? In this way I will be able to test the aforementioned approach in the exact scenario that you have and provide you with a concrete recommendations.
Thank you in advance.

Regards,
Alexander Valchev
Telerik

[David Gerding]

Hi Alexander,
Using this as a context, how would I scroll to an span word?  Could I update that index continuously and get some something like programatically controller scolling animation?

Thanks.

http://jsbin.com/IRinAmA/7/edit

[Alexander Valchev]

Hello David,

I am afraid that programmatic animated scrolling is not supported at present.

Regards,
Alexander Valchev
Telerik

[David Gerding]

The animation part isn't requisite.  Can you help with a non-animated solution asap?

Thanks so much.

Dave

[John]

Hi David

I saw this thread whilst looking for a similar solution and it gave me more impetus to keeping trying.

I've had a go at your issue and have a fiddle that I believe works pretty well: http://jsfiddle.net/jiggle/nj6qK/4/

The key I think was getting the scrollTarget.offset().top, where scrollTarget is one of your spans.

Then getting the scroller object of the main div  scroller (data-role="scroller" in your case id="bar")

var scroller = $("#bar").data("kendoMobileScroller");

then using the scrollTo method of the scroller to go to a particular offset (in this case the offset.top of the span you want to jump to minus where the scroller div beigns )

var scrollY = scrollTarget.offset().top-$("#bar").offset().top ;
scroller.scrollTo(0,-scrollY);

Have a look and let me know if it does what you want.

Cheers

Johno

[David Gerding]

Wow - what a nice response!   Thanks - yes, this is exactly what I was looking for... much appreciated.   Name your favorite charity and I'll Paypal them something :)  No kidding.

Dave G

[John]

Hi Dave

That's great to hear, I'm really glad I was able to help.  I was "paying it forward", if you like, as without other people's time and effort on many forums, we'd all be "knackered".

And your offer of making a donation to charity is very thoughtful and there is a great charity in the UK that supports the development of children and adults with Down's Syndrome:

http://www.downs-syndrome.org.uk/

Best of luck with your project. :-)

Regards

John