Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google books dynamic pages

Tags:

javascript

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).

like image 375
Donovan Avatar asked Aug 06 '11 22:08

Donovan


1 Answers

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 )
like image 75
Marek Sebera Avatar answered Nov 05 '22 08:11

Marek Sebera