Turn.js Documentation - User contributions [en]

Browser Support

2012-11-26T15:39:29Z

Emmanuel:

Turn.js works on most browsers and devices.

==Browsers with HTML5 capabilities==
* Safari 5
* Chrome 16
* Firefox 10
* IE 10
* IE 9
* Opera

==Browsers with only HTML4 capabilities==
* IE 8

==Mobile devices==
* Safari for iOS
* Chrome for Android
* Android's default browser

''Note: The best performance is in Safari 5.1.x or above for desktop.''

Browser Support

2012-11-26T15:37:27Z

Emmanuel: /* Browsers with HTML5 capabilities */

Turn.js works on most browser and devices.

==Browsers with HTML5 capabilities==
* Safari 5
* Chrome 16
* Firefox 10
* IE 10
* IE 9
* Opera

==Browsers with only HTML4 capabilities==
* IE 8

==Mobile devices==
* Safari for iOS
* Chrome for Android
* Android's default browser

''Note: The best performance is in Safari 5.1.x or above for desktop.''

Browser Support

2012-11-26T15:37:12Z

Emmanuel: /* Browsers with only HTML4 capabilities */

Turn.js works on most browser and devices.

==Browsers with HTML5 capabilities==
* Safari 5
* Chrome 16
* Firefox 10
* IE 9
* Opera

==Browsers with only HTML4 capabilities==
* IE 8

==Mobile devices==
* Safari for iOS
* Chrome for Android
* Android's default browser

''Note: The best performance is in Safari 5.1.x or above for desktop.''

Browser Support

2012-11-26T15:36:57Z

Emmanuel: /* Mobile devices */

Turn.js works on most browser and devices.

==Browsers with HTML5 capabilities==
* Safari 5
* Chrome 16
* Firefox 10
* IE 9
* Opera

==Browsers with only HTML4 capabilities==
* IE 8, IE 7

==Mobile devices==
* Safari for iOS
* Chrome for Android
* Android's default browser

''Note: The best performance is in Safari 5.1.x or above for desktop.''

Browser Support

2012-11-26T15:36:38Z

Emmanuel: /* Mobile devices */

Turn.js works on most browser and devices.

==Browsers with HTML5 capabilities==
* Safari 5
* Chrome 16
* Firefox 10
* IE 9
* Opera

==Browsers with only HTML4 capabilities==
* IE 8, IE 7

==Mobile devices==
* Safari for iOS devices
* Chrome for Android devices
* Android's default browser

''Note: The best performance is in Safari 5.1.x or above for desktop.''

Class: .shadow

2012-11-26T06:46:05Z

Emmanuel:

This class describes the visible area of the flipbook. That is, because it surrounds the flipbook, it’s suitable for a shadow around the flipbook. For example:

<pre class="css">
#flipbook .shadow,
#flipbook.shadow{
-webkit-box-shadow: 0 4px 10px #666;
-moz-box-shadow: 0 4px 10px #666;
-ms-box-shadow: 0 4px 10px #666;
-o-box-shadow: 0 4px 10px #666;
box-shadow: 0 4px 10px #666;
}
</pre>

'''Note:''' When using display:single, the rule <tt>overflow:hidden</tt> is added to the flipbook element, so that the <tt>.shadow</tt> class will be added to the flipbook.

<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>

Class: .p

2012-11-26T06:45:41Z

Emmanuel:

This class describes a particular page. For instance, .p1 refers to the first page, .p2 to the second page and so on. You can change the number of a page no matter its order in the HTML:

<pre class="xml">
<div id="flipbook">
<div class="p100">Page 100</div>
<div class="p1">Page 1</div>
</div>
</pre>
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>

You can also use it as a jQuery selector:

<pre class="javascript">
$("#flipbook .p100").doSomething();
</pre>

Class: .p

2012-11-26T06:45:35Z

Emmanuel:

Views

2012-11-26T06:44:55Z

Emmanuel:

A view contains the pages that are visible. Technically, it's an array of two values if the display is set to double page or one value if the display is single.

==Examples of views==

* if the display is set to double, a flipbook of 8 pages would have the following views
<tt>[0,1]</tt>
<tt>[2,3]</tt>
<tt>[4,5]</tt>
<tt>[6,7]</tt>
<tt>[8, 0]</tt>

* if the display is set to single, a 4 pages long flipbook would have the following views
<tt>[1]</tt>
<tt>[2]</tt>
<tt>[3]</tt>
<tt>[4]</tt>

==See also==
* [[Property: view]]

<yambe:breadcrumb>Main Page</yambe:breadcrumb>

Views

2012-11-26T06:44:34Z

Emmanuel:

A view contains the pages that are visible. Technically, it's a simple array of two values if the display is set to double page or one value if the display is single.

==Examples of views==

* if the display is set to double, a flipbook of 8 pages would have the following views
<tt>[0,1]</tt>
<tt>[2,3]</tt>
<tt>[4,5]</tt>
<tt>[6,7]</tt>
<tt>[8, 0]</tt>

* if the display is set to single, a 4 pages long flipbook would have the following views
<tt>[1]</tt>
<tt>[2]</tt>
<tt>[3]</tt>
<tt>[4]</tt>

==See also==
* [[Property: view]]

<yambe:breadcrumb>Main Page</yambe:breadcrumb>

Event: end

2012-11-26T06:39:28Z

Emmanuel:

This event is triggered when the transition of a page stops.

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| Event Object
|-
| pageObject
| Object
| [[Page Object|The page object]]
|-
| pageTurned
| Boolean
| True if the page was turned
|}

Example:
<pre class="javascript">

