Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Disable Click Navigation, Corners #206

Open
jonaslund opened this Issue · 15 comments

5 participants

@jonaslund

Two Part Question

1) I'm trying to force a user to use the drag method of turning a page and disable the auto-turning of a page on mouseup, so a user would have to drag the page to turn it to the next one – and the click would be totally disabled. Is there a clever way of doing that?

2) When disabling some corners, turnjs doesn't unbind the click event, so when hover over bl I don't see the peel effect, however, when I click on it, it will still navigate the book. Is there a way to completely disabled all but one corner?

Disabled this way

$("#magazine").bind("start", function(event, pageObject, corner) {    
    if (corner=="tl" || corner=="bl" || corner=="br" ) {
      event.preventDefault();      
    }
 });

Thx!

@blasten
Owner

@jonaslund you right. The code wouldn't work for that, because turn.js doesn't listen to the click event at all, it only listen to mousedown/touchstart, mousemove/touchmove, mouseup/touchend, the click is almost a sequence of these events. 'start' is triggered in 'touchmove', which doesn't quite fit with onclick. I cannot think a way without changing the source. I thought this behavior was important because enables to turn pages quickly, which at end of the day is the most important part. Next version a

@jonaslund

Seems like you got cut off there. So there's no (easy) way to disable one or more corner completely..?

@tanvirgeek

I suggest use a transparent div over the turn corners you want to disable. :)

@hanskait

tanvirgeek, corner works over the transparent div too

@tanvirgeek

No. it disables the turning. But peel effect will be still there.

@hanskait

Yes, it disables the turning but not the peel effect. Do you think it could work only for cover page?

@tanvirgeek

You can do this-> When first page is turned, change the transparent div to display: none by jQuery.

@hanskait

tanvirgeek, the demo page if offline, could you upload again one time to see the code for the corners?

@hanskait

tanvirgeek, i've resolve it.
Now, i will try to stop the peel effect.
thanks !

@tanvirgeek

Great !! Let me know if you can turn peel effect off. I could not do it trying a lot. You are welcome.!!

@hanskait

tanvirgeek, i think i resolve it.

Using the hover event of the transparents divs.
corner_tr, corner_br are the divs:

$("#corner_tr").hover(
function () {
$('#flipbook').turn('disable', true);
},
function () {
$('#flipbook').turn('disable', false);
}
);

$("#corner_br").hover(
function () {
$('#flipbook').turn('disable', true);
},
function () {
$('#flipbook').turn('disable', false);
}
);

I hope this could help you.

@hanskait

Last code works on Firefox, but not at Internet Explorer.
IE doesn't like hover, so i use mousenter/mouseleave.
It triggers the mouse event but the '.turn('disable', true)' doesn't work.

$("#corner_tr").mouseenter(function(){
$('#flipbook').turn('disable', true);
});

$("#corner_tr").mouseleave(function(){
$('#flipbook').turn('disable', false);
});

Any Idea for IE compabilty?

@tanvirgeek

Hey buddy!! It worked. I don't know much about IE. Recently working on a project. I will let you know when i am done. Thanks.

@groue

I have the same issue.

My goal is to let the user turn the pages by clicking/tapping some zones in the page content. On mobile devices, one can not expect the user to tap corners: they are too small, and there is no hover effect that lets users discover how to turn pages.

It happens that the top of the page is such a tappable area which turn pages. When the user taps a top corner, turnjs turns the page, and the tappable area turns the page as well: double turning!

I really wish I clicking on a corner would not turn the page. The preventDefault() technique seen above disables the peeling as well, which I do no want, because we lose the ability to manually drag a page.

BTW, I also wish any area of the page could trigger the fast page turning that only corners can provide today.

Thanks for your work, by the way!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.