Search code examples
javascriptjqueryhorizontal-scrollinghorizontalscrollviewibooks

What is the best way to make something like iBooks using javascript and HTML?

I'm wondering what might be the best way to code a JavaScript/jQuery based solution for horizontal scrolling of the individual pages of document files such as pdf, HTML, or .doc files (the .doc file would have to be converted to pdf or HTML before it could be viewed in a webpage but you get the idea). The ultimate goal is to make something like iBooks or an actual book where the "pages" can be "flipped" horizontally rather than vertically.

So far, I can see 3 strategies:

  1. iframe: convert pdf,doc to several HTML files. put each "page" of the pdf/doc into its own iframe and then use javascript to click between iframes.
  2. img: convert pdf,doc,html to several image (png,jpg) files. put each image ("page") into its own img tag and then use JavaScript to click between imgs
  3. div: convert pdf/doc/HTML into some other file format, JSON? such that each "page" could be put into its own DIV and then use JavaScript to click between DIVs

I do not want to use option "1)" since iframes have major formatting issues, such as having multiple vertical scroll bars in same top window. Option "2)" is a no go either because I want the document's text to be searchable and converting the documents to images kills that functionality. I'd like to use option "3)" however, I'm not sure what might be needed (backend file conversion,JavaScript) to place each page of a pdf,doc, or HTML document into its own DIV. Might anyone know how this could be accomplished? Any suggestions would be greatly appreciated!

Solution

  • In my oppinion, you should convert the pdf to both image and html.

    Make the JS for the image (using iScroll with snap true or targeting the container OR using SwipeView - both made by @cubiq) and in the same container of image (each "page"), insert the html in a visibility:hidden div or even with text-indent:-9999px;

    And make a graceful degradation to html only when Js is not active (thus contemplating people with js off and search crawlers also), making the pages 'crawlable'