$("#flipbook").bind("end", function(event, pageObject, turned){
alert("turn.end:" +pageObject.page);
});
</pre>

== Event Sequence ==
# [[Event: start| Start]]
# [[Event: turning| Turning]]
# [[Event: turned| Turned]]
# [[Event: end| End]]

<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Event: start

2012-11-26T06:39:20Z

Emmanuel:

This event is triggered when an animation of a page starts. In other words, before showing a folded page.

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| Event Object
|-
| pageObject
| Object
| [[Page Object|The page object]]
|-
| corner
| Number
| [[Corners|Corner type]]
|}

{| class="wikitable"
|-
! Default action
|-
| To show the folded page
|}

For example, if you want to prevent the animation to start when using the corners <tt>tl</tt> and <tt>tr</tt>, you can use the start event and prevent its default action:

<pre class="javascript">
$("#flipbook").bind("start", function(event, pageObject, corner) {
if (corner=="tl" || corner=="tr") {
event.preventDefault();
}
});
</pre>
== Event Sequence ==
# [[Event: start| Start]]
# [[Event: turning| Turning]]
# [[Event: turned| Turned]]
# [[Event: end| End]]

== See also ==
[[Corners]]
<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Event: turning

2012-11-26T06:39:08Z

Emmanuel:

This event is triggered before turning the page.

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| Event Object
|-
| page
| Number
| The page number
|-
| view
| Array
| [[Views|The new view]]
|}

{| class="wikitable"
|-
! Default action
|-
| To turn the page
|}

For example:
<pre class="javascript">
$("#flipbook").bind("turning", function(event, page, view) {
alert("Turning the page to: "+page);
});
</pre>

You could prevent to turn to the page 1.
<pre class="javascript">
$("#flipbook").bind("turning", function(event, page, view) {
if (page==1) {
event.preventDefault();
}
});
</pre>

== Event Sequence ==
# [[Event: start| Start]]
# [[Event: turning| Turning]]
# [[Event: turned| Turned]]
# [[Event: end| End]]
<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Event: turned

2012-11-26T06:38:52Z

Emmanuel:

This event is triggered after turning the page.

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| Event Object
|-
| page
| Number
| The new page number
|-
| view
| Array
| [[Views|The new view]]
|}

For example:
<pre class="javascript">
$("#flipbook").bind("turned", function(event, page, view) {
alert("Page: "+page);
});
</pre>

== Event Sequence ==
# [[Event: start| Start]]
# [[Event: turning| Turning]]
# [[Event: turned| Turned]]
# [[Event: end| End]]
<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Event: missing

2012-11-26T06:38:36Z

Emmanuel:

This event is triggered when some pages are required in the [[Range|current range]].

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| Event Object
|-
| pages
| Array
| Pages having to be added
|}

Example:
<pre class="javascript">
$("#flipbook").bind("missing", function(event, pages) {
for (var i = 0; i < pages.length; i++) {
$(this).turn("addPage", $("<div />"), pages[i]);
}
});
</pre>
== See also==
[[Method: addPage|Method: addPage]]

<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Event: zooming

2012-11-26T06:38:23Z

Emmanuel:

This event is triggered when the zoom is changed.

{| class="wikitable"
|-
! scope="col"| Argument
! scope="col"| Type
! scope="col"| Description
|-
| event
| Object
| The event object
|-
| newZoomValue
| Number
| The new zoom factor
|-
| currentZoomValue
| Number
| The current zoom factor
|}

{| class="wikitable"
|-
! Default action
|-
| To change the zoom
|}

For example:
<pre class="javascript">
$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) {
alert("New zoom: "+currentZoomValue);
});
</pre>

<yambe:breadcrumb>Turn Events</yambe:breadcrumb>

Views

2012-11-26T06:37:55Z

Emmanuel:

A view contains the pages that are visible. Technically, it's a simple array of two values if the display is set to double page or one value if the display is single.

==See also==
* [[Property: view]]

<yambe:breadcrumb>Main Page</yambe:breadcrumb>

Views

2012-11-26T06:36:36Z

Emmanuel:

A view contains the pages that are visible. Technically, it's a simple array of two values if the display is set to double page or one value if the display is single.

<yambe:breadcrumb>Main Page</yambe:breadcrumb>

Property: options

2012-11-26T06:29:43Z

Emmanuel:

Get the options used when creating the flipbook.

Example:

<pre class="javascript">
var duration = $("#flipbook").turn("options").duration;

alert("The duration of the transition is "+duration);
</pre>

<yambe:breadcrumb>Turn Properties</yambe:breadcrumb>

Property: animating

2012-11-26T06:27:47Z

Emmanuel:

Returns true when animating a page, in other words when a folded page is visible.

Example:

<pre class="javascript">
function isAnimating() {
if ($("#flipbook").turn("animating")) {
alert('Animating a page!');
}
}
</pre>
<yambe:breadcrumb>Turn Properties</yambe:breadcrumb>

Option: turnCorners

2012-11-26T06:27:24Z

Emmanuel: /* Values */

Sets the [[corners]] to be used when turning the page from methods like [[Method: page|page]], [[Method: next|next]] or [[Method: previous|previous]].

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| String
| bl,br
|}

===Format===
{left-corner},{right-corner}

===Possible values===

<tt>bl,br</tt> or <tt>tl,tr</tt> or <tt>bl,tr</tt>

===Example===
<pre class="javascript">
var way = 1;

setInterval(function() {
if (way==1) {
$("#flipbook").turn("next");

if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {
way = 2;
$("#flipbook").turn("options", {turnCorners: "tl,tr"});
}
} else {
$("#flipbook").turn("previous");

if ($("#flipbook").turn("page")==1) {
way = 1;
$("#flipbook").turn("options", {turnCorners: "bl,br"});
}
}
}, 1000);

