imakewebthings / deck.js Goto Github PK

View Code? Open in Web Editor NEW

5.4K 5.4K 618.0 2.34 MB

Modern HTML Presentations

Home Page: http://imakewebthings.com/deck.js

License: MIT License

Makefile 0.08% HTML 6.58% CSS 24.61% JavaScript 68.73%

deck.js's People

Contributors

Stargazers

Watchers

Forkers

mfkp hinablue designfromwithin ninickck jwarzech electroponix bensochar spf13 gsphanikumar umaar edercosta ap0ught-old gijs nelpace narpaldhillon ahjohannessen mv repos-html5 abdul sporkmonger amitagrawal paolomainardi alexindigo adaptives moondev jaredwilli rafaalves jbuck housemaister kaiquewdev arijita mchorfa nguyennamtien phoenix24 flavioruiz magnet0 marthar huncent sequoiar esamattis leoken kfalter rich-hansen-ui iros basus yakjuly seebi earlpast mysuim gnarf randell sousk codelahoma natv12 acnithin luisnomad fullsailor karlbohlmark courtsansom appendto yourabi bigtiger apnerve titosemi gitesh1488 vuquochuy vitorbal msteitle lroggendorff roberttomczak jaequery silashaysom lucarosaldi drewgallo aeby netconstructor jacktang cefn jianling hecspc jmav carrollcenter4blind clopez bronfman greco alexqch evo42 alexch gunderstorm szxuning railsdev proximamonkey billortell logicalhan redroot pedrogk colbyr gflarity agamdua kiran

deck.js's Issues

Calling showMenu if menu is already showing screws up the world

The JS applied CSS gets saved as the "old" CSS to be restored later. So returning to normal view retains the grid. Returning silently if already showing is probably an acceptable (and easy) way out.

"Previous" navigation button disabled when starting slide is not the first

Go to http://imakewebthings.github.com/deck.js/introduction/#themes
Hover over the deck
Notice the previous button is not showing (disabled).

Fix that.

deck.hash incompatible with jquery.hashchange plugin

Can't use deck.hash along with jquery.hashchange plugin. Error in jQuery library is returned

next slide on click

Hi,

it would be very nice, if the next slide could appear with a mouse click!

If i try to bring my Slide in to an iframe, the Slide breaks out of the iframe. I think it reloads the page. But i cant fix it by myself. Is it a protetional function or is it a Bug? Is there any solution for the Problem?

Clean up touch events

From pull request #13:

Scope events in a .deck namespace, touchstart.deck.

Events bound within init should unbind the .deck variant before binding. I do this to maintain the ability to call init multiple times without getting multiple handlers stacking up doing the same thing.

Make the tolerance for swiping an option, currently hardcoded. Possibly the same for the double-tap window.

Change event namespacing on native events

Currently a lot of modules just use the .deck namespace when binding to native events. This should be changed so that only core uses .deck and modules use something more specific, such as .deckmenu to avoid cross contamination between modules when unbinding and binding. Nothing breaks yet, this is a strictly preemptive architectural move.

Nested Slide Replacement

Add the ability to create nested slides that replace the existing content instead of adding to it. For instance, in the following snippet, I'd like to have only the first .slide-replacement shown when the slide is activated and then have that replaced with the second and third as the user moves forward in the presentation.

<section class="slide">
<header><h1>This is My Awesome Slide</h1></header>
<div class="slide-replacement">
First, you need to read this...
</div>
<div class="slide slide-replacement">
Second, you need to read this...
</div>
<div class="slide slide-replacement">
Lastly, you need to read this...
</div>
</section>

I'm not suggesting "slide-replacement" is a good default. I couldn't think of a good name to describe what I'm referring to.

Extension Suggestion: Table of Contents

I'm working on a one-hour presentation with DeckJS. Since it is quite long, I'd like to be able to give hints to the user of the overall plan.

It would be really great to be able to do something as I did in LateX: http://www.slideshare.net/vjeux/slides-8510637

Tags in order to tell where the (sub)sections are: <h1/2/3/4 class="toc">Name</hx>
Tag to display the Table of contents:
Some template that would display the table of content and current position on every slide.

embed deck into existing page

Is it possible to make the deck-container class be any sub-element, not just <body>?

