Tap event in Navbar

2 posts, 0 answers
  1. Richard Pense
    Richard Pense avatar
    12 posts
    Member since:
    Apr 2009

    Posted 31 Jul 2013 Link to this post

    According to Apple iOS usability  guidelines:
      "iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list"

    So, I try to implement with the following about.html.  Tap event is not showing up in console.  Any ideas?
    Thanks,
    Rick

    <html>
    <head>
        <title>About</title>
    </head>
    <body>
        <section data-role="layout" data-id="about-layout">
            <header data-role="header">
                <div data-role="navbar" data-tap="myTouch.tap">
                    <span date-role="view-title">About</span>
                </div>
            </header>
            <!--View content will render here-->
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#home" data-icon="home">Home</a>
                    <a href="search.html" data-icon="search">Search</a>
                    <a href="about.html" data-icon="about">About</a>
                    <a href="more.html" data-icon="more">More</a>
                </div>
            </footer>
        </section>
        <div id="about" data-role="view" data-layout="about-layout" data-zoom="true" data-reload="true">
    ... long content removed
        </div>
        <script>
            function NavTouch() {
                console.log("tap");
                var view = $("#about").data("kendoMobileView");
                view.scroller.reset();
            }
            window.myTouch = {
                tap: function(e) { NavTouch(); },
            }
            </script>
    </body>
    </html>
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Aug 2013 Link to this post

    Hello Richard,

    The status bar tap is handled by the browser itself - it is unlikely that this tap will reach the DOM. In case you are using phonegap, you may look into a custom plugin which should support that. 

    Regards,
    Petyo
    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