Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Twitter Sign In with OpenID Sign In with Google

Sign In Sign Up

Categories

In this Discussion

Tagged

Jo Home Page
GitHub Repo
Welcome to the Jo support forums! Please Sign Up and join in the discussion. You can also Sign In instantly with Twitter, OpenID or your Google ID.
Scrolling/Bounce physics in Joapp
  • jpsheridanjpsheridan April 2012
    Posts: 35

    Hello again,

    I've got the latest version from gitub. I'm not sure I like the screen scrolling/bounce physics on IOS, it's kinda funky acting.  First it sort of jumps a little when I lift my finger after drag scrolling.  Second when at the top or bottom of a screen it seems to stretch down, pause for sometimes what seems like a second and then bounces up but it's not very smooth and not particularly like IOS mechanics  BTW I'm using an iPhone 4s, so it's running IOS5.

    If my research serves me doesn't IOS5 now support proper native scrolling even with fixed width containers?  Is this implemented in Jo?

    Is it possible to turn off Jo scrolling behavior and integrate iScroll or Scrollability?

    Not nit picking here, I like what I see in the framework.

    Thanks,

    JP

  • davedave April 2012
    Posts: 415

    It definitely is possible to turn off scrolling for iOS5. This will be baked into the framework soonish, but meantime in any situation where you'd rather have native scrolling (including desktop applications), here's what I've done in the past:


    1. detect applicable browser (jo has a built-in which helps with this)
    2. tell jo not to scroll
    3. adjust your CSS (which can be done dynamically)

    Here's a quick code snippet I've used for desktop applications, tweak to suit:

    if (!jo.matchPlatform("ios ipad iphone hpwos webos playbook android bada playbook")) {
    joDOM.loadCSS("css/browser.css");
    joScroller.prototype.onDown = function() {};
    }

    Obviously, you'll want to change your platform detection string :)
    Dave Balmer, Jo Code Wrangler
  • davedave April 2012
    Posts: 415

    With this CSS (can't attach, grr) for "css/browser.css" referenced above:


    joscroller {
      position: absolute;
      display: block;
      height: auto;
      width: auto;
      top: 0; left: 0; bottom: 0; right: 0;
      overflow: auto;
      padding: 0;
      margin: 0;
      -webkit-transform: none;
      -moz-transform: none;
      -o-transform: none;
      -ms-transform: none;
    }
    joscroller > * {
      position: relative;
      top: auto;
    }
    .flick {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
    }
    .flickback {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
    }
    .flickfast {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
    }

    jocard {
    padding-bottom: 0;
    }

    jocontainer {
    height: inherit;
    }

    joscroller {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

    Dave Balmer, Jo Code Wrangler
Add a Comment