0

I think I am trying to accomplish the impossible.

What I am trying to create is a way for users to submit "stories" or journal entries. They will have full control over the length of the entry and it's paragraphs.

My issue: I am trying to take the entry (block of text) and display it like a book, with a book background and links to the next and previous page.

Open book = 2 columns (left side / right side).

The content needs to fill column one (page one) and overflow into column 2 (page 2). If the content is too long for column 2, include a "next page" link. The text then continues on page 3/4 where it left off on page 2. Fill column 1 (page 3) and overflow to column 2 (page 4) etc etc.

I would like to eventually add images but I think that is really pushing it.

Everything that I tried has failed. I have tried counting words and splitting them so half display on one page and half on the other but that doesn't take into account line breaks.

I have tried using jquery and cloning the text from one div to the other and hide the pre-seen text by offsetting the contents but it gets screwed up with line breaks.

Does anyone have any ideas how to pull this off?

[Edit] I found this: http://jsfiddle.net/natedavisolds/bxzCK/16/ But I don't know how to create pagination for it when the text overflows out of the 2nd column. It would need to start again in column 1 where it left off in column 2.

$('.column[data-overflow]').each(function(index) {
    var $this = $(this),
        $parent = $($this.data('overflow')),
        colHeight = $parent.innerHeight(),
        scroll = parseInt(colHeight) * (index + 1),
        newHeight = "-=" + scroll + "px";

    $this.html($parent.html())
         .find('.content').css({ marginTop: newHeight});

});
Damien
  • 157
  • 5
  • 12
  • Without any sample code that you've tried and is not working for some reason, you likely aren't going to receive much help. Although to get you on the right track, I'd say that this would be a good instance to forego PHP as text in images isn't its strong-suit. How about offloading the task of creating the book to some clever HTML & CSS3? – Bailey Parker Jun 27 '13 at 15:06
  • @PhpMyCoder I didn't include the code I tried because it was hacky. My attempts were useless because line breaks would offset the word count and I realized that simply counting the words and splitting them was not the way I should go. – Damien Jun 27 '13 at 16:08

1 Answers1

1

Have a look at jquery columnizer http://welcome.totheinter.net/columnizer-jquery-plugin/

Extract your ideas and expand. Probably the code will give you a hint on how to do that.

saamorim
  • 3,855
  • 17
  • 22
  • This looks promising, but I don't know how to paginate it. All of the pages appear to be on the same page, just scrolled down. http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/ – Damien Jun 27 '13 at 15:49
  • You'll probably have to apply some css magic + a bit of javascript to show/hide the pages as you cicle throw them. Your navigation forward link will need to do some $(".page")[pageindex].show() and $(".page")[pageindex-1].hide() – saamorim Jun 27 '13 at 16:18