</pre>

[http://jsfiddle.net/blasten/A9a7E/854/ See running]

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Option: turnCorners

2012-11-26T06:27:00Z

Emmanuel:

Sets the [[corners]] to be used when turning the page from methods like [[Method: page|page]], [[Method: next|next]] or [[Method: previous|previous]].

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| String
| bl,br
|}

===Format===
{left-corner},{right-corner}

===Values===

<tt>bl,br</tt> or <tt>tl,tr</tt> or <tt>bl,tr</tt>

===Example===
<pre class="javascript">
var way = 1;

setInterval(function() {
if (way==1) {
$("#flipbook").turn("next");

if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {
way = 2;
$("#flipbook").turn("options", {turnCorners: "tl,tr"});
}
} else {
$("#flipbook").turn("previous");

if ($("#flipbook").turn("page")==1) {
way = 1;
$("#flipbook").turn("options", {turnCorners: "bl,br"});
}
}
}, 1000);

</pre>

[http://jsfiddle.net/blasten/A9a7E/854/ See running]

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Option: direction

2012-11-26T06:26:09Z

Emmanuel:

Specifies the directionality of the flipbook left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl).

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| String
| ltr
|}

== Examples ==

1. Specifying the direction as an option

<pre class="javascript">
$("#flipbook").turn({direction: "rtl"});
</pre>

2. Using the HTML <tt>dir</tt> attribute.

<pre class="xml">
<div id="flipbook" dir="rtl">

</div>
</pre>

3. Using the CSS <tt>direction</tt> rule

<pre class="css">
#flipbook {
direction:rtl;
}
</pre>

==See also==
* [[Property: direction]]
* [[Method: direction]]
<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Option: autoCenter

2012-11-26T06:25:53Z

Emmanuel:

Centers the flipbook depending on how many pages are visible. The <tt>autoCenter</tt> option changes the CSS <tt>margin-left</tt> property of the flipbook.

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| Boolean
| false
|}

==Adding animation==
It's just as simple as adding a transition to the <tt>margin-left</tt> property.
<pre class="css">
#flipbook{
-webkit-transition:margin-left 0.2s ease-in-out;
-moz-transition:margin-left 0.2s ease-in-out;
-o-transition:margin-left 0.2s ease-in-out;
-ms-transition:margin-left 0.2s ease-in-out;
transition:margin-left 0.2s ease-in-out;
}
</pre>

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Method: options

2012-11-26T06:25:18Z

Emmanuel:

Changes the value of an option.

{| class="wikitable"
|-
! scope="col"| Parameter
! scope="col"| Type
! scope="col"| Description
! scope="col"| Default Value
|-
| options
| Object
| Options to change
| You must specify this parameter

|}

Example:
<pre class="javascript">
// Another way to change the display and the duration of the effect

$("#flipbook").turn("options", {display: "single", duration: 1000});
</pre>

==See also==
[[Turn Options|List of options that can be changed through this method]]

<yambe:breadcrumb>Turn Methods</yambe:breadcrumb>

Method: options

2012-11-26T06:23:56Z

Emmanuel: Created page with "Changes the value of an option. {| class="wikitable" |- ! scope="col"| Parameter ! scope="col"| Type ! scope="col"| Description ! scope="col"| Default Value |- | options | Ob..."

Main Page

2012-11-26T06:20:57Z

Emmanuel: /* Let's take a look at how it works */

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

==Let's take a look at how it works==

1. We create the HTML
<pre class="xml">
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</pre>
2. Then the JavaScript part
<pre class="javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</pre>

[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]

== Turn.js 4th release==
Turn.js 4th release has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4-based browsers.

==Flipbook==

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

:{| class="simple"
! scope="col" width="225" | [[Turn Options|Options]]
! scope="col" width="225" | [[Turn Properties|Properties]]
! scope="col" width="225" | [[Turn Methods|Methods]]
! scope="col" width="225" | [[Turn Events|Events]]
! scope="col" width="225" | [[Turn CSS|CSS Classes]]

|-
| valign="top" |
* [[Option: acceleration|acceleration]]
* [[Option: autoCenter|autoCenter]]
* [[Option: direction|direction]]
* [[Option: display|display]]
* [[Option: duration|duration]]
* [[Option: gradients|gradients]]
* [[Option: height|height]]
* [[Option: elevation|elevation]]
* [[Option: page|page]]
* [[Option: pages|pages]]
* [[Option: turnCorners|turnCorners]]
* [[Option: when|when]]
* [[Option: width|width]]
| valign="top" |

* [[Property: animating|animating]]
* [[Property: direction|direction]]
* [[Property: display|display]]
* [[Property: disabled|disabled]]
* [[Property: page|page]]
* [[Property: pages|pages]]
* [[Property: size|size]]
* [[Property: options|options]]
* [[Property: view|view]]
* [[Property: zoom|zoom]]

| valign="top" |

* [[Method: addPage|addPage]]
* [[Method: center|center]]
* [[Method: destroy|destroy]]
* [[Method: direction|direction]]
* [[Method: display|display]]
* [[Method: disable|disable]]
* [[Method: hasPage|hasPage]]
* [[Method: next|next]]
* [[Method: is|is]]
* [[Method: options|options]]
* [[Method: page|page]]
* [[Method: pages|pages]]
* [[Method: peel|peel]]
* [[Method: previous|previous]]
* [[Method: range|range]]
* [[Method: removePage|removePage]]
* [[Method: resize|resize]]
* [[Method: size|size]]
* [[Method: stop|stop]]
* [[Method: version|version]]
* [[Method: zoom|zoom]]

| valign="top" |

* [[Event: end|end]]
* [[Event: first|first]]
* [[Event: last|last]]
* [[Event: missing|missing]]
* [[Event: start|start]]
* [[Event: turning|turning]]
* [[Event: turned|turned]]
* [[Event: zooming|zooming]]

| valign="top" |
* [[Class: .even|.even]]
* [[Class: .fixed|.fixed]]
* [[Class: .hard|.hard]]
* [[Class: .odd|.odd]]
* [[Class: .own-size|.own-size]]
* [[Class: .page|.page]]
* [[Class: .p|.p[0-9]+]]
* [[Class: .shadow|.shadow]]
* [[Class: .sheet|.sheet]]

|}

