Question

I was wondering if it is possible to do something like this using Javascript.
I think that’s a very difficult thing to implement (just try resizing the window), and I don’t know if there is something on the web (I did not find anything though).

Answer 1

This is simple, if you’re able to pass text of whole book to page.

Simple todo-list (MVC)

• PHP: get book from db and pass its content to view
• Create four DIVs
  • first to previous page action
  • second to left page
  • third to right page
  • fourth to next page action

these DIVs are 100% height of browser window and their width is:

• 30px
• (page.width-60)/2
• (page.width-60)/2
• 30px

and via Javascript you will just split up the book’s text to so many pages via counting words (for example one page == 200 words)

and if the page is not so high to take all text, let’s scroll vertically like they do on given example

more functions they implement are:

• search (see javascript string.search() )
• resizing font (see javascript css methods or read Javascript Change Font Size )
• walking book by chapters ( depends on your implementation *1 )
• bottom slider (again depends on your implementation, but jquery slider is quite usable for this one)

*1

• you can simply pass your book’s text to your view in array by chapters
• you can pass only chapters and let fetch chapters text via AJAX call
• or whatever you can think of …

About ready implementations, you can see these:

• http://michaelthompson.org/books/read.php?book=b5
• http://weblogs.mozillazine.org/gerv/archives/2006/05/amazon_ajax_book_reader.html (like page images – scans – implementation)
• http://openlibrary.org/dev/docs/bookreader
• http://monocle.inventivelabs.com.au/ ( again scanned pages like images of final size )