Scissor: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
(Created page with "Scissor is another jQuery plugin coming with the turn.js package.")
 
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
Scissor is another jQuery plugin coming with the turn.js package.
Scissor is a jQuery plugin that cuts a page in two parts, so that you can have double pages made entirely in HTML5 or images and split them into two pages.
 
Scissor takes a DOM element and replace it by two elements in which there are a copy of the initial element after being positioned according to what it initially looked like.
 
== Example ==
 
1. HTML
<pre class="xml">
<div id="flipbook">
<div class="p1">Page 1</div>
<div class="double"> Page 2 and 3</div>
<div class="double"> Page 3 and 4</div>
<div class="double"> Page 5 and 6</div>
<div class="p7">Page 7</div>
<div>
</pre>
 
2. JavaScript
<pre class="javascript">
// Using scissor
$("#flipbook .double").scissor();
// Creating the flipbook
$("#flipbook").turn({width:800, height:400});
</pre>

Latest revision as of 21:03, 8 July 2012

Scissor is a jQuery plugin that cuts a page in two parts, so that you can have double pages made entirely in HTML5 or images and split them into two pages.

Scissor takes a DOM element and replace it by two elements in which there are a copy of the initial element after being positioned according to what it initially looked like.

Example

1. HTML

<div id="flipbook">
	<div class="p1">Page 1</div>
	<div class="double"> Page 2 and 3</div>
	<div class="double"> Page 3 and 4</div>
	<div class="double"> Page 5 and 6</div>
	<div class="p7">Page 7</div>
<div>

2. JavaScript

// Using scissor
$("#flipbook .double").scissor();
// Creating the flipbook
$("#flipbook").turn({width:800, height:400});