Page 1 of 2

Bauer Atlas and CSS

Posted: Fri Jun 14, 2013 3:40 pm
by Doug R.
Does anyone know how to do this? I want to just have the illusion of flipping pages. I don't need anything fancy at all, just text on a page I can turn. I teased the code out of the Bauer Atlas, but there's no formatting at all so I can't really make heads or tails of it.

I want to make a story book, and this format is perfect for it.

Re: Bauer Atlas and CSS

Posted: Fri Jun 14, 2013 4:16 pm
by Estaar
I can't believe this! :)

I was wondering the exact same thing earlier today and was going to post about it later. Well, I was actually going to post praise for the Bauer Atlas in the RP praise post, and ask at the same time how something like that is done.

Re: Bauer Atlas and CSS

Posted: Fri Jun 14, 2013 4:59 pm
by Doug R.
I've found some css code that does it in varying ways, but it doesn't translate into a Cantr note, sadly. Clearly Mr. Bauer's player knew some magic to make it work. Oh, and for websearch purposes, I think it's called a "css flipbook"

Re: Bauer Atlas and CSS

Posted: Sun Jun 16, 2013 10:14 am
by EchoMan
I have built something similar to this professionally a long time ago, but never for Cantr. If books ever get implemented I assume they would be made in a very similar way, with ajax-calls to flip pages etc.

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 8:52 pm
by Undine
*Resurrects post*
Has anyone had luck with this in the year and a half that this post has been up? I would love to do something like Mr. Bauer did. His atlas is a work of art!

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 9:00 pm
by *Wiro
I wish the player made it open source on the forum because it's really cool.

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 9:28 pm
by BosBaBe
*summons Anicator* I think he knows how it works, from what I've seen. :P

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 9:30 pm
by AniCator
*whispers* It's very easy.

Edit: For those that know how to develop websites of course.
I'll try to write a reply soon that includes some instructions.

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 10:43 pm
by Undine
AniCator wrote:*whispers* It's very easy.

Edit: For those that know how to develop websites of course.
I'll try to write a reply soon that includes some instructions.

Hopefully it isn't too complicated! I know basic HTML and CSS, but I never got into the "gritty" bits.

Re: Bauer Atlas and CSS

Posted: Sat Nov 29, 2014 11:42 pm
by Calyx
As far as I know it's done with <div> layers and visibility and/or z-index switching to display the pages before/behind each other! Not that hard, really!

I might be a bit out of date though...

Re: Bauer Atlas and CSS

Posted: Sun Nov 30, 2014 12:05 am
by Doug R.
I did gut the Bauer Atlas and repurpose the code for my own project, but the final product won't survive the new note system, so I can't actually edit them. Which bugs me, because I found typos...

Re: Bauer Atlas and CSS

Posted: Sun Nov 30, 2014 12:14 am
by AniCator
@Calyx: It's way simpler than that.

I started working on a note editor some time ago but never actually finished it.
Image

Re: Bauer Atlas and CSS

Posted: Sun Nov 30, 2014 12:18 am
by Swingerzetta
That just makes me want to start stocking up on notepaper textures...

Do we know if even the Atlas its self can be edited? It DOES look mostly CSS, which our notes can handle... Or is it just a matter of getting it optimized correctly?

Re: Bauer Atlas and CSS

Posted: Sun Nov 30, 2014 12:28 am
by AniCator
Here's the trick that kind of reveals all the magic.

Basically these multi-page notes are long pages with their scrollbars hidden (overflow: hidden;).
The pages are equal height divs stacked on top of each other.
Then using anchors, the pages snap in place when you click on a 'page link'.

Re: Bauer Atlas and CSS

Posted: Sun Nov 30, 2014 12:48 am
by Swingerzetta
Oh man, that is magic. So, the whole book is there, not overlapping, just scrolled out of view? And the scrollbars are inaccessible, so instead the links do the scrolling?