blasten / turn.js

The page flip effect for HTML5

Get the turn.js 4th release on turnjs.com

What's new in turn.js 4th release?

• Added option autoCenter

• Added option zoom

• Added property animating

• Added property zoom

• Added method center

• Added method destroy

• Added method is

• Added method zoom

• Added event missing

• Added event zooming

• Added class .even

• Added class .fixed

• Added class .hard

• Added class .odd

• Added class .own-size

• Added class .sheet

• Added the ignore attribute

• New turn.html4.js

• New scissors.js

• Changed the class .turn-page to .page

• Improved the animation frame generator with requestAnimationFrame

• Improved the animation speed for hard pages with CSS3 transitions

• Redesigned the event sequence to listen to only three events

• Fixed issue #79

• Fixed issue #91

• Fixed issue about the event order turning + turned

• Fixed issue about appending pages in wrong locations

Available only on turnjs.com

---

turn.js 3rd release

Make a flip book with HTML5

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.

What's new?

• New addPage for creating pages dynamically.

• New display for single and double pages.

• Gradients for non-webkit browsers.

Usage

CSS code:

#magazine{
	width: 800px;
	height: 400px;
}
#magazine .turn-page{
	background-color:#ccc;
}

HTML code:

<div id="magazine">
	<div><span class="text">Page 1</span></div>
	<div><span class="text">Page 2</span></div>
	<div><span class="text">Page 3</span></div>
</div>

JavaScript code:

$('#magazine').turn({gradients: true, acceleration: true});

Requirements

jQuery 1.7 or later

Browser support

• Chrome 12, Safari 5, Firefox 10, IE 9

License

Released under a non-commercial BSD license

Full documentation

---

turnjs.com

turn.js's Issues

1st page is removed after turn complete

It looks as though page 1 is removed from the dom after the 2nd and 3rd pages are displayed. I couldn't work out what portion of code was responsible, but the node looks to be removed when doing something with backpages.

I'm using background images on divs.

show/hide elements w/page turn

hi everyone,

as i've said before, i am a js novice. i'd like to hide an element on my page and show it when the book is opened/page is turned. i've been able to hide and show upon clicking a different element, but just trying to figure out how to tie it to a page turn? can anyone help?

thanks much!

Contents Page

Hello

Was just wondering how you would go about adding a contents page to the "book"?

Thanks

how to add or remove a page dynamically?

I tested to add a div in the div with class of magazine, but can't see the added div.

Not Working On Android

I see you mentioned it works on mobile platforms, but the demo does not seem to be working on my Android phone:

Samsung Nexus S - Android v 2.3.6

Other than that, Nice work!

Vertical Paging?

Hi, I suppose this is more of a feature request.

I was wondering if you could support paging to happen in a vertical fashion?, i.e. the page can scroll in the landscape position (similar to some photo albums).

Thanks,

Adam

IE8 support

Great software, I'm looking forward to IE9 support (this month?) - any chance of IE8 support, for Windows XP users?

Your Project

Would be cool to see what other peoples do with turn.js.

• http://demo.tutorialzine.com/2012/03/instagram-magazine-php-jquery/
• http://www.flashjunior.ch/archiv/bop/nacht/
• http://amarumusic.net/

Width of 721px in Chrome

