Pinch & Zoom

22 posts, 0 answers
  1. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 13 Nov 2012 Link to this post

    I'm playing/learning Icenium using the examples.

    I've read somewhere that Kendo UI Mobile on Icenium does not support Pinch & Zoom or at least disables it.

    Can I get pinch and zoom to work using Jquery Mobile and Icenium?

    I've tried adding the meta tag and a snippet of javascript:
        $(document).bind('mobileinit', function() {
            $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2, user-scalable=yes';
            $.extend($.mobile.zoom, {locked:false,enabled:true});
        });
  2. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 14 Nov 2012 Link to this post

    Hello Pete,

    In fact Kendo UI Mobile supports Pinch & Zoom as shown in their demo pages,

    as for jQuery Mobile you can try this, and see if it is what you looking for.

    Regards,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    Hi Jordan,

    should both of these work in Ion on an iPhone?

    Regards

    Pete
  4. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 14 Nov 2012 Link to this post

    Hi,

    yes no reason why not.

    You may need to replace Kendo Mobile with more recent version from here.

    Kind regards,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  5. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    Hi Jordan.

    Am I losing the plot here? I'm using Icenium, why do I need to download anything at all? It's supposed to be a hosted build solution, nothing to download, nothing to install, it just works :)

    Does Pinch & Zoom work for you on the Icenium examples on Ion?

    Regards

    Pete

  6. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 15 Nov 2012 Link to this post

    Hello,

    Your absolutely right, in most cases it should work right out of the box as we update Icenium project templates to the latest Kendo UI Mobile version available at a time of each release.

    But this is not the case with Punch and Zoom demo as it uses the latest Kendo Mobile UI version (from Nov 14, 2012 :)

    To help you start with Pinch and Zoom I just created a working sample app you can Clone from here:

    https://github.com/Icenium/sample-pinch-and-zoom.git

    Greetings,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  7. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 15 Nov 2012 Link to this post

    Hi Jordan,

    thanks for the example, If I could convince Ion to install any application other than the one it has installed I may get to see if Pinch and Zoom works.

    I'm off to un-install Ion on my iPhone again and then ..... scream!
  8. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 15 Nov 2012 Link to this post

    Hi Jordan,

    I created a new project instead which had the great effect of kick starting Ion back into action.

    I've copied the later release of Kendo ui and added data-zoom="true" to the divs.

    It works perfectly, thank you.

  9. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 17 Nov 2012 Link to this post

    Hi Jordan,

    I've just got a Nexus 10 and the zoom works great but pinch is very erratic.

    Is there a way in javascript to reset the zoom level?

    Regards

    Pete
  10. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 19 Nov 2012 Link to this post

    Hello Pete,

     just spoke with Kendo Team and they suggested to use this:

    app.scroller().scrollElement.css("-webkit-transform", "");
    Where app is your Kendo Mobile application.

    As about performance with Nexus 10 and pinch you can try this:

    Got to Android Settings > Developer options > Force GPU rendering and enable this option
    Then kill the app and try again.

    Regards,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  11. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 19 Nov 2012 Link to this post

    When will this (Kendo UI Q3) be incorporated in Icenium when creating new project?
  12. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 19 Nov 2012 Link to this post

    @Jan-Dirk we are updating Icenium templates to latest Kendo UI Mobile and jQuery mobile versions if they pass some basic  tests so expect it with next Icenium release.

    Note that as general rule existing project do not get auto updated as this can bring unexpected compatibility issues with user code.
    If you need to upgrade any JavaScript library right now do so at any time nothing bounds you with particular Icenium release.

    If you wish you can create feature request so our team will bring some smart solution for this scenario if there is high demand about it.
     
    All the best,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  13. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 20 Nov 2012 Link to this post

    Hi Jordan,

    This works perfectly to reset the screen:
    app.scroller().scrollElement.css("-webkit-transform", "");

    But I still have an issue with Pinch, I'll ignore it for now and see if the problem goes away when Google finish 4.2 :)
  14. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 20 Nov 2012 Link to this post

    Hello,

    I guess "Android Settings > Developer options > Force GPU rendering" did't fixed it?

    I asked Kendo Team about that too, but they were not aware of it or the solution for it, also do not have the device to test on yet so may take awhile to investigate.

    All the best,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  15. pete
    pete avatar
    20 posts
    Member since:
    Nov 2012

    Posted 21 Nov 2012 Link to this post

    Hi Jordan,

    No, "Android Settings > Developer options > Force GPU rendering" didn't fix it.

    Though, as I hinted before, Android 4.2 has a very unfinished feel about it, so I'll wait to see what happens.

    Thanks for your help.

    Pete
  16. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 12 Dec 2012 Link to this post

    Hi Jordan,

    I added data-zoom="true" to the views and compiled with Icenium to Android with Kendo Mobile build 2012.3.1114 (commercial release).

    I tested on an Android Desire HD running 2.3.5 and it doesn't seem to have any effect.

    I'm surprised this is added as it wasn't really mentioned in the release notes.

    http://www.kendoui.com/mobile/whats-new/release-notes/q3-2012-version-2012-3-1114-0-0.aspx











  17. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 14 Dec 2012 Link to this post

    Hello Norman,

    Regarding ANDROID 2.3.* Gingerbread  (Nexus One and Nexus S), there is no multi-touch support in browser engine. This is a known android issue.

    And there is not much Kendo team or Icenium team can do much about :( it worked in 2.2 and again in 3.0+

    Kind regards,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  18. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 14 Dec 2012 Link to this post

    Thanks Jordan.

    I was just using my own phone for testing rather than our test units, HTC stopped supporting it so no updates. Thankfully my contract is up next month.

    I'll test on our iPhone handsets.

    Thanks for letting me know,
    Norman.
  19. John Wahlen
    John Wahlen avatar
    4 posts
    Member since:
    Sep 2012

    Posted 13 Mar 2013 Link to this post

    So I upgrade the Kendo UI Mobile to the latest and Pinch and Zoom works but now my listview buttons  fail to fire onclick events.  I've tried to use data-click but that fires every record when loaded.  Here is the template code I have for it: 

    <script type="text/x-kendo-template" id="listviewHeadersTemplate">
    #if (data.EventTitle != 'TBA') {#               
    <div id="leftPanel">
    #if (data.MySchedule == 'true') {#
    <button id="ArtistPageButton"  onclick="RemoveEvent('${EventId}')">
    <img src="Resources/ScheduleAdded.png" />
    </button>
    #}
    else {#
    <button  id="ArtistPageButton" onclick="AddEvent('${EventId}')">
    <img src="Resources/ScheduleAddTo.png" />
    </button>
    #}#
    </div>
    <div id="rightPanel" data-role="content" onclick=" ArtistPageClick('${artistId}') ">
    <div class="item-EventTitle">
    ${EventTitle}
    </div>
    <div class="item">
    <!--${EventDateStr} - -->${EventStartTime} &middot;
    ${LocationShortName}
    </div>
    #}
    else {#
    <div id="leftPanel" class="schedule-TBA"></div>
    <div id="rightPanel" class="schedule-TBA">
    <div class="item-EventTitle">
    ${EventTitle}
    </div>
    <div class="item">
    <!--${EventDateStr} - -->${EventStartTime} &middot;
    ${LocationShortName}
    </div>
    </div>
    #}#
    </script>


  20. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 Mar 2013 Link to this post

    Hi John,

    This should be working if you upgrade to the latest beta of KendoUI (in general custom upgrades of Kendo are only required in case fixes are released as part of unofficial releases, otherwise Icenium is continually upgraded with Kendo's latest stuff).
    Still, the recommended approach in this case would be to use the listview click event to handle clicks of items in listview.

    Kind regards,
    Steve
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  21. syed
    syed avatar
    1 posts
    Member since:
    Dec 2013

    Posted 11 Dec 2013 Link to this post

    Hey Jordan,
    Is there a problem with data-stretch="true" and data-zoom="true" co-existing for a div whose data-role="view"?
  22. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 11 Dec 2013 Link to this post

    Hello Syed,

    Setting 'data-stretch=true' would disable the view scrolling and zooming as the view occupies the whole screen and this behavior is by design.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top