Paging a book using javascript and CSS and with all content on one page [closed]

It's dif开发者_开发技巧ficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

Ok, so I didn't really knew what to write for a headline for this question. Anyway, what I want to do is create a book. Take a look at the Flash version of the book here: http://myst.sandman.net/

I make that book using Indesign and then export JPG files from all the pages, which the Flash file uses.

But I want to do this in HTML instead of Flash. I don't need the page curl function all that much, but I do want it to be constrained to the book layout.

So, imagine all the text and all the images of the book being kept in a long DIV. Is there any way for me to flow that content on two pages, while hiding what doesn't fit, but being able to page to the next part of that content - all calculated dynamically.

I'm not looking for a finnished solution, I'm quite handy with CSS/HTML/Javascript and jQuery, so I'm rather looking for some ideas and thoughts, and some points in the right direction. I have been thinking about using CSS3 columns for the content that is visible, and I have no problem with CSS3 not being standard yet, but if there is a solution that doesn't require CSS3 columns, that would also be ok with me.

What I'm unsure about is how to decide what content will fit on the display and how to calculate for it. Any help is appreciated.

---

There are a few options.

First, there is a plugin on the jquery website named jBookBrowser
Second, I've wrote a piece of simple code with jquery before. Check out the handheldculture website. In the div#newbook the programmer decided to enclose all images into one div.slider and making the width 3000% (w/ css) the screen resolution. By putting an click function onto the triangles .previous and .next div#newbook move to the next image. I imagine you can use this as a page flip animation and it's not hard to implement. Here's the jquery code:

 var elNewbook = $("#newbook").find(".book-info .slider").data("index", 0);
$("#newbook").find(".previous a").bind("click", function () {
    if (elNewbook.data("index") > 0)
        elNewbook.data("index", elNewbook.data("index") - 1).animate({ left: "+=185px" });
    else elNewbook.data("index", 18).animate({ left: "-=3330px" });

});
$("#newbook").find(".next a").bind("click", function () {
    if (elNewbook.data("index") < 18)
        elNewbook.data("index", elNewbook.data("index") + 1).animate({ left: "-=185px" });
    else elNewbook.data("index", 0).animate({ left: "+=3330px" });
});

If you have any further questions, let me know. Cheers.