In Chrome (i haven't tried with other), with the example, I use a width of 400px per page and the third page have 721px. Perhaps I don't know use correctly, but I have put the example.

Sorry about my english.

creating bookmarks & pulling page # info

I am trying to create a website that using turn.js and allows for users to create bookmarks. I am having trouble implementing the alert($('selector').turn('page')); to have it display on screen the current page # the reader is on. When I try to do something like

document.write($('selector').turn('page'));

it break the bookflipping aspect and either shows nothing or shows the text in standard paragraph form.

Where I am supposed to add the alert($('selector').turn('page')); code to display the current page #? Is there a way to grab the page # from the actual CSS when I turn "pagenumbers = true" ?

Please help!

IE9 - corners hard to see

Hi, good work on the new release.

I've noticed that if you hover over a page corner in IE9, and the next page is the same colour as the one you are on, you cannot see the corner fold down (basically it's the same colour as the background it's going over). I've got a quick workaround for now where I add a border to the page, but it's a bit hacky. Do you have any other recommendations?

Here's what I'm using at the moment, it's crude, but makes it bearable:

book .odd {

border: 1px solid #ccc;
border-width: 1px 0 1px 1px;

}

book .even{

border: 1px solid #ccc;
border-width: 1px 1px 1px 0;

}

What am I doing wrong? Doesn't work in Internet Explorer

I'm using the example code and can't figure out why turn.js is not working in ie9. Here's a link http://reyochoa.info/turnjs/demos/magazine/

Thanks in advance
Rey

In IE8 turning does not go smoothly;

how to solve?

Start with book opened

It would be nice to have an option to start book opened, i.e. http://wp.saryx.sk/ocelove-konstrukcie

For now I hacked this by putting line:
if(opts.next == 1) return null;
after line 1271 and starting book on page 2 instead 1. Of course blank first page has to be created as well.

Resizing the book

Hi, I am trying to force the book to resize when I resize the browser window. I have tried changing the width and height of the book container through jQuery. It didn't worked so I tried to change the dimensions of each page but it messes up the flip animation, any hint would be great ;) Also I am not sure how the turn('resize') works.. some more inside would be cool ;)

Support IE with canvas polyfill

http://html5please.us/#canv

On the browser of Android

On the browser of Android, does not work properly and see the addresses below.
How to deal with or there will be something?

http://tomayuri.s3.coreserver.jp/newturn/

Custom links

Is it possible to get custom links outside the flipping area (menu links for example) to flip to specific page? I didn't find anything for this in the references.

Thanks in advance!

Raido

turn.js not working.

I have the source code, copied directly as you have in the example. However, I changed the javascript sources to my own source. I don't know why this isn't working It just shows Test, Test, Test, Test all under each other... Could you help me?

a demo on iphone by using turn.js

this a demo on iphone by using turn.js.http://zreader.sinaapp.com/beijixing/demo/reader.html

Prevent pageturn effect from blocking hovers/clicks

I've recently started working on a flipbook for a client, and after some research settled on turn.js because it simply is the best pageflip javascript library you can find on the web at the moment (in my opinion).

While working on the project, I noticed that the pageturn effect blocks any hover-effects or clicks for buttons or links. This problem can be easily reproduced by simply putting a link or button right below a page in the flipbook. If you then hover over the corner of a page, the pageturn effect kicks in (by "folding" the corner of the page). When this happens, the "invisible" div (that is rotated 90 degrees) used for the effect covers up the link or button below the page, making it impossible to click on it in any browser other than Internet Explorer.

The fix for this is very simple: you just need to add "pointer-events: none" to the style of that "invisible" div. This will effectively allow clicks and hover-events to pass through the div that is responsible for the pageturn effect. This works in all modern browsers (Firefox 3.6+, Safari 4+ and Chrome) except for Opera.

original turn.js v0.11 code (around line 98)

divAtt = function(top, left, zindex, overf) {
return {'css': {
position: 'absolute',
top: top,
left: left,
overflow: overf || 'hidden',
'z-index': zindex || 'auto'
}
};
},

fixed code

divAtt = function(top, left, zindex, overf) {
return {'css': {
position: 'absolute',
top: top,
left: left,
overflow: overf || 'hidden',
'z-index': zindex || 'auto',
'pointer-events': 'none' //fix to let click/hover events go through the layer
}
};
},

Trigger for the start and the end of the slide

Great script!
The hardware acceleration works wonderful on the iOS.
Maybe others will find useful a trigger for the start and the end of the slide/book/whatever to disable/hide the previous and next buttons if used.
The single page flip is great new future and can't wait for the new version.
Thanks

only flips pages to left

Im using chrome,
it works kinda but,
i can only flip through the pages backwards,
not forward...
im using turn.min.jsp

and

example
JavaScript code:

$('#magazine').turn({width:800, height: 400, page: 1, shadows: true, acceleration: true});

Support double page divs?

I have a bunch of divs that are currently more like “slides”. That is, each div is a full double page width instead of a single page width. Is there a way to configure the plugin so that it will work with divs that are meant to represent the double page?

<div id='magazine'>
    <div> Page 1 and 2 </div>
    <div> Page 3 and 4 </div>
    <div> Page 5 and 6 </div>
</div>

This is a great plugin thanks for releasing it!

Page shakes when corners hovered

Has anyone else encountered this?

I'm using turnjs in a personal project and I've found so far that in FF 11 & IE 9 the page of a hovered corner "shakes" until the corner animation is completed. Basically the shaking is about 1 pixel back and forth to the left or up and down. IE shakes significantly less than FF but it still does.

Any solutions? I love this plugin and wanna keep using it.

Disable page turning hook?

Somthing like ('#magazine').noturn() to remove turning ability would be nice.
This helps with modal interfaces (I am also exploring zoom options with and without transform and disabling page turning while zoomed makes sense in my app).

nav & arrows

hi there,

how do i add the nav functionality like you have on your demo site? also the forward and back buttons on either side of the container? i'm not well versed in javascript... i assume you can set up a click event but i'm wondering if you can help me with the syntax?

thank you!

online example and files

I forked you and was just wondering why the example url doesn't match the files. It' not a big deal I was just wondering.

when do you expect new version?

• which features will be in?

Single page flip

Hey there,
Is there single page flip available in the plugin just like the jflip plugin?

Thank you
Sripad

Show legend

do you have plans to make a legend like a regular flippingbook; like http://flippingbook.com/demo/

• pagination
• go to certain page
• search
• show thumbnails
• etc.

On what time frame would this be possible?

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Multiple books on a single webpage

Hello,

I have utilized your code found for turn.js and have a small question. Using JQuery UI tabs, I have a book on each tab on a single webpage. The issue comes when I load the page (which loads tab1), and I flip through book 1 on tab 1 from back to front, it starts to flip the other books on the other tabs forward. Is there a small programmatic change I could make to have the flipping of book 1 "forward" AND "backwards", NOT alter the page view of any other book?

TIA,
Mathias9999

Ability to add/remove pages dynamically

It would be great to add and remove pages dynamically after an instance is created.

set rigidity effect page

Is possible set rigidity effect page?

problem positioning on top of individual picture

Hi,
Great work,

I have a strange problem positioning 'absolute' in the following code :
< div style="background-image:url(pages/11.jpg);">
< div id="11" >
< a href="#" target="_blank">#######
< /div>
< /div>

it somehow doesn't get it
outside the magazine its working fine.

it might be something with the script ? any ideas ?
thnx
//\ark

turnjs.com demo left hand page transition is off.

In the demo the left side page is appearing approximately 100px higher than the right side page during the transition.

See the image: http://pi.rlemon.com/image/1d28cd835a4163312d100e54b69a65fc.png

This appears on:
Google Chrome 18.0.1025.142 (Official Build 129054)
OS Linux
WebKit 535.19 (@111933)
as well as
FireFox 11.0
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:11.0) Gecko/20100101 Firefox/11.0

