Code Monkey home page Code Monkey logo

stack's Introduction

stack.js

A presentation library with intuitive, scroll-based navigation.

stack's People

Contributors

iron-man avatar jasonbw avatar mbostock avatar rcopera avatar tmcw avatar tristanreid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stack's Issues

Unexpected behaviour on touchscreen in Chrome

First thanks for Stack it's great.

On touchscreen devices in Chrome keyboard action don't reveal all of the next slide, only part of it. Also, slides don't become active, which means things like the Lorenz animation in the example slide deck aren't triggered. However, things do work as expected in IE 11.

Phil

jump to slide with anchor link

Hey there thank you for this quite easy-to-use library!

I was wondering though how I could implement navigation with links to a slide.
The intuitive approach of jumping to an anchor with both html an JS failed:

<a href="#one">Jump to one</a>

or:

  <a href="#" onclick="document.getElementById('one').scrollIntoView()">Jump to one</a>

jumping to:

  <p id="one">Slide one<p>

Associate sound tracks to the slides.

Hi @mbostock ,

I wanted to associate explanations to my slides so I added sound support to stack.

When loading, stack tries to pull the sound associated to each slide. The convention is pretty straight forward; sounds have to be under sounds/ and have to be named: (\d+).mp3, where (\d+) is the number of the slide. Right now the user can play the sound for a slide hitting the s key. When transitioning between slides the sound will stop.

The component that implements all the sound logic is pretty self-contained. I have minimally modified stack.js to add the necessary calls to the sound component.

You can see all these in action here. Warning: I have only added sounds to the first three slides.

If you find this interesting I can prepare a pull request. Let me know,

-drd

Section size and ratio

Hi,
first of all: thanks for all the good stuff you're doing!

I was wondering how I could make sections preserve their size and height ratios no matter how much content is on them, so that I can position headers etc. on the slide and have them all appear in the same place, independent of the the other content on that slide? (My question is basically the same as this reveal.js one I guess: hakimel/reveal.js#1312).

Would be great if you could help!

Support swipe-to-advance on iOS?

I just tried Stack, and it's great. Congratulations. I've been using D3 for a while, and even though Stack is a minor thing next to D3, well... it is still great.

It is not a big issue for me, as most of my traffic is from desktop. But I was wondering if there is a quick workaround to make Stack work on iPad / iPhone.

Thanks

Interaction disabled on Retina MacBook Pro.

I don't know if how recent this change is, but this iOS check now returns true for Chrome (I've got 20.0.1180.79):

// Don't do anything fancy for iOS.
if (section.style("display") == "block")
  return;

I looked at stack a few weeks ago, and it worked then. This might be due to a beta channel update, but I can't for the life of me figure out where they moved that information in the Chrome about dialog.

Resizing Safari Window causes scrolling...

In the demo:

https://mbostock.github.io/stack/

scrolling down works fine, but once down a few pages, if then resizing (vigorously) the Safari window, scrolling messages seem to be sent.

Perhaps this is a result of the resizing of the scroll bar hitting some limits that send scroll messages. But I'm only guessing.

This does not happen on the first slide/page. You'll need to go down a few pages/slides before resizing to see this happen.

location.hash support

Using stack for a presentation, and it's working great. It would be great for it to use hashes for slide indices so that you can link to individual slides - I could whip up a pull req if that sounds good.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.