Anchors

[alingham]

I'm wondering if it would be possible to load functionality to utilise anchors. This would then expand this awesomeness into the realms of web design as well. Even for presentations, being able to go to "Slide 5", would be cool to be able to add /#slide5 onto the end of the URL to reference to that slide automatically.
Is this already in the code somewhere and I've missed it?

[bartaz]

You haven't missed it. It's very early release. I have anchors support on my TODO list, just haven't implemented them, yet.

[alingham]

Very cool. I look forward to the update. I have begun to build impress.js into my personal website. Looking a lot like your demo at the moment, but I hope to adapt it enough to take on its own feel.
Thanks heaps for the hard work and making this open source. Suitably impressed.

[bartaz]

From my personal experience I would suggest to start sketching parts of content on pieces of paper and arranging them to build overview. Then just move it into HTML, style with CSS and tweak positions, sizes, etc ;)

[alingham]

I very much LOVE the 3D effects. In the past I've tried to do a similar type of thing on a flat surface with divs placed around an autoscrolling anchor link based system, but didn't have the beauty of rotating through axis. I guess the introduction of CSS3 has allowed for this technology to move forward.

[lsmith77]

why anchor support if we have push state to update the URL properly?

[bartaz]

I haven't played much with history.pushState but as I understand it it requires server side to understand the urls pushed to history or bookmarked.

Let's say you have a link to a slide (in history or bookmark) with a # ancor: presentation.example.com/#slide2 - browser asks for a correct page (.com) and JavaScript handles #.
If pushState is used to push presentation.example.com/slide2 into history, next time browser will ask server for /slide2 page that doesn't exist.

At least this is my understanding of pushState, but correct me if I'm wrong.

New history APIs are great, but they seem to require server side support and it may be a little overhead in case of one page presentation like this.

[nagisa]

@bartaz,
You can always serve index page with all pages/directories that contains some fragment, like slide*...

[bartaz]

Like in this demo http://html5demos.com/history also hosted on github. If you keep http://html5demos.com/history/first in a history, bookmark it, or share you will get error, because it's not supported server-side.

[lsmith77]

yes that is correct. yeah i guess. slippy.js which i am currently using is using anchors too:
http://phpcr.github.com/slides.html#2

i find push state cleaner, but it would require rewrite magic. the upside it that it could also enable stitching multiple separate presentations together. so ideally use some solution that could allow both for flexibility. but yeah i guess getting anchor support in is indeed the more important thing for now.

[bartaz]

@simukis
yes, but is it really worth it? serving same file many times (copying and maintaining it if hosted as statics) just to use history API?

History API is great, and should be used for dynamic websites and applications - for example twitter should forget about hashbangs. But for static one-pagers there is no use for that IMHO.

[lsmith77]

thinking about it more .. indeed push state is the wrong way to go and anchors is the right approach .. its a single page and you want to jump to specific places in that page, so anchor's were meant for exactly that. so never mind my comment :)

[bartaz]

No worries. It's good to have such discussions. That's how you learn.

Just to justify anchors more - this seem to be a 'standard' for presentation tools out there:

http://html5slides.googlecode.com/svn/trunk/template/index.html
http://lab.hakim.se/reveal-js
http://leaverou.github.com/CSSS

:)

[bartaz]

Here you are. Anchors support just landed in repo.

To add a link to any of presentation steps just create a regular old-school hash based link with step id in it, like: <a href='#title'>Title</a> and JavaScript will do all the magic for you.

[alingham]

AWESOME! Thanks heaps. Works a treat!