Non-WebKit browsers don't get gradients.

Non-WebKit browsers don't get to see the gradient-based page curve effect when flipping pages.

https://github.com/blasten/turn.js/blob/master/turn.js#L899 and https://github.com/blasten/turn.js/blob/master/turn.js#L907 are most likely the culprit: there's only -webkit- prefixes there. It would be nice to add -ms-, -o-, -moz- as well.

Turning pages with images - v3

The pages within my ebook are just images and when I first load the site and come to turn the page, the page after doesn't seem to have rendered the image, so on the page turn effect there is nothing on the next page until I finish turning and the image is loaded.
Although once I've flipped through the whole book and go back through, everything is rendered and works correctly.

If I use your previous version everything works great! You've done some excellent work and I hope this issue helps you improve future versions.

I probably should add I'm using jQuery to append the images into the div's so they are actually empty at first. I'll go away and try adding them using your new addPage method to see if that fixes it though.

Does not work with transform:scale(x)

Hi, turn.js is very impressive! I would love to having it working on my magazine page.
My magazine page uses CSS transform:scale(x) property in order to scale up/down all background images/text, yet maintaining relative positions. However, this does not seem to work well with turn.js

If i scale up/down the entire container, the 'turn corners' of the pages will be off position.

Would you kindly advise would I should do? Thanks!

