Completely disable page turn on page click?

[andrewmartin]

This is somewhat related to issue #233. I was wondering, is there any way (in the latest version of turn.js, not the one on github) to completely disable the page turn altogether? I've been struggling with this for quite awhile now, so I figured I would ask –– I did try to use the "stop" method as well as doing some other tricky things.

In fact, was curious if it was also possible to disable the "hover" effect that lifts the pages? We are using next / previous arrows to turn the pages and are doing some pretty complex interactions on click so it would be great to disable this.

Let me know if you can––and thanks for the wonderful, wonderful work!

[blasten]

@andrewmartin Have you seen this http://turnjs.com/docs/Method:_disable?

$("#flipbook").turn("disable", true);

[andrewmartin]

I did see that, but it completely disables turns altogether?

On Friday, January 4, 2013 at 1:46 PM, Emmanuel Garcia wrote:

@andrewmartin (https://github.com/andrewmartin) Have you seen this http://turnjs.com/docs/Method:_disable?
$("#flipbook").turn("disable", true);

— Reply to this email directly or view it on GitHub (https://github.com/blasten/turn.js/issues/268#issuecomment-11901215).

[blasten]

You want to disable the hover effect. What about using the start event:

$("#flipbook").bind("start", function(event, pageObject, corner) {
  if (corner!=null) {
    event.preventDefault();
  }
});

[andrewmartin]

Emmanuel,

Here's what I've got loaded in:

this.flipObject.turn({
  width: 968,
  height: 650,
  autoCenter: true,
  turnCorners: "r,l",
  gradients: false,
  disable: true,
  when: {
    turned: function(event, page, pageObj) {
      return self.activate(event, page, pageObj);
    },
    last: function() {
      return $("body").toggleClass("last");
    }
  }
}).bind("start", function(event, pageObject, corner) {
  if (corner != null) {
    return event.preventDefault();
  }
});

this.flipObject is a jQuery ID selector that's working fine. Do I have the JS set up in a way that should work? If so, it seems to have no effect (works the same with or without it).

[andrewmartin]

@blasten any ideas here?

[andrewmartin]

@blasten Any help would be greatly appreciated––Everything else is working great!

[blasten]

@andrewmartin Are you using 4th release? I have tried, and it disabled all hovers. You don't have to use disable:true, please check this out:

this.flipObject.turn({
  width: 968,
  height: 650,
  autoCenter: true,
  when: {
    turned: function(event, page, pageObj) {
      return self.activate(event, page, pageObj);
    },
    last: function() {
      return $("body").toggleClass("last");
    },
    start: function(event, pageObject, corner) {
      if (corner != null) {
        return event.preventDefault();
      }
    }
  }
});

[andrewmartin]

Boom, that did it! Thank you!

On Tuesday, January 8, 2013 at 1:01 PM, Emmanuel Garcia wrote:

@andrewmartin (https://github.com/andrewmartin) Are you using 4th release? I have tried, and it disabled all hovers. You don't have to use disable:true. this.flipObject.turn({ width: 968, height: 650, autoCenter: true, when: { turned: function(event, page, pageObj) { return self.activate(event, page, pageObj); }, last: function() { return $("body").toggleClass("last"); }, start: function(event, pageObject, corner) { if (corner != null) { return event.preventDefault(); } } } });

— Reply to this email directly or view it on GitHub (https://github.com/blasten/turn.js/issues/268#issuecomment-12017011).

[blasten]

awesome!!

[andrewmartin]

@blasten Sorry, I spoke too soon. So, the hover is now disabled (which is great!) but when you do click, it still progresses the page. Any way to stop it from turning altogether if you ever click on the Flipbook? And have the turn interactions solely occur by clicking custom next / previous buttons?

[andrewmartin]

By the way, here's the code after your implementation:

(function() {

  this.flipObject.turn({
    width: 968,
    height: 650,
    autoCenter: true,
    turnCorners: "r,l",
    gradients: false,
    disable: true,
    when: {
      turned: function(event, page, pageObj) {
        return self.activate(event, page, pageObj);
      },
      last: function() {
        return $("body").toggleClass("last");
      },
      start: function(event, pageObject, corner) {
        if (corner != null) {
          return event.preventDefault();
        }
      }
    }
  });

}).call(this);

[blasten]

I see, in that case you have to prevent the turning event, but there's no way to know where the turn action come from. Therefore, you will have to tell turn.js whenever that happens.

 this.flipObject.turn({
    width: 968,
    height: 650,
    autoCenter: true,
    when: {
      turned: function(event, page, pageObj) {
        return self.activate(event, page, pageObj);
      },
      last: function() {
        return $("body").toggleClass("last");
      },
      start: function(event, pageObject, corner) {
        if (corner != null) {
          $(this).turn('data').hover = true;
          return event.preventDefault();
        }
      },
     turning: function(event, page, newView) {
        if ($(this).turn('data').hover) {
          $(this).turn('data').hover = false;
          event.preventDefault();
        }
     }
    }
  });

[andrewmartin]

You, my friend, are the man! Thank you. This works perfectly!

On Tuesday, January 8, 2013 at 1:43 PM, Emmanuel Garcia wrote:

I see, in that case you have to prevent the turning event, but there's no way to know where the turn action come from. Therefore, you will have to tell turn.js whenever that happens. this.flipObject.turn({ width: 968, height: 650, autoCenter: true, turnCorners: "r,l", gradients: false, disable: true, when: { turned: function(event, page, pageObj) { return self.activate(event, page, pageObj); }, last: function() { return $("body").toggleClass("last"); }, start: function(event, pageObject, corner) { if (corner != null) { $(this).turn('data').hover = true; return event.preventDefault(); } }, turning: function(event, page, newView) { if ($(this).turn('data').hover) { $(this).turn('data').hover = false; event.preventDefault(); } } } });

— Reply to this email directly or view it on GitHub (https://github.com/blasten/turn.js/issues/268#issuecomment-12018968).

[andrewmartin]

@blasten

We are SUPER close on this, but there is one more problem.

With my next/previous links now, I have to click two times in order for the page to turn. One click does not do it, but it always successfully turns on the second click.

I have your code loaded in exactly as documented above, and a very simple "goTo" custom method I created that's activated on the click event.

Before all of this hover stuff was added, the next/previous worked perfectly:

goTo: (e) ->
    if $(e.currentTarget).hasClass("next")
      @flipObject.turn("next")
    else
      @flipObject.turn("previous")

Any ideas how to fix this?

[andrewmartin]

Still nothing (just posted a comment that it worked, but no dice).

This gets it closer, but the page still turns when you click on it.

        start: (event, pageObject, corner) ->
          if corner?
            $(this).turn("data").hover = false
            event.preventDefault()
        turning: (event, page, newView) ->
          if $(this).turn("data").hover
            $(this).turn("data").hover = false
            event.preventDefault()

[andrewmartin]

@blasten any ideas here?

[blasten]

@andrewmartin I cannot see any problem in the code. I tested it out and worked. Could you send me a link?

[andrewmartin]

@blasten Let me talk to my project managers and see if we can get you access. It's a secure private portal right now.

Are you sure that with next/previous buttons and the code below, if you click next/prev it doesn't require two clicks to advance to the next page?

this.flipObject.turn({
    width: 968,
    height: 650,
    autoCenter: true,
    when: {
      turned: function(event, page, pageObj) {
        return self.activate(event, page, pageObj);
      },
      last: function() {
        return $("body").toggleClass("last");
      },
      start: function(event, pageObject, corner) {
        if (corner != null) {
          $(this).turn('data').hover = true;
          return event.preventDefault();
        }
      },
     turning: function(event, page, newView) {
        if ($(this).turn('data').hover) {
          $(this).turn('data').hover = false;
          event.preventDefault();
        }
     }
    }
  });

[andrewmartin]

Okay @blasten, boom! Got it set up on JSFiddle for you to check out:

http://jsfiddle.net/sLZnJ/

As you can see, if you click on the sides of the pages, it does work (eg. it does not advance to the next page). However, clicking on the "next" or "previous" arrows (gray arrows on the side of the image) requires two clicks in order to advance.

I'm guessing it's something to do with the way you're setting the $(this).turn('data').hover variable.

I would appreciate your help, I have put in so much work trying to get this to work! Thanks in advance for your time and consideration of this issue. I feel like it's close!

[andrewmartin]

@blasten you may want to use this slightly modified link actually. Less images and I fixed some of the positioning.

http://jsfiddle.net/sLZnJ/2/

[andrewmartin]

@blasten any chance you could take a quick peek at that JSfiddle? Spent awhile getting that set up and we really need help here. I would really appreciate it.

Thank!

[andrewmartin]

@blasten please, please if you have a moment we are getting ready to move to production and would love to get this issue resolved.

Check out the JS fiddle posted above.

[blasten]

Here's working http://jsfiddle.net/blasten/A9a7E/2969/.

[andrewmartin]

Cool, this kind of works.

I found the root cause of the bug, or at least how to create the problem though.

Try clicking on the first page on the right side of the page, as if you were going to turn it. After this, in fact, it does take TWO clicks on the "Next" button to advance to the next page. Otherwise it works fine. This will work for now, sorry for harassing you and I appreciate your help.

On Sunday, January 27, 2013 at 8:14 PM, Emmanuel Garcia wrote:

Here's working http://jsfiddle.net/blasten/A9a7E/2969/.

— Reply to this email directly or view it on GitHub (https://github.com/blasten/turn.js/issues/268#issuecomment-12768130).

[andrewmartin]

For what it's worth, because I feel like people may want to fix this, you can disable by editing the turn.js source code on line 2009 of the 4th release. I just edited the _cornerActivated method to return false when using hard page effect.

_cornerActivated: function(p) {

  var data = this.data().f,
    width = this.width(),
    height = this.height(),
    point = {
      x: p.x,
      y: p.y,
      corner: ''
    },
    csz = data.opts.cornerSize;

  if (point.x <= 0 || point.y <= 0 || point.x >= width || point.y >= height)
    return false;

  var allowedCorners = flipMethods._cAllowed.call(this);

  switch (data.effect) {
    case 'hard':
      return false; // added by andrew martin to remove the corner effect
      if (point.x > width - csz)
        point.corner = 'r';
      else if (point.x < csz)
        point.corner = 'l';
      else
        return false;

      break;
...

[rvwhitney]

Hello! I am writing an app that uses turn.js with drag and drop from jquery ui. I have tried and tried to disable/enable page turning on a page by page basis with no luck using $('book').turn('disable',true); and subsequently $('book').turn('disable',false); when certain criteria are met - there is an interactive form with inputs depending on which page you are on. this all uses AJAX throughout the book - any ideas? Thanks

[rmorse]

Just to add, I didn't want the corners to be draggable at all, thanks @andrewmartin for the direction, I simply replaced that function with:

_cornerActivated: function(p) { return false; }

This allows limitation of page turning to my own custom pagination only.

Thanks

[hzmming]

My solution here,

when: {
  // disable gesture action
  start(event) {
    if ($(this).turn('data').mouseAction) {
      return event.preventDefault();
    }
  },
  // disable click action
  turning(event) {
    if ($(this).turn('data').mouseAction) {
      return event.preventDefault();
    }
  }
}