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
and i'm just wondering but in5 can't do this smooth swipe natively still right? there isn't an option in the setting that i'm missing?
No, requires this extra code.

I've found that a line of the code with the cancelSwipe function seems to break text form fields added with an embedded HTML block on the exported pages, any idea why this would be or a work around? the line in question is below, and it seems to be the only place in the javascript that the .animate function is used, removing this function obviously breaks all of the swiping added from this extra code.

pageWrap.animate({left:startPos+'px'}, 'fast');
Sorry, no idea. Since this is not an official feature, it has not been thoroughly tested.
dang, thanks though.