Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
+3 votes
Hi,
first of all I'd like to say this really looks like a great project. As it matures I am definitely going to buy a few licenses.

My question: are you considering to use something like iScroll to get a real smooth scrolling/swiping experience?

Keep up the good work,
Wim
in feature_requests by (430 points)
  
Thanks, Wim. Are you interested in iScroll for scrolling text, or the entire navigation of the pages?
Hi Justin, I am interested in using it for the entire navigation of the pages. I generated a horizontal slider test doc and tested its use on an iPAD. I noticed it is a lot less smooth than iScroll (seems to be used in quite a few places). Hence my request for consideration.
Kind regards,
Wim
Thanks for the clarification. We'll keep iScroll in mind going forward.
I have replaced anythingslider with iScroll4 after generating the code, just to show what I mean ;).
It is not difficult to do, but the resulting "swipe smoothness" is much closer to the expected iPad behavior.
Very small demo:
http://digipublish.eu/in5/iscroll

PS 1.3 is a great release :)
Cool! Thanks for putting this together!

1 Answer

+1 vote
 
Best answer

This will be integrated into the default code at some point in the future after we've done more testing, but for now, you can export a Slider with swipe enabled and attach the following code as a .js file in the Resources section of the in5 dialog to create a "smooth" swipe:

$(function(){
  $("#container").swipe("destroy");
  var pageWidth = parseInt($(".page").width());
  var pageChangeThreshold = pageWidth*.33;
  var pageWrap = $('.pages'), startPos, vertMode = false,
  nextProp = 'left', backProp = 'right', moveProp = 'left';
  var cancelSwipe = function(){
      pageWrap.animate({left:startPos+'px'},'fast');
  };
  $("#container").swipe({
          allowPageScroll: (vertMode ? 'horizontal' : 'vertical'),
        fingers:1,
excludedElements:$.fn.swipe.defaults.excludedElements+',.mejs-overlay-button,map,[onclick],[data-useswipe="1"],[data-tapstart="1"], .panzoom,.scroll-horiz',
        swipeStatus:function(event, phase, direction, distance, duration, fingers) {
            switch(phase){
                case 'start':
                    startPos = parseInt(pageWrap.css(moveProp));
                    break;
                case 'end':
                    if(distance > pageChangeThreshold){
                        switch(direction){
                            case nextProp:
                                if(nav.current < nav.numPages) nav.next();
                                else cancelSwipe();
                                break;
                            case backProp:
                                if(nav.current > 1) nav.back();
                                else cancelSwipe();
                                break;
                        }
                    } else {
                        cancelSwipe();
                    }
                    break;
                case 'move':            
                    switch(direction){
                        case nextProp:
                            pageWrap.css(moveProp, (startPos-distance)+'px');
                            break;
                        case backProp:
                            pageWrap.css(moveProp, (startPos+distance)+'px');
                            break;
                    }
                    break;
                case 'cancel':
                    cancelSwipe();
                    break;
            }
        },
        threshold:4,
        maxTimeThreshold:9000
    });
})

 

by (197k points)
selected by
It's in the animate function. Reference:
http://api.jquery.com/animate/

I think you'd need to add JS to modify the animationTime setting. E.g.,

sliderSettings.animationTime = 600;

600 milliseconds is the default, so change that number to make it slower or faster.

I'm not sure what you mean by the "vertical floating"...are the pages varying heights?

Thanks for the video. That's very helpful! That up and down movement is default for iOS. I don't think there's safe way to override that with CSS or JavaScript.
No, requires this extra code.
Sorry, no idea. Since this is not an official feature, it has not been thoroughly tested.