Fork me on GitHub
Go back to
  • Devrama Book

    jQuery Plugin

  • Devrama, My Story

  • Hedgehog(From Wiki)

    A hedgehog is any of the spiny mammals of the subfamily Erinaceinae, which is in order Erinaceomorpha. There are seventeen species of hedgehog in five genera, found through parts of Europe, Asia, Africa and New Zealand (by introduction). There are no hedgehogs native to Australia, and no living species native to the Americas. Hedgehogs share distant ancestry with shrews (family Soricidae), with gymnures possibly being the intermediate link, and have changed little over the last 15 million years.[2] Like many of the first mammals, they have adapted to a nocturnal,[3] insectivorous way of life.

  • Hedgehogs' spiny protection resembles that of the unrelated rodent porcupines and monotreme echidnas. The name hedgehog came into use around the year 1450, derived from the Middle English heyghoge, from heyg, hegge ("hedge"), because it frequents hedgerows, and hoge, hogge ("hog"), from its piglike snout.[4] Other names include urchin,

  • Mongoose(From Wiki)

    A mongoose is a small carnivoran member of 33[2] living species in southern Eurasia and mainland Africa of the family Herpestidae.[1] Four additional species from Madagascar in the subfamily Galidiinae, which were previously classified in this family, are also referred to as "mongooses" or "mongoose-like". Genetic evidence indicates the Galidiinae are more closely related to other Madagascar carnivorans in the family Eupleridae, which is the closest living group to the true mongooses.

  • A well-known fictional mongoose is Rikki-Tikki-Tavi, who appears in a short story of the same title in The Jungle Book (1894) by Rudyard Kipling. In this tale set in India, the young mongoose saves his family from a krait and from Nag and Nagaina, two cobras. The story was later made into several films, and also a song by Donovan, among other references. A mongoose also features in Bram Stoker's novel, The Lair of the White Worm. The main character, Adam Salton, purchases one to independently hunt snakes. Game Freak's Pokémon franchise has a Pokémon named Zangoose that is part mongoose.

  • Demian(From Wiki)

    Demian: The Story of Emil Sinclair's Youth is a Bildungsroman by Hermann Hesse, first published in 1919; a prologue was added in 1960. Demian was first published under the pseudonym "Emil Sinclair", the name of the narrator of the story, but Hesse was later revealed to be the author.

  • Plot summary

    Emil Sinclair is a young boy raised in a bourgeois home, amidst what is described as a Scheinwelt, a play on words that means "world of light" as well as "world of illusion". Emil's entire existence can be summarized as a struggle between two worlds: the show world of illusion (related to the Hindu concept of maya) and the real world, the world of spiritual truth. In the course of the novel, accompanied and prompted by his mysterious classmate 'Max Demian', he detaches from and revolts against the superficial ideals of the world of appearances and eventually awakens into a realization of self.

Devrama Book - jQuery Plugin

'Devrama Book' is a jQuery Plugin that you can easily make a 3D book. Simply use HTML or Text to add content inside. You can customize the look & feel using CSS.

Since CSS3 3D feature is not fully supported in Microsoft Internet Explorer, this plugin will not work on Microsoft Internet Explorer. Best on Goolge Chrome, good on Firefox and Safari.


v.0.9.0 Source Version & Minified Version

How to use?

Include jQuery, and devrama-book.css

<link rel="stylesheet" type="text/css" href="devrama-book.css"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src=""></script>

1. Basic Use

See Example.1 <html> <head> <link rel="stylesheet" type="text/css" href="devrama-book.css"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src=""></script> </head> <body> <div class="devrama-book"> <ul class="front"> <li class="front"> Front Page Title </li> <li class="back"> <!-- You can decorate the back of the front cover page. --> </li> </ul> <ul class="page"> <li> Usually blank page. </li> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> <li>Page 4</li> <li>Page 5</li> </ul> </div><!-- .devrama-book --> </body> </html>

It is super simple to use. To add content into the pages, simply add <li></li> tags inside <ul class="page"></ul>. To edit the front cover, add <li class="front"></li> and <li class="back"></li> inside <ul class="front"></ul>. <li class="front"></li> is the front of the front cover, and <li class="back"></li> is the back of the front cover.

<script type="text/javascript"> $('.devrama-book').DrBook({ width: 320, // Book width height: 400 // Book height }); </script>

2. Detail of Configuration Values

Name Default Value Type Available Values Description
width 400 Number e.g.
0, 1, 2, 3, 4…
Width of the book
height 500 Number e.g.
0, 1, 2, 3, 4…
Width of the book
depth 50 Number e.g.
0, 1, 2, 3, 4…
Depth/Thickness of the book
speed_page_turn 700 Number e.g.
0, 1, 2, 3, 4…
Page turning animation speed in milliseconds
init_degree -35 Number e.g.
…-3, -2, -1, 0, 1, 2, 3…
0 will make the book face against you

3. API

<script type="text/javascript"> $('.class-of-your-book').DrBook('open'); //open the book $('.class-of-your-book').DrBook('close'); //close the book $('.class-of-your-book').DrBook('previous'); //turn page to previous $('.class-of-your-book').DrBook('next'); //turn page to next </script>


MIT license