Disable Click Navigation, Corners

[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]

@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.

[tanvirgeek]

http://neptune.grayhatweb.com/coachart/assets/html/tanvir-demo-Final/ I disabled the corners by transparent divs.

[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!