Scissor: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 2: | Line 2: | ||
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 looked like. | 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 looked like. | ||
== Example == | |||
# 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> | |||
# JavaScript | |||
<pre class="xml"> | |||
// Separate double pages | |||
$("#flipbook .double").scissor(); | |||
// Create the flipbook | |||
$("#flipbook").turn({width: 1000, height:800}); | |||
</pre> |
Revision as of 20:57, 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 looked like.
Example
- 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>
- JavaScript
// Separate double pages $("#flipbook .double").scissor(); // Create the flipbook $("#flipbook").turn({width: 1000, height:800});