==Zoom Viewport==

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about [[How to add zoom to turn.js|how to add zoom to turn.js]].

:{| class="simple" width="600"
! scope="col" width="225" | [[Zoom Options | Options]]
! scope="col" width="225" | [[Zoom Properties | Properties]]
! scope="col" width="225" | [[Zoom Methods | Methods]]
! scope="col" width="225" | [[Zoom Events | Events]]

|-
| valign="top" |
* [[Option: easeFunction|easeFunction]]
* [[Zoom Option: duration|duration]]
* [[Option: max|max]]
* [[Option: flipbook|flipbook]]
* [[Zoom Option: when|when]]

| valign="top" |

* [[Property: value|value]]

| valign="top" |

* [[Method: zoomIn|zoomIn]]
* [[Method: zoomOut|zoomOut]]

| valign="top" |
* [[Event: change|change]]
* [[Event: doubleTap|doubleTap]]
* [[Event: resize|resize]]
* [[Event: swipeLeft|swipeLeft]]
* [[Event: swipeRight|swipeRight]]
* [[Event: tap|tap]]
* [[Event: zoomIn|zoomIn]]
* [[Event: zoomOut|zoomOut]]
|}

==Scissors==

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

[[Scissor|Read more about Scissor]]
__NOTOC__

Method: hasPage

2012-11-26T06:20:12Z

Emmanuel:

Returns true if the flipbook has a page.

{| class="wikitable"
|-
! scope="col"| Parameter
! scope="col"| Type
! scope="col"| Description
! scope="col"| Default Value
|-
| pageNumber
| Number
| Page Number
| You must specify this parameter

|}

Example:
<pre class="javascript">
function checkPage(page) {
if ($("#flipbook").turn("hasPage", page)) {
alert("Page "+page+" is already in the flipbook");
}
}

// Check if page 1 is in the flipbook

checkPage(1);

</pre>

<yambe:breadcrumb>Turn Methods</yambe:breadcrumb>

Main Page

2012-11-26T06:19:43Z

Emmanuel: /* Flipbook */

Changelog

2012-11-26T06:18:48Z

Emmanuel:

===Turn.js 4.1.0 - Nov 26, 2012===
* Added support to the Android's default browser
* Fixed the hard page effect in IE9
* Fixed issue [https://github.com/blasten/turn.js/issues/220 #220]

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the <tt>start</tt> event now returns <tt>null</tt> when using the methods <tt>next</tt>, <tt>previous</tt> and <tt>page</tt>
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method <tt>peel</tt>

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Renamed the class <tt>.turn-page</tt> to <tt>.page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Option: turnCorners

2012-09-11T05:32:53Z

Emmanuel: /* See also */

Sets the [[corners]] to be used when turning the page from methods like [[Method: page|page]], [[Method: next|next]] or [[Method: previous|previous]].

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| String
| bl,br
|}

===Format===
{left-corner},{right-corner}

===Values===

<tt>bl,br</tt> or <tt>tl,tr</tt> or <tt>bl,tr</tt>

===Example===
<pre class="javascript">
var way = 1;

setInterval(function() {

if (way==1) {

$("#flipbook").turn("next");

if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {
way = 2;
$("#flipbook").turn("options", {turnCorners: "tl,tr"});
}

} else {

$("#flipbook").turn("previous");

if ($("#flipbook").turn("page")==1) {
way = 1;
$("#flipbook").turn("options", {turnCorners: "bl,br"});
}

}

}, 1000);

</pre>