deck.status assumes init is done on first slide

Pretty much exactly the same as #55, for status.

Capturing Too Many Key Presses

If a page has some interactive element that requires key-presses, like a textbox, deck.js intercepts those key-presses and changes slides. If some element has focus, it should be allowed to handle key-presses itself. Changing keys and using deck.navigation are workarounds, but neither are ideal.

Resizing Distorts Slides

Often when I give a presentation I don't know in advance if the projector is going to be 800x600, or 1600x1200, or anything inbetween. I don't know if there is any way of handling this cleanly, but the lack of resolution independence stops me using deck.js, or any other html presentation system, at the moment. Any ideas?

Better touch controls

This is a wide scoping issue in place covering any changes to extensions+core that provide better touch controls. May include:

Swiping to navigate
~~Pinching~~ Double tap to 'zoom out' to the slide menu
~~A touch only restyling of goto that makes more sense~~

Open to suggestions in the comments.

Goto Extension: CountNested

It would be very comfortable if the goto extension would provide a CountNested option as the status extension does.

I'm using deck.js for powerpoint-like presentations (it's awesome!) and the audience is seeing "page x/y", where x != the internal slide number if I'm using CountNested. If someone says "please show me page x again", I can't just use the goto extension and type in x. I must know the internal number of x which is uncomfortable.

Jumping forward via location.hash causes freak-out

Not a very clear bug title, but it's easy enough to demonstrate.

Go to the "Getting Started" guide here.
Open javascript console and type: location.hash = "#elements-images"

Replace the existing hash tag in the URL bar with #elements-images.

elements-images is just an example. It can be any div with the deck-after class, although it seems like the effect is more pronounced the further down in the deck it is.

Flash embeds do not show with certain transitions

Flash videos within iframes don't redraw when coming into view by way of CSS transitions on transforms. Any kind of redraw, such as a resize, shows the video. Would make sense since accelerated 3D transitions don't perform a traditional redraw. Need to investigate a general solution for this.

deck.menu focus/scrolling

Add a scheme of scrolling and focusing the current slide for decks with > 16 slides (or any amount that overflows the container.)

Slide count should show actual slide count.

The slide count currently shows the number of elements with the "slide" class, however I don't think this gives an accurate representation of the total number of slides. I feel that the total number of slides should be the number of elements with a "slide" class that are direct children of the body.

I've pushed a fix for this to my fork of the project if you'd like to look at it and let me know if I should issue a pull request.

transition: none also affects in-slide fades

using the fade: none transition effect in the demo on http://imakewebthings.github.com/deck.js/introduction/#extensions makes the bullet points stay "full color" as opposed to fading a little when the next bullet point is shown. Not sure if that's intentional, but I experience it as a bug.

Init throws an error when the slide selector doesn't match any elements

If you include no slides and fire up a deck you'll get an error:

Uncaught TypeError: Cannot call method 'parentsUntil' of undefined

Internally the error is caused by the slides array being empty while current is 0, giving undefined as the current slide when rearranging states.

Printable outline

Similar to S5, it'd be useful to be able to do a printable outline of the presentation.

ARIA audit

There are probably a number of aria-* attributes that could be utilized. Go through core and all the extensions and see what we can do.

From vick08 on Twitter:

I suggest aria-hidden=true on the offscreen content to prevent keyboard access to it.

Need an extension for Powerpath key bindings

The "Show PowerPoint Presentation with Shortcuts" section of http://www.shortcutworld.com/en/win/PowerPoint_2007.html has a great list. I don't know if all of them are possible, but note that there are six(!) different keys to get to the next page, and five to go back. You need at least space/backspace if you want to use a remote presentation control (it's basically a laser pointer with a two-key wireless keyboard). Also nice are the show/hide blank slide toggles for black and white screens (two key bindings for each) and hidden slides (which require a bit of work to set up in the deck, but are great for optional deep-dive slides). These shouldn't be too hard to do. I'd do it myself but I'm already too busy so I'm giving someone else a chance to be the hero.

The movie in the introduction restarts when changing slides.

First starting the movie on slide 15 in introduction/index.html and then pausing it and progressing to the next slide causes the movie to restart. As we are on a different slide now it is not possible to see the movie but the sound is still played.

