Grow your CSS skills. Land your dream job.

Page Marker

  • # May 16, 2013 at 7:58 am

    Hi guys,

    First post here so let me just say that CSS-Tricks is my bible and I love it.

    Right, now the bum kissing has been dispensed with…

    I’m hoping someone can give me a bit of advice with a new website I’m building. Basically it’s to host an online novel that will have chapters added to an ongoing story on a regular basis. Essentially using blog posts as chapters of a novel.

    Now, the concept is a nice and simple one, fairly easy to execute and publish with no major issues. I do however, have one issue that I think will grow as the story gets more chapters added. Bookmarking.

    My plan is to have a horizontal feel to the whole thing and have each chapter on its own page and use a TrentWalton.com style ‘prev/next’ style navigation. As an aside, Trent Walton’s site is very much an inspiration for the style I am planning on running – themed chapters using illustrations that relate to the contents.

    Anyway, the issue with bookmarking comes when theres a large chapter that won’t necessarily be read in one sitting.

    Maybe I should just be strict and set character limits to each chapter, but I’d rather not infringe on the storytelling.

    The thoughts I’ve had is that the bookmark icon would float along down the right hand side as one scrolls through the page – much like a ‘back to top’ sort of button – and when it’s needed the user just clicks it, marker is placed and they can close their browser. Safe in the knowledge that upon their return they will be able to pick right up where they left off.

    I’d love to see all of your ideas and welcome any suggestions for the concept as a whole.

    Many thanks,

    Adam Hughes

    # May 16, 2013 at 8:19 am

    Hmm. I really like the idea with a bookmark, that’s all sorts of neat. But how to implement it…

    Well, one way could be to divide it into sub-sections and make an anchor to that, so that they can return to “chapter 5, 3rd page” or something similar. In theory one could probably make that to each paragraph, but that might be a bit bloated.

    I like that idea and will think about it, since yeah, that is very neat!

    # May 16, 2013 at 9:28 am

    Cookies FTW?

    # May 16, 2013 at 9:45 am

    Thanks for the replies.

    I did initially think that a simple use of cookies may be a solution. However, I left that idea on the back-burner when I started contemplating multiple devices. If it goes as well as I hope then users will be able to simply move from their desktop, where they are half-way through chapter four, to their tablet (iPad) or phone and pick up at the same point.

    # May 16, 2013 at 10:40 pm

    imo achieving this without creating a database and implementing user authorization will be very tricky.

    very cool idea though.

    # May 17, 2013 at 11:18 am

    @Melindrea‘s suggestion seems to be the most immediately feasible.

    For now I’ll just put various markers throughout each chapter with ID tags for each one. Not ideal but a suitable stop-gap!

    Thanks again.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".