any way to display only one page?

hi emmanuel,

is there any way to display only one page at a time, rather than the regular two-page display? i didn't see anything listed in the options to indicate that, but maybe i missed something. thank you! p.s. i love your plugin :)

set borders to pages

how to set borders to the pages
especially for first and last page.....

slowing down page turn effect

hi blasten,

can we change the timing of the page turn? i'm interested in slowing it down very slightly. the minified script is so jumbled that i couldn't figure out where the property is. would you consider making the timing a customizable option?

thank you so much for all your help, and again for your lovely plugin :)

Trying to implement the hashTag system

Hello,
I'm looking to use turn.js for a famous magazine in France.
But I'm struggling with the hash tag system.
I use :
window.pages = ['1', '2', '3', '4', '5', '6', '7', '8' .....];
window.bind('hashchange', function() {

        var page = checkHash();
        $('#magazine').turn('page', page);

    })

And I tought all I needed to do was :

div id="magazine"
img src="pages/Livre+SP79light-1.jpg" page="1"
img src="pages/Livre+SP79light-2.jpg" page="2"
img src="pages/Livre+SP79light-3.jpg" page="3"
img src="pages/Livre+SP79light-4.jpg" page="4"
img src="pages/Livre+SP79light-5.jpg" page="5"
img src="pages/Livre+SP79light-6.jpg" page="6"
img src="pages/Livre+SP79light-7.jpg" page="7"
img src="pages/Livre+SP79light-8.jpg" page="8"
div

But it's not working could you give me a hand ?

By the way your plugin is amazing,
Best regard.

Book closed, snap to center

Hello on your demo at http://www.turnjs.com/ your book snaps into place when its closed how have you done this? Also you have used arrows that appear to the left and right how have you done this?

Thanks

Can a called turn mimic a corner-peel animation?

Is it possible to have a called page turn (from a button or a swipe event) be set to do a default corner-peel type animation rather than sliding over as a straight horizontal wipe?
Thanks!

Can the next version be submitted this week?

Hi, blasten.

it seems it's the last day of this week.

Additionally, I think you should refer to the componentone's book widget. The demo is http://demo.componentone.com/Silverlight/ControlExplorer/#Book/See%20it%20in%20action

How to center the book on page load and move it when a page is opened?

I noticed on the turn.js site they are using something else, an easing jquery plugin, to move the book to the right when a page is opened. I was wondering if there are any tutorials for this? Right now my book is always to the right and I would love to center it, and slide it to the right upon open, pretty much just like the turn.js website. It looks like i almost need to align my whole site to the left and slide the divs to the right, but this is proving confusing for me. any help is appreciated.

Is the single page mode cool?

Nobody talk about the new single page mode, and no demos about it.

Is the flip effect in the single page mode cool?

Button inside a page doesn't work with Rc3

Greetings Blasten.

I already download the last Rc (3), i did replace it on my book but it raised an issue.
Inside a page I have a button which onload is attached to its click event through jquery just like this:

$('.imageViewerSwitch').click(function(e) {...});

The fact is that the button with the rc3 doesn't works, the click event is not fired anymore. When I reverse the version to Rc2 it works fine.

Thanks for your help.