This was on Firefox 6.0, Ubuntu 11.04, 32-bit.

class = "on-slide-5 #{slide_id}"

I really like how the intro presentation walks through the HTML by highlighting different parts of it:

http://imakewebthings.github.com/deck.js/#css-role

and I'd like to use that technique on my own presentation.
What I can tell from the source is that the relevant code blocks are colored by the global slide-id class set on the body.
That is, the code block with class .example_current becomes red on the fifth slide from the css

 .on-slide-5 .example-current {
    color: #c00;
  }

Is there any way we could add the current slide's custom ID to the body class as well?
Or is there another way I can implement this functionality without relying on the actual slide ordering?

iframe with own modernizr is crashing the slides

When I include in a

via iframe a HTML document, that comes with modernizr, chrome isnt starting in the first slide. it is starting with the selection with the iframe.
Firefox works great.

When I delete modernizr in my iframe document, everything is fine.

Introduction isn't simple enough

I am a bit embarrassed to write this, but the introduction isn't simple enough for me.

In particular, I can't seem to pick all the 'theme selector' stuff out of it. My quick attempts at hacks seem to just make a mess in various different ways.

A simple minimal example would be much appreciated.

Example presentation doesn't animate on Firefox 6

Given that both jQuery and CSS transitions are implemented by Firefox 6, the fact that the example presentation only animated for me on Chrome and Opera implies that you are using CSS transitions and only bothered to use the -webkit- and -o- prefixed versions.

Internet Explorer 10 will also be gaining support for them with the -ms- prefix according to caniuse.com

Given how many demos I've seen lately which are written to act as if all non-webkit engines are as backwards and behind and Internet Explorer 8, you really don't want to be doing that. You run a serious risk of developers who favor Firefox (or just developers who value graceful degradation highly) taking one look, dismissing you as a webkit snob, and looking for another offering.

I know I do something similar with any site that relies on JS to apply its CSS enough that a NoScript-modified first impression involves content overlapping unreadably, the page looking like it HAS no stylesheets, or a major UI element missing without even a notice that JS is necessary for full functionality... though in my case, the "If they didn't even think of that, who knows what other sloppy design/coding decisions they made" argument is a little stronger.

Add a feature to go through slides automatically, based on a timer

It will be great to have an option to let slides advance automatically, based on a timer. Sometime you want to let a presentation to show unattended, on a booth by example. Another usage will be to display a presentation on a web site, for visitors. Some will not get or not like to have to go through by clicking for each step.

What I think is needed for this type of feature is:

Be able to define a time in seconds for each depth of slides: you want to go through a list faster than between slides
Eventually be able to overload the time for a specific slide. Useful for the last slide of large ones
Have an option to cycle, means to go to the first slide after the last one.

Thanks a lot for your great job.

Allow slide selection from the slide menu

From #13:

I think the menu view should let the user just touch a slide to go to it. I'm going to break that out into a separate issue issue though, since I think the same thing for mouse clicks would be beneficial.

Do not show transition effect on start

Hello, as you know we are doing an IDE for deck.js at http://flips.io/

Currently we are adding a live edit feature which immediately displays the rendered slide on the preview window as one types the HTML, but it ain't pretty because always when slideshow is rendered the transition is triggered.

We tried removing the transition CSS for the time of rendering, but the transition is shown right after when the CSS is put back to the DOM.

Print slides, or save them as PDF

It would be very useful to be able to generate hardcopies of the presentation, as people often request this after a seminar/conference (as useless as slides may be on their own ...)

Slides do not resize to fit display/browser

One nice feature of PowerPoint and Keynote is that the slides are displayed as designed, and do not change depending on the screen size. This can be an issue when connecting to a projector which changes the resolution of the display.

Chrome - Slides disappearing and strange artifacts with >= 10 slides

Hello,

I'm working on a HTML presentation with DeckJS and I'm facing an issue with Chrome

http://vjeux.github.com/jsCollaborativePresentation/#title-slide

Chrome 13.0.782.215 m

If you refresh the page on a slide. The particular slide will be blank after reload.
Also, if you refresh on the first slide and move forward. After the slide 10 they stop appearing correctly, there are many artifacts.

Chrome 15.0.865.0 canary

If you refresh the page on a slide. If you move around, you will see that many slides appear on the page, displaced ...

However it works perfectly fine on Firefox, therefore I don't know if it's a bug you can fix.

Those strange artifacts appear to happen when I put more than 10 slides. It does not seem to be a markup problem as they work perfectly when the slides are alone.

Hierarchical HTML and deck.menu

I can't get deck.menu to work with a hierarchical structure I have. I have a hierarchical structure because I'm trying to maintain semantic meaning to my HTML. Here's what I have...

<article>
    <section>
        <header class="slide">
        <section class="slide">
        <footer class="slide">

I was able to massage deck.js to work with this structure (just tweaking CSS), but deck.menu doesn't want to work, even after tweaking the CSS. Initially, the slides weren't sized at all. After tweaking CSS, I got them to scale down, but not all of them show up (by a long shot) and they don't render in the nice grid structure they should. Any ideas?

Multiple slide transitions?

What is the best way to mix slide transitions? For example, have top level slides transition horizontally, but have sub-slides fade in?

Disable touch device swiping?

How can I prevent swiping between slides on touch devices?

I only want to switch between slides using previous/next links (enabled using deck.navigation).

<pre> tag and slide class don't play nice

Adding class="slide" breaks the shadow on

in every browser I've tried. I'm looking through the CSS to try and figure something out. No luck!

Make deck.change event defaultPreventable

If event.preventDefault() is called within a deck.change event, the slide should not change.

understanding deck.js demo (http://imakewebthings.github.com/deck.js/)

I discoveded deck.js some days ago and I was fascinated by it.
I read carefully deck.js html source (or, at least, I think so).
Unfortunately, I was not able to understand how the transition from one slide to another occours.
For example, how go from http://imakewebthings.github.com/deck.js/#slides-html slide to http://imakewebthings.github.com/deck.js/#slide-states slide?
The two successive slides are identified by two different ids in html source code (slide-html and slide-states) but I miss how text is placed or hidden (or colored!) to the screen according to them. I suppose that somewhere there is a (ordered) list of ids which defines transition between slides with the help of a css file, but I'm not sure...
Can you help me?
Thank you.

Links don't work with fade transition

On http://imakewebthings.github.com/deck.js/introduction/#extension-folders the "documentation" link is not clickable when the transition theme is set to "Fade". This happens to me on Firefox 6.0.2 and Chrome 15.0.874.5 (both Linux).
The style theme does not seem to influence this problem and all other transition themes are not affected. Also the same link on the last page works perfectly even with fade transitions.

deck.hash id assignments are not reinit proof

deck.hash assigns ids to elements without them on init. If init is called again after deck contents have shifted around or been added/removed, the old ids are kept around. Try setting a flag on the element data to indicate if the id was assigned and check it during assignment.

Another print version

I would like to have a feature, where i can press a key and get a version of the presentation, which I can print. Or at least a CSS-File, which can be used, if I want to print the slides. For example, print 6 slides per page (2 columns and 3 rows).

Update deck.navigation links on deck.change

The links are currently just empty hashes. Would be nice to make them point to real ids.

AJAX loading of slides

Create an extension for loading in slides asynchronously and adding them to the deck. ~~Will~~ Might require at least an add method in core, and should also give configurable options for linking between slides. Preferably such that it degrades into plain old linked pages.

deck.goto should accept slide ids

Slide indexes are ok, but the API should also accept slide ids. Same goes for the input on the UI side.

Update modules to accept an array of keycodes for keybindings

I see no good reason why letting people define multiple keys for an action should be prevented.

CSS transform issue

This CSS:

-webkit-transform: translate3d(0, -50%, 0);

Is causing red borders to be drawn around things in chromium on ubuntu for me. It'd be nice to not have this type of thing in core files like deck.core.css and let themes use finicky experimental css features if they want. For now I have to have my theme / custom css set these all to none !important

imakewebthings / deck.js Goto Github PK

deck.js's People

Contributors

Stargazers

Watchers

Forkers

deck.js's Issues

Chrome 13.0.782.215 m

Chrome 15.0.865.0 canary

Recommend Projects

Recommend Topics

Recommend Org

Jobs