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

2 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 27 May 2014 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 28 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top