Pagecurler for ipad

Animation
1

Hello,

At first, I have to apologize that I'm using Hype now for several years knowing absolutely nothing about programming. I always use an example from some expert and then I make changes by trial and error, for instance: https://www.janmac.nl/snoep/snoep.html
Once I made a small book that way and now I want to change it for iPad but page after page and not two at a time. Within the document, I found an HTML Widget and I suppose I have to change it.
I hope it's not too much to ask for help.
This is my attempt so far. I know there is a special iPad layout, but of course it doesn't work that way. This is my attempt till so far: https://www.janmac.nl/kieviten/kieviten.html
Thank you very much for a good tip.

2

It sounds like you want a portrait orientation that only shows one page?

Per the turn.js documentation, it appears the display option can have single as an option. So you'd change the line in your turn() function from:

							display: 'double',

to:

							display: 'single',

However the layout may need adjustment after this -- I'm not too familiar with the turn.js setup to advise on that; it could just be resizing the view to fit a portrait orientation.

1 Like
3

Thank you Jonathan. It works!

1 Like
4

I licensed the commercial version of turn.js to get the hardcover options and the other goodies. I had trouble with the Hype integration examples until I found the reason you can't use the turnjs css classes directly in hype groups is that the turnjs system automagically embeds your group divs in another div. But I found an easy solution. In your javascript that activates turnjs for your book:
//something like...
$("#flipbook").turn({
width: 400,
height: 259,
elevation: 50,
autoCenter: true
});

Just use the following to promote the turnjs classes in your hype elements up to their parent element provided by turnjs:

$('.hard').parent().addClass('hard')

$("#flipbook").turn({
width: 400,
height: 259,
elevation: 50,
And it all works.

Thanks to all for their fantastic support in these forums, and to Tumult for a fantastic product!

3 Likes