[http://jsfiddle.net/blasten/A9a7E/854/ See running]

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Option: turnCorners

2012-09-11T05:32:45Z

Emmanuel:

Sets the [[corners]] to be used when turning the page from methods like [[Method: page|page]], [[Method: next|next]] or [[Method: previous|previous]].

{| class="wikitable"
|-
! scope="row" | Type
! scope="row" | Default value
|-
| String
| bl,br
|}

===Format===
{left-corner},{right-corner}

===Values===

<tt>bl,br</tt> or <tt>tl,tr</tt> or <tt>bl,tr</tt>

===Example===
<pre class="javascript">
var way = 1;

setInterval(function() {

if (way==1) {

$("#flipbook").turn("next");

if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {
way = 2;
$("#flipbook").turn("options", {turnCorners: "tl,tr"});
}

} else {

$("#flipbook").turn("previous");

if ($("#flipbook").turn("page")==1) {
way = 1;
$("#flipbook").turn("options", {turnCorners: "bl,br"});
}

}

}, 1000);

</pre>

[http://jsfiddle.net/blasten/A9a7E/854/ See running]

===See also===
[[Corners]]

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Main Page

2012-09-07T15:55:43Z

Emmanuel:

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

==Let's take a look at how it works==

1. We create the HTML
<pre class="xml">
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</pre>
2. Then the JavaScript part
<pre class="javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</pre>

[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]

== Turn.js 4th release==
Turn.js 4th release has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4-based browsers.

==Flipbook==

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

:{| class="simple"
! scope="col" width="225" | [[Turn Options|Options]]
! scope="col" width="225" | [[Turn Properties|Properties]]
! scope="col" width="225" | [[Turn Methods|Methods]]
! scope="col" width="225" | [[Turn Events|Events]]
! scope="col" width="225" | [[Turn CSS|CSS Classes]]

|-
| valign="top" |
* [[Option: acceleration|acceleration]]
* [[Option: autoCenter|autoCenter]]
* [[Option: direction|direction]]
* [[Option: display|display]]
* [[Option: duration|duration]]
* [[Option: gradients|gradients]]
* [[Option: height|height]]
* [[Option: elevation|elevation]]
* [[Option: page|page]]
* [[Option: pages|pages]]
* [[Option: turnCorners|turnCorners]]
* [[Option: when|when]]
* [[Option: width|width]]
| valign="top" |

* [[Property: animating|animating]]
* [[Property: direction|direction]]
* [[Property: display|display]]
* [[Property: disabled|disabled]]
* [[Property: page|page]]
* [[Property: pages|pages]]
* [[Property: size|size]]
* [[Property: options|options]]
* [[Property: view|view]]
* [[Property: zoom|zoom]]

| valign="top" |

* [[Method: addPage|addPage]]
* [[Method: center|center]]
* [[Method: destroy|destroy]]
* [[Method: direction|direction]]
* [[Method: display|display]]
* [[Method: disable|disable]]
* [[Method: hasPage|hasPage]]
* [[Method: next|next]]
* [[Method: is|is]]
* [[Method: page|page]]
* [[Method: pages|pages]]
* [[Method: peel|peel]]
* [[Method: previous|previous]]
* [[Method: range|range]]
* [[Method: removePage|removePage]]
* [[Method: resize|resize]]
* [[Method: size|size]]
* [[Method: stop|stop]]
* [[Method: version|version]]
* [[Method: zoom|zoom]]

| valign="top" |

* [[Event: end|end]]
* [[Event: first|first]]
* [[Event: last|last]]
* [[Event: missing|missing]]
* [[Event: start|start]]
* [[Event: turning|turning]]
* [[Event: turned|turned]]
* [[Event: zooming|zooming]]

| valign="top" |
* [[Class: .even|.even]]
* [[Class: .fixed|.fixed]]
* [[Class: .hard|.hard]]
* [[Class: .odd|.odd]]
* [[Class: .own-size|.own-size]]
* [[Class: .page|.page]]
* [[Class: .p|.p[0-9]+]]
* [[Class: .shadow|.shadow]]
* [[Class: .sheet|.sheet]]

|}

==Zoom Viewport==

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about [[How to add zoom to turn.js|how to add zoom to turn.js]].

:{| class="simple" width="600"
! scope="col" width="225" | [[Zoom Options | Options]]
! scope="col" width="225" | [[Zoom Properties | Properties]]
! scope="col" width="225" | [[Zoom Methods | Methods]]
! scope="col" width="225" | [[Zoom Events | Events]]

|-
| valign="top" |
* [[Option: easeFunction|easeFunction]]
* [[Zoom Option: duration|duration]]
* [[Option: max|max]]
* [[Option: flipbook|flipbook]]
* [[Zoom Option: when|when]]

| valign="top" |

* [[Property: value|value]]

| valign="top" |

* [[Method: zoomIn|zoomIn]]
* [[Method: zoomOut|zoomOut]]

| valign="top" |
* [[Event: change|change]]
* [[Event: doubleTap|doubleTap]]
* [[Event: resize|resize]]
* [[Event: swipeLeft|swipeLeft]]
* [[Event: swipeRight|swipeRight]]
* [[Event: tap|tap]]
* [[Event: zoomIn|zoomIn]]
* [[Event: zoomOut|zoomOut]]
|}

==Scissors==

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

[[Scissor|Read more about Scissor]]
__NOTOC__

Option: autoCenter

2012-08-16T04:22:02Z

Emmanuel:

Main Page

2012-08-08T06:40:21Z

Emmanuel: /* Turn.js 4th release */

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

==Let's take a look at how it works==

1. We create the HTML
<pre class="xml">
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</pre>
2. Then the JavaScript part
<pre class="javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</pre>

[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]

== Turn.js 4th release==
This is the current release of turn.js, it has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4-based browsers.

==Flipbook==

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

:{| class="simple"
! scope="col" width="225" | [[Turn Options|Options]]
! scope="col" width="225" | [[Turn Properties|Properties]]
! scope="col" width="225" | [[Turn Methods|Methods]]
! scope="col" width="225" | [[Turn Events|Events]]
! scope="col" width="225" | [[Turn CSS|CSS Classes]]

|-
| valign="top" |
* [[Option: acceleration|acceleration]]
* [[Option: autoCenter|autoCenter]]
* [[Option: direction|direction]]
* [[Option: display|display]]
* [[Option: duration|duration]]
* [[Option: gradients|gradients]]
* [[Option: height|height]]
* [[Option: elevation|elevation]]
* [[Option: page|page]]
* [[Option: pages|pages]]
* [[Option: turnCorners|turnCorners]]
* [[Option: when|when]]
* [[Option: width|width]]
| valign="top" |

* [[Property: animating|animating]]
* [[Property: direction|direction]]
* [[Property: display|display]]
* [[Property: disabled|disabled]]
* [[Property: page|page]]
* [[Property: pages|pages]]
* [[Property: size|size]]
* [[Property: options|options]]
* [[Property: view|view]]
* [[Property: zoom|zoom]]

| valign="top" |

* [[Method: addPage|addPage]]
* [[Method: center|center]]
* [[Method: destroy|destroy]]
* [[Method: direction|direction]]
* [[Method: display|display]]
* [[Method: disable|disable]]
* [[Method: hasPage|hasPage]]
* [[Method: next|next]]
* [[Method: is|is]]
* [[Method: page|page]]
* [[Method: pages|pages]]
* [[Method: peel|peel]]
* [[Method: previous|previous]]
* [[Method: range|range]]
* [[Method: removePage|removePage]]
* [[Method: resize|resize]]
* [[Method: size|size]]
* [[Method: stop|stop]]
* [[Method: version|version]]
* [[Method: zoom|zoom]]

| valign="top" |

* [[Event: end|end]]
* [[Event: first|first]]
* [[Event: last|last]]
* [[Event: missing|missing]]
* [[Event: start|start]]
* [[Event: turning|turning]]
* [[Event: turned|turned]]
* [[Event: zooming|zooming]]

| valign="top" |
* [[Class: .even|.even]]
* [[Class: .fixed|.fixed]]
* [[Class: .hard|.hard]]
* [[Class: .odd|.odd]]
* [[Class: .own-size|.own-size]]
* [[Class: .page|.page]]
* [[Class: .p|.p[0-9]+]]
* [[Class: .shadow|.shadow]]
* [[Class: .sheet|.sheet]]

|}

==Zoom Viewport==

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about [[How to add zoom to turn.js|how to add zoom to turn.js]].

:{| class="simple" width="600"
! scope="col" width="225" | [[Zoom Options | Options]]
! scope="col" width="225" | [[Zoom Properties | Properties]]
! scope="col" width="225" | [[Zoom Methods | Methods]]
! scope="col" width="225" | [[Zoom Events | Events]]

|-
| valign="top" |
* [[Option: easeFunction|easeFunction]]
* [[Zoom Option: duration|duration]]
* [[Option: max|max]]
* [[Option: flipbook|flipbook]]
* [[Zoom Option: when|when]]

| valign="top" |

* [[Property: value|value]]

| valign="top" |

* [[Method: zoomIn|zoomIn]]
* [[Method: zoomOut|zoomOut]]

| valign="top" |
* [[Event: change|change]]
* [[Event: doubleTap|doubleTap]]
* [[Event: resize|resize]]
* [[Event: swipeLeft|swipeLeft]]
* [[Event: swipeRight|swipeRight]]
* [[Event: tap|tap]]
* [[Event: zoomIn|zoomIn]]
* [[Event: zoomOut|zoomOut]]
|}

==Scissors==

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

[[Scissor|Read more about Scissor]]
__NOTOC__

Main Page

2012-08-08T06:40:02Z

Emmanuel: /* Turn.js 4th release */

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

==Let's take a look at how it works==

1. We create the HTML
<pre class="xml">
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</pre>
2. Then the JavaScript part
<pre class="javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</pre>

[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]

== Turn.js 4th release==
This is the current release of turn.js, it has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4 browsers.

==Flipbook==

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

:{| class="simple"
! scope="col" width="225" | [[Turn Options|Options]]
! scope="col" width="225" | [[Turn Properties|Properties]]
! scope="col" width="225" | [[Turn Methods|Methods]]
! scope="col" width="225" | [[Turn Events|Events]]
! scope="col" width="225" | [[Turn CSS|CSS Classes]]

|-
| valign="top" |
* [[Option: acceleration|acceleration]]
* [[Option: autoCenter|autoCenter]]
* [[Option: direction|direction]]
* [[Option: display|display]]
* [[Option: duration|duration]]
* [[Option: gradients|gradients]]
* [[Option: height|height]]
* [[Option: elevation|elevation]]
* [[Option: page|page]]
* [[Option: pages|pages]]
* [[Option: turnCorners|turnCorners]]
* [[Option: when|when]]
* [[Option: width|width]]
| valign="top" |

* [[Property: animating|animating]]
* [[Property: direction|direction]]
* [[Property: display|display]]
* [[Property: disabled|disabled]]
* [[Property: page|page]]
* [[Property: pages|pages]]
* [[Property: size|size]]
* [[Property: options|options]]
* [[Property: view|view]]
* [[Property: zoom|zoom]]

| valign="top" |

* [[Method: addPage|addPage]]
* [[Method: center|center]]
* [[Method: destroy|destroy]]
* [[Method: direction|direction]]
* [[Method: display|display]]
* [[Method: disable|disable]]
* [[Method: hasPage|hasPage]]
* [[Method: next|next]]
* [[Method: is|is]]
* [[Method: page|page]]
* [[Method: pages|pages]]
* [[Method: peel|peel]]
* [[Method: previous|previous]]
* [[Method: range|range]]
* [[Method: removePage|removePage]]
* [[Method: resize|resize]]
* [[Method: size|size]]
* [[Method: stop|stop]]
* [[Method: version|version]]
* [[Method: zoom|zoom]]

| valign="top" |

* [[Event: end|end]]
* [[Event: first|first]]
* [[Event: last|last]]
* [[Event: missing|missing]]
* [[Event: start|start]]
* [[Event: turning|turning]]
* [[Event: turned|turned]]
* [[Event: zooming|zooming]]

| valign="top" |
* [[Class: .even|.even]]
* [[Class: .fixed|.fixed]]
* [[Class: .hard|.hard]]
* [[Class: .odd|.odd]]
* [[Class: .own-size|.own-size]]
* [[Class: .page|.page]]
* [[Class: .p|.p[0-9]+]]
* [[Class: .shadow|.shadow]]
* [[Class: .sheet|.sheet]]

|}

==Zoom Viewport==

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about [[How to add zoom to turn.js|how to add zoom to turn.js]].

:{| class="simple" width="600"
! scope="col" width="225" | [[Zoom Options | Options]]
! scope="col" width="225" | [[Zoom Properties | Properties]]
! scope="col" width="225" | [[Zoom Methods | Methods]]
! scope="col" width="225" | [[Zoom Events | Events]]

|-
| valign="top" |
* [[Option: easeFunction|easeFunction]]
* [[Zoom Option: duration|duration]]
* [[Option: max|max]]
* [[Option: flipbook|flipbook]]
* [[Zoom Option: when|when]]

| valign="top" |

* [[Property: value|value]]

| valign="top" |

* [[Method: zoomIn|zoomIn]]
* [[Method: zoomOut|zoomOut]]

| valign="top" |
* [[Event: change|change]]
* [[Event: doubleTap|doubleTap]]
* [[Event: resize|resize]]
* [[Event: swipeLeft|swipeLeft]]
* [[Event: swipeRight|swipeRight]]
* [[Event: tap|tap]]
* [[Event: zoomIn|zoomIn]]
* [[Event: zoomOut|zoomOut]]
|}

==Scissors==

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

[[Scissor|Read more about Scissor]]
__NOTOC__

Main Page

2012-08-08T06:39:25Z

Emmanuel: /* Turn.js 4th release */

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

==Let's take a look at how it works==

1. We create the HTML
<pre class="xml">
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</pre>
2. Then the JavaScript part
<pre class="javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</pre>

[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]

== Turn.js 4th release==
This is the current release of turn.js, it has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 or IE7 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4 browsers.

==Flipbook==

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

:{| class="simple"
! scope="col" width="225" | [[Turn Options|Options]]
! scope="col" width="225" | [[Turn Properties|Properties]]
! scope="col" width="225" | [[Turn Methods|Methods]]
! scope="col" width="225" | [[Turn Events|Events]]
! scope="col" width="225" | [[Turn CSS|CSS Classes]]

|-
| valign="top" |
* [[Option: acceleration|acceleration]]
* [[Option: autoCenter|autoCenter]]
* [[Option: direction|direction]]
* [[Option: display|display]]
* [[Option: duration|duration]]
* [[Option: gradients|gradients]]
* [[Option: height|height]]
* [[Option: elevation|elevation]]
* [[Option: page|page]]
* [[Option: pages|pages]]
* [[Option: turnCorners|turnCorners]]
* [[Option: when|when]]
* [[Option: width|width]]
| valign="top" |

* [[Property: animating|animating]]
* [[Property: direction|direction]]
* [[Property: display|display]]
* [[Property: disabled|disabled]]
* [[Property: page|page]]
* [[Property: pages|pages]]
* [[Property: size|size]]
* [[Property: options|options]]
* [[Property: view|view]]
* [[Property: zoom|zoom]]

| valign="top" |

* [[Method: addPage|addPage]]
* [[Method: center|center]]
* [[Method: destroy|destroy]]
* [[Method: direction|direction]]
* [[Method: display|display]]
* [[Method: disable|disable]]
* [[Method: hasPage|hasPage]]
* [[Method: next|next]]
* [[Method: is|is]]
* [[Method: page|page]]
* [[Method: pages|pages]]
* [[Method: peel|peel]]
* [[Method: previous|previous]]
* [[Method: range|range]]
* [[Method: removePage|removePage]]
* [[Method: resize|resize]]
* [[Method: size|size]]
* [[Method: stop|stop]]
* [[Method: version|version]]
* [[Method: zoom|zoom]]

| valign="top" |

* [[Event: end|end]]
* [[Event: first|first]]
* [[Event: last|last]]
* [[Event: missing|missing]]
* [[Event: start|start]]
* [[Event: turning|turning]]
* [[Event: turned|turned]]
* [[Event: zooming|zooming]]

| valign="top" |
* [[Class: .even|.even]]
* [[Class: .fixed|.fixed]]
* [[Class: .hard|.hard]]
* [[Class: .odd|.odd]]
* [[Class: .own-size|.own-size]]
* [[Class: .page|.page]]
* [[Class: .p|.p[0-9]+]]
* [[Class: .shadow|.shadow]]
* [[Class: .sheet|.sheet]]

|}

==Zoom Viewport==

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about [[How to add zoom to turn.js|how to add zoom to turn.js]].

:{| class="simple" width="600"
! scope="col" width="225" | [[Zoom Options | Options]]
! scope="col" width="225" | [[Zoom Properties | Properties]]
! scope="col" width="225" | [[Zoom Methods | Methods]]
! scope="col" width="225" | [[Zoom Events | Events]]

|-
| valign="top" |
* [[Option: easeFunction|easeFunction]]
* [[Zoom Option: duration|duration]]
* [[Option: max|max]]
* [[Option: flipbook|flipbook]]
* [[Zoom Option: when|when]]

| valign="top" |

* [[Property: value|value]]

| valign="top" |

* [[Method: zoomIn|zoomIn]]
* [[Method: zoomOut|zoomOut]]

| valign="top" |
* [[Event: change|change]]
* [[Event: doubleTap|doubleTap]]
* [[Event: resize|resize]]
* [[Event: swipeLeft|swipeLeft]]
* [[Event: swipeRight|swipeRight]]
* [[Event: tap|tap]]
* [[Event: zoomIn|zoomIn]]
* [[Event: zoomOut|zoomOut]]
|}

==Scissors==

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

[[Scissor|Read more about Scissor]]
__NOTOC__

Changelog

2012-08-08T06:05:01Z

Emmanuel: /* Turn.js 4.0.7 - July 13, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the <tt>start</tt> event now returns <tt>null</tt> when using the methods <tt>next</tt>, <tt>previous</tt> and <tt>page</tt>
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method <tt>peel</tt>

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Renamed the class <tt>.turn-page</tt> to <tt>.page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T06:03:50Z

Emmanuel: /* Turn.js 4th release - Jun 07, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method <tt>peel</tt>

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Renamed the class <tt>.turn-page</tt> to <tt>.page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T06:01:52Z

Emmanuel: /* Turn.js 4th release - Jun 07, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method <tt>peel</tt>

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class <tt>.turn-page</tt> to <tt>.page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T06:01:26Z

Emmanuel: /* Turn.js 4.0.1 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method <tt>peel</tt>

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class .turn-page</tt> to .page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T06:00:55Z

Emmanuel: /* Turn.js 4th release - Jun 07, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method peel

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class .turn-page</tt> to .page</tt>
* 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 [https://github.com/blasten/turn.js/issues/79 #79]
* Fixed issue [https://github.com/blasten/turn.js/issues/91 #91]
* Fixed issue about the event order turning + turned
* Fixed issue about appending pages in wrong locations

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T06:00:09Z

Emmanuel: /* Turn.js 4.0.9 - Aug 03, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [https://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method peel

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class .turn-page</tt> to .page</tt>
* 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

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T05:59:35Z

Emmanuel: /* Turn.js 4.0.7 - July 13, 2012 */

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [http://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue [https://github.com/blasten/turn.js/issues/132 #112]
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method peel

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class .turn-page</tt> to .page</tt>
* 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

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

Changelog

2012-08-08T05:57:58Z

Emmanuel:

===Turn.js 4.0.9 - Aug 03, 2012===

* Fixed issue [http://github.com/blasten/turn.js/issues/133 #133] when using the <tt>.own-size</tt> class that caused pages to be wrongly resized to 0x0

* Event <tt>zoom.change</tt> now is preventable

===Turn.js 4.0.8 - July 16, 2012===

* Added <tt>direction</tt> option
* Added <tt>direction</tt> method
* Added <tt>direction</tt> property

===Turn.js 4.0.7 - July 13, 2012===

* Fixed a issue of the pages method
* Fixed issue '''#112'''
* corner argument of the start event now returns null when using the methods next, previous and page
* Fixed issue of certain samples in IE8

===Turn.js 4.0.6 - July 10, 2012===
* Fixed a issue of the peeling method when using the single display
* Fixed issue of using all the corners in single display mode
* Added <tt>version</tt> method
* Added <tt>turnCorner</tt> option

===Turn.js 4.0.5 ===
* Fixed minor issues

===Turn.js 4.0.4 ===
* Fixed minor issues

===Turn.js 4.0.3 ===
* Fixed minor issues of HTML4 version

===Turn.js 4.0.2 ===
* New zoom viewport

===Turn.js 4.0.1 ===

* Fixed some issues when calculating z-index of pages
* Added method peel

===Turn.js 4th release - Jun 07, 2012===

* Added <tt>autoCenter</tt> option
* Added <tt> zoom</tt> option
* Added <tt>animating</tt> property
* Added <tt>zoom</tt> property
* Added <tt>center</tt> method
* Added <tt>destroy</tt> method
* Added <tt>is</tt> method
* Added <tt>zoom</tt> method
* Added <tt>missing</tt> event
* Added <tt>zooming</tt> event
* Added <tt>.even</tt> class
* Added <tt>.fixed</tt> class
* Added <tt>.hard</tt> class
* Added <tt>.odd</tt> class
* Added <tt>.own-size</tt> class
* Added <tt>.sheet</tt> class
* Added the ignore attribute
* New turn.html4.js
* New scissors.js
* Changed the class .turn-page</tt> to .page</tt>
* 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

=== Turn.js 3rd release - Mar 01, 2012 ===

* Added <tt>range</tt> method
* Added <tt>addPage</tt> method
* Added <tt>removePage</tt> method
* Added <tt>hasPage</tt> method
* Added <tt>pages</tt> method
* Added <tt>display</tt> method
* Added <tt>when</tt> option
* Added <tt>pages</tt>option
* Added <tt>elevation</tt> option
* Added <tt>first</tt> event
* Added <tt>last</tt> event
* Added gradients for non-webkit browsers

=== Turn.js 2nd - Feb 15, 2012 ===

* Added <tt>size</tt>.
* Bug in Chrome 17-18 Beta about losing background-image was fixed.

=== Turn.js 1st - Feb 05, 2012 ===

* First alpha release

How to add zoom to turn.js

2012-08-06T23:00:54Z

Emmanuel:

To use the new zoom feature of turn.js you need to insert the flipbook in a zoom viewport.

[[File:zoom-viewport.jpg|center]]

===HTML===
<pre class="xml">
<div id="zoom-viewport">
<div id="flipbook">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
<div>Page 6</div>
</div>
</div>
</pre>

File:Zoom-viewport.jpg

2012-08-06T22:35:43Z

Emmanuel: Emmanuel uploaded a new version of "File:Zoom-viewport.jpg"

How to add zoom to turn.js

2012-08-06T22:28:30Z

Emmanuel:

[[File:zoom-viewport.jpg|center]]

How to add zoom to turn.js

2012-08-06T21:55:34Z

Emmanuel:

[[File:zoom-viewport.jpg]]

File:Zoom-viewport.jpg

2012-08-06T21:55:01Z

Emmanuel: