Bookblock Tutorial jQuery Plugin Mobile Responsive Upload Instructions

Smartphone with Bookblock Tutorial sign
Looking for a bookblock tutorial with instructions to upload to your website? A bookblock is a cool plugin that turns pages like a real book.

Searching Google you can find free jQuery plugin, lots of code samples and free zips but no installation guides. This tutorial teaches you how to upload the code to your website.

You will notice the original plugin is not mobile-responsive. To make the book mobile responsive you need new CSS rules to override the height and width properties. Read the book below to learn how to make a


Bookblock Tutorial Source Code Upload Instructions

Bookblock Tutorial banner
Click arrows to turn pages.

Bookblock tutorial step 1

Bookblock tutorial is an installation guide for adding the code into your webpage. You must have some webmastering skill to accomplish the tasks ahead. Get the plugin below and unzip it to your computer. I promise is it safe and virus free.

Then follow the step by step instructions to guide you through uploading to your website. Get a deeper understanding of the plugin courtesy of tympanus.net by: Pedro Botelho

Then come back here to learn how to add the code to your website and make it mobile responsive. Use the arrows below to navigate through the tutorial.




Next: bookblock-responsive.css

1
Bookblock tutorial step 2

bookblock-responsive.css is the file that contains the style rules that override the height and width attributes of the book.

There are many variables that can be adjusted in the css files. If you are an inexperienced coder then don't worry about it. Stick with the default settings.

The default height is 400px and the width is 300px and can be found in the bookblock.css file. However these can be made responsive. Get the add-on to do that.


The 'bookblock-responsive.css' code changes the height and width properties of the book for screens on mobile devices.

Next Theory and usage.

2
Bookblock tutorial step 3

Bookblock Tutorial Theory and Usage

Starting with the name 'BookBlock' can be interpreted as a combination of a book and a block. You can turn pages in a book with a flick of the thumb. A block can be related to as a container. The author can write a book contained in a defined space.

The javascript programs the function of flipping between pages. The CSS file contains the styling. The actual content is in the HTML page.

Caution: You must plan your content to fit into the page. If the content is more than the 400px in height it could cover the navigation arrows preventing them from working.

Next CSS code.

3
Bookblock tutorial step 4

CSS Code

You need to add several css files to the 'head' section of your webspage. Must be placed above the javascript code.

The CSS files must be in the order shown above. The emoji CSS brings in the arrow icons.

Next: Javascript code.

4
Bookblock tutorial step 5

Javascript Code

You need to add this javascript to the 'head' section of your webspage.

These jacascript codes need to be placed at the bottom of the page just before the closing 'body' tag.

Next:HTML code.

5
Bookblock tutorial step 6

Bookblock Tutorial HTML Code

Copy and paste this code where you want the book to appear. Make sure to add your own content.

Next: Bottom Javascript code.

6
Bookblock tutorial step 7

Bottom Javascript code

Copy and paste this code chunk at the bottom of your page just above the closing 'body' tag.

Next: Page Numbering.

7
Bookblock tutorial page numbering

Page Numbering

Page numbering is accomplished by including a small container rule in the bookblock-responsive.css file. The HTML code for this goes at the end of the page.

Page numbering is exclusive to this tutorial. We created a small container that holds the number.

The CSS style rule for it is included in the bookblock-responsive.css. If you copy and paste this code don't forget to update the number. Nothing so bad as a book whose page numbers are out of order.

Place this code at the end of your content per page. To remove page numbering, simply remove the code.

Next: Usage Tips.

8
Bookblock tutorial step 8

Bookblock Tutorial Usage Tips

Some clever ideas would be to use this as a childrens book for learning, Or as a step by step tutorial like this one. You may want to do a short presentation. Or make a game with it. Or use as an image gallery. Or you could make a short story.

Note the default height is set at 400px and can be modified in the bookblock-responsive.css file.

Disclaimer. This bookblock tutorial comes as is. No guarantees are given to performance. No liability can be claimed for any damage.

Questions? Contact me.

That's it, thanks for reading

The End

9
Some folks have asked me 'what is a bookblock?' And, 'why do I need a tutorial?' Like the name implies a bookblock is a design pattern that looks and acts like a real book. Do you need one? If you have a lot of material and would like to condense it into a smaller space then this is a cool way to do it.

The bookblock design pattern utilizes HTML5, CSS3 and javascript. Specifically jquery. There are several files you need to 'upload' to your website. They can be found in the downloaded zip file. Along with a dozen files you could use.

Bookblock tutorial is a step by step guide to including a jquery 'bookblock' to your website and making it mobile responsive. BBT shows you which files you need to use and what they are for.

Hope this helps
Tim

top of the page

� Bookblock Tutorial

Inside Miappmaker

Follow me on Twitter Follow me on Twitter. Follow me on Blogarama Follow on Blogorama
Google Plus

Rss/Blog Feed

Mobile App Blog

↑ Grab this Headline Animator

MiAppMaker Monthly NewsLetter

Get a FREE Utility app with your subscription

Enter Your E-mail Address
Enter Your First Name (optional)
Then

Don't worry — your e-mail address is totally secure.
I promise to use it only to send you MiAppMaker NewsLetter.