This is a migrated thread and some comments may be shown as answers.

How to open a view and scroll down to a specific anchor ?

1 Answer 131 Views
View
This is a migrated thread and some comments may be shown as answers.
Yohann
Top achievements
Rank 1
Yohann asked on 28 May 2014, 12:51 AM
Glad to be the first one on this thread !

I have the following page :

<!-- EVENT Page !!! Inherit the layout just above for footer and header -->
        <div data-role="view" data-layout="overview-layout" data-show="showEvent" data-init="initEvent" data-title="Meet My Friends" id="event" data-id="0" data-transition="slide">
            <div data-role="content" class="content">
 
                <div id="eventContent"></div>
 
                <div class="eventButtons"> <!-- We'll have to add the join this friend at event -->
                    <table class="friends-tabs">
                        <tr>
                            <td class="tab-active" data-friends="might">Recommended</td>
                            <td class="friends-tab" data-friends="notifs">Wanna Go</td>
                            <td class="friends-tab" data-friends="invites">Invites</td>
                            <td class="friends-tab" data-friends="all">All</td>
                        </tr>
                    </table>
                </div>
 
                <div data-role="scroller" class="scrollerFriends">
                    <ul id="friendsToInvite"></ul>
                </div>
 
                <div>
                    <form id="friendSearchForEvent" class="km-filter-form">
                        <div class="km-filter-wrap">
                            <input type="text" id="messageInputFSE" placeholder="Friend Name" style="width:85%"/>
                            <button id="searchFriendForEvent" class="button2 btn-grey">Go</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

And when someone click on a link to this page (basically href="\\#event? ..." ) I would like to redirect them to the div#friendsToInvite in within that view.

I guess I can do this with the scroller method scroll to but the height of the page vary depending on the template. Since Kendo UI uses # tags to select the view to be displayed, how can I sepcify a div based on ID ?
Many Thanks

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 28 May 2014, 08:25 AM
Hi Yohann,

If you wrap your content inside a Kendo UI Scroller, then you can use its scrollTo() method to scroll to the desired item, using the jQuery position() method to determine its location. Here is an example that shows a sample approach:

http://jsbin.com/muvip/1/edit

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
View
Asked by
Yohann
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or