I'm struggling with preparing a presentation that will look equally good in different screen resolutions and aspect ratios.

One possibility to achieve that would be using 'em' units for step offsets (data-x, data-y). Then I could use media queries to set body's font-size in pixels for each resolution range. Unfortunately impress.js is bound to pixels at the moment.

Please let me know if I missed something here. How you currently deal with different types of projectors and screens?

What type of support gaps are we looking at for IE/Opera? Can we get impress to retain the original layout, sans animations for IE?

The things we do to achieve production quality...

So, we want to iFrame impress on our homepage.

Navigation is an issue though, as you have to click in the iframe to activate keyboard controls, and keyboard controls in general are not ideal for the casual visitors that we are trying to impress (pun intended).

Is there some type of boolean we can check to turn on advance on click? (also, hovering forward/back navigation buttons would be nice)

There should be a possibility to attach custom listeners to various events triggered by impress.js such as step changes, entering step, leaving step, etc.

Please put your event suggestions in comments.

Just noticed that the "and tiny ideas" text is floating around for the whole presentation. You can see it in tiny move throughout the presentation if you follow it closely.

Adding nowrap css to a step will make it go out of screen.
Expected: have impress focus properly so that the whole step fits into view.

example:

<div id="bored" class="step slide" data-x="-1000" data-y="-1500" style='white-space: nowrap;'>
        <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
</div>

expected:
all text, in a single line, fits into view

It would be awesome to have speaker notes with a presentation.

Most HTML5-engines for presentations now support exporting to PDF (to share at slideshare or a similar sites), I'd like to have one here too. I don't know the real importance of it, you decide).

At least, it'd be cool to have the easy-to-share single file with pages, images and stuff included inside.

_{....Or, it'd be cool to have a hosting to share not only PDF, but also HTML5 Presentations....}

Tried text-shadow:0px -1px #5d6067; it didn't rendered, while without jmpress everything works properly. Any solutions?

Hi

i have used impress.js for a presentation and added some features. I like to contribute these to the official project, but i have not used github until now. I was able to add the features in my own fork.

The main features added are: Nested steps and Templates. See my readme for more details.

https://github.com/sokra/impress.js
Also see examle at: http://sokra.github.com/impress.js

I would be happy if i could contribute to this great project.

It would be great if there was an integrated way to have presenter notes in an impress.js presentation. I've seen this in other JS-based slide frameworks. Usually there is a hotkey for showing the presenter notes, then they can be viewed and edited. Since this is all browser based, using local storage databases would allow you to keep them, yet make them personal to each person loading them up.

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?

you can git it here: https://github.com/samphippen/impress.js
or see it here: http://samphippen.github.com/impress.js/most_dangerous_game.html

I'd love to see Impress offer a simple event which fires when a slide is loaded. I can see many reasons for this such as animating a graph when it's parent slide appears in the view frame.

Is there something like this already? Am I just missing it?

First - extremely impressed by your work! Though, the arrows might not be perfectly intuitive for everyone. Clicking neither. Adding Scroll to the ways of navigating would be a huge plus, and it shouldn't be too difficult using Scrolldeck (http://johnpolacek.github.com/scrolldeck.js/) or something like that.

The #overview "slide" lends itself to extend the purely linear navigation with a bit of non-linear navigation, which would be quite useful to go back to certain slides. The idea being that there's some way to jump to the overview, from any slide, and a click on any slide would go to that one (instead of only links linking to slides).

On the implementation side, the first part could be handled by pressing Escape. The keydown handler would deal with that:

case 27:   // escape
                     next = $("#overview");
                     break;

The surrounding if block also needs to accept the 27 keyCode.

The other half would be dealt with in the click handler. Implementing that would go in quite a different direction from what its currently doing, so I'm not going there before there's some review or discussion.

What do you think?

It would be great to be able to jump to a particular step. Perhaps a hotkey to open a very small textbox where you could specify either a slide number or the id of the slide your would like to go to.

Just to fork the discussion about API in #9 this issue is about providing additional 'extended' API with functions useful for authoring tools to build impress.js presentations.

For sure there is a need to manipulate the position of the 'camera' (transform of the canvas), ability to change the position, scale and rotation of steps, maybe dynamically adding steps, etc...

Please comment if you have any suggestions. Feedback from anyone already trying to build an authoring tools is more than welcome :)

Implies that you should be able to bookmark to a certain section of the presentation by #anchor as well!

I love the library, you've done some really awesome work here.

However, I'm having a hard-to-reproduce issue with a presentation where a large number of the elements on screen stop rendering; possibly in order from the top (the first to go is invariably the background gradient).

This happens:
i) Only when the window size is above a certain point (I can resize the window to have the elements reappear)
ii) Only if there are a certain number of elements in the document (I can hide steps until everything else starts appearing)
iii) Only if there are a certain number of elements in the window (my first step is scaled to show everything on the window, but the background redraws once I navigate to another step and only a small proportion of the elements are onscreen).
iv) But the browser can definitely cope with rendering this number of elements: if I zoom out (in the browser) from one of those subsequent steps to put all the elements back in view, they render just fine.

I've made substantial use of SVG elements. So there's that.

I've reproduced with Chrome 18.0.1025.11 and 19.0.1042.0 across two Windows machines, but also had it working fine on a third machine and also on a Mac in Chrome + Safari. It also renders fine in Firefox.

I'm unsure if this is a webkit-windows bug or something with impress.js? Has anyone else encountered this? I did think there might be a canvas element limit, but that doesn't make sense if I can zoom out and see all of the elements.

I'll try to demonstrate a test case, but I need to anonymise my document first.

Awesome presentation framework.

I thought it'll be nice to be able to use a phone as a remote for the slides. This is my attempt at it -> https://github.com/ericduran/impressRemote not the greatest but it works.

I used socket.io to broadcast the slide changes across all clients.

This is also pretty cool if someone is listening in on a remote presentation as it'll allow the slides to be controlled for all clients.

When i create slide like that :

<div id="its" class="step" data-x="0" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
    <p>and <b>tiny</b> ideas</p>
</div>

<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
    <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>

<div id="its" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
    <p>and <b>tiny</b> ideas</p>
</div>

The third "page" is never displayed but the first is displayed and I have a loop between page 1 and 2.

Can you add a other parameter (like number) to sort the slides ?

This will be so much better still once it gets some touch event support added in, so mobile browsers user are not left out in the cold.

The current first two slides (which are all you can squint at on, say, an iPhone) currently produce the wrong kind of reaction to an iOS visitor, for instance. Presentations in modern browsers also includes modern devices, and a traditional limit of old-style presentations has been this strong "desktop" dependency.

I think implementation-wise it could be as simple as a touchstart handler which does "next" for right-half-of-viewport clicks and "previous" for left ditto, but even something crude that just does "next" only without conditional logic would improve this a lot.

I have tested it in my ipad and it doesn't work... Ipad is with safari in it... Anyone have an idea on that ?

When we try to compile javascript file with Google Closure Compiler, it gives a JSC_TRAILING_COMMA error.

I checked it on http://closure-compiler.appspot.com/ and had these errors:

Number of errors: 2

JSC_TRAILING_COMMA: Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays will have the wrong length and objects will not parse at all. at line 198 character 13 in impress.js
},
^
JSC_TRAILING_COMMA: Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays will have the wrong length and objects will not parse at all. at line 203 character 13 in impress.js
},
^

In fact, these are not trailing commas and we don't care old IEs, but it's bad not to be able to use Closure compiler because of this error.

It is a problem in Google Chrome, AFAIK the 3D support does not work well on my X201i with Debian. However, running chromium with --ignore-gpu-blacklist works.

Are there any way to detect 3D support for Google Chrome/Chromium in this case?

i think it is very useful to scale the whole presentations, so that it adjust to different screen resolutions.
i just did something like that:
var db = document.body;
var sx = db.clientWidth / window.innerWidth;
var sy = db.clientHeight / window.innerHeight;
window_scale_factor = (1/Math.max(sx, sy));

and then added the window_scale_factor as a factor to this function in your code:

        css(root, {
            // to keep the perspective look similar for different scales
            // we need to 'scale' the perspective, too
            perspective: step.scale * 1000 + "px",
            transform: scale(target.scale*window_scale_factor),
            transitionDuration: duration,
            transitionDelay: (zoomin ? "500ms" : "0ms")
        });

Hi

This is the first time I've contributed to a GitHub project so I hope that I've done this properly. Apologies if I haven't.

I've created a fork 'gloocomms' that adds a 'skip to slide' function — in my opinion one of the biggest gaps in Prezi.

Simply add a normal link to the html, eg. Skip. Replacing # with the slide number. Obviously you could style these appropriately.

Next step would be to allow relative links, like forward two slides, as well as absolute. I'll have a look at this later if I get a chance.

John

Hiya,

I have a video tag with the autoplay attribute set to true and the framework render the video but it starts stopped.

 <section class="step container" data-x="0" data-y="0">
        <video autoplay>
            <source id="coverVideo" src="videos/FlowsCover.mp4" type='video/mp4'/>
        </video>
    </section>

If I move this code to a section outside the "impress" div, it works fine.

Best,
Iban

Someone already tried using impress.js with google-code-prettify?
I don't think it works propery... It would be nice if impress.js + google-code-prettify work fine!

I don't know if this is related to browsers or impress, but it seems that steps with non-null data-rotate-y attribute get dispropotionate when unzooming...

see here: http://delaaxe.github.com/impress.js/#/overview

could we find a workaround for this?

It would be very nice to be able to register callbacks to get called when a slide changes (as that's the only real event that happens).

There seems to be a somewhat annoying "hickup" or "lag" in the - more or less - exact middle of each transition between any 2 steps.
It makes no difference how many steps there are or what there size/position is.

Unfortunately it is hard to describe. I activated the FPS-Meter in chrome for gpu accelerated content and there are 2 drops to 0 FPS for each step.
The first drops occures on keypress (which is ok since nothing is rendered). But the second one hits 0 for a few milliseconds exactly when the transition seems to be 50% finished. Just like a full stop of the "animation" after which it resumes normally. This kills the overall smoothness of transitions.

As stated above this is reproducable with any step setup that I tried (even in the demo) - on 3 different machines.

At first i almost didn't notice it but now that I'm paying attention to this, it is starting to bug me.

Maybe someone else noticed this too?

Edit: Screenshot of FPS-Meter (tiny and ugly :D )
http://oi43.tinypic.com/2m2w9y1.jpg

When i create a link on a slide with data-z <=-3000, link doesn't work.

div class="step" ddata-x="2500" data-y="-7500" data-rotate="40" data-z="-3100" data-scale="3">
a href="http://www.google.Fr">Example
/div>

Hello, I don't know if I must post here what I want to share, but I made a little change on resizing of the the DIVs when they are bigger than the screen size

so I use this two functions for calculate the size of the window and the size of the element you want (in this case, are the DIVs)

var windowSize = function(){
    var w = 0;
    var h = 0;
    if(!window.innerWidth){
        if(!(document.documentElement.clientWidth == 0)){
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
        }else{
            w = document.body.clientWidth;
            h = document.body.clientHeight;
        }
    }else{
        w = window.innerWidth;
        h = window.innerHeight;
    }
    return {width:w,height:h};
}

var objectPosition = function(obj) {
    var curleft = 0;
    var curtop = 0;
    var height = obj.offsetHeight;
    var width  = obj.offsetWidth;
    if (obj.offsetParent){
        do {
            curleft += (obj.offsetLeft || 0);
            curtop  += (obj.offsetTop || 0);
        } while (obj = obj.offsetParent);
    }
    return { left: curleft, top: curtop, width: width, height: height };
}

with these functions I calculate an interval for resizement

so I replace the definition of the "var target = { rotate: {}, scale: {}, translate:{} }" with these lines...

var textHeight   = objectPosition(el).height;
var windowHeight = windowSize().height;
var interval = (textHeight > windowHeight) ? windowHeight / textHeight : 1;
    
var target = {
    rotate: {
        x: -parseInt(step.rotate.x, 10),
        y: -parseInt(step.rotate.y, 10),
        z: -parseInt(step.rotate.z, 10)
    },
    scale: {
        x: (1 / parseFloat(step.scale.x)) * interval,
        y: (1 / parseFloat(step.scale.y)) * interval,
        z: 1 / parseFloat(step.scale.z)
    },
    translate: {
        x: -step.translate.x,
        y: -step.translate.y,
        z: -step.translate.z
    }
};

I think the windowSize() and objectPosition() are not necessary but I used them for fixing it faster...

Here you can see what I changed http://herson.byethost11.com/impress.js/
If you see the slide number 2, the text is very long and It fits now on the screen

I am this guy... https://twitter.com/#!/HersonHN

As it is (at least on Safari Mac), the page starts out in some kind of random middle space and then animates to the 1st slide. Instead, it should just start on the 1st slide.

Hey there,

I would like to see "substeps". I don't know how to call those properly, I give a little description:

Imagine you have your presentation with some slides/steps. Now on one slide you have a list and you want to fly in the list items one-by-one each by a arrow right keystroke. I tried it that way:

<ul>
<li class="step">Item 1</li>
<li class="step">Item 2</li>
</ul>

It didn't worked, of course I didn't expected that. But would be cool to have something like that.

Thanks very much.

The positioning of the text for the slide "and tiny ideas" is not well determined (at least on Safari for Mac OS X Lion).
For instance, it can be spotted:

• on the right of the line "* no rhyme intended".
• above the word ideas in the following slide.
• inside the word "rotating".
• below the word "imagination".
• on the left of the Yoda character…
  and so on. So it is not fixed to the canvas, nor to the screen; it is floating "randomly".

Hi, I've just found such a cool thing, thanks for your creative project.

After viewing the source, I tried to modify it for a different appearance. The first one I though about is, like many others, a cube. Here is the code:

<div id="front"
    class="step slide"
    data-x="0" data-y="0" data-z="500"
    data-rotate-x="0" data-rotate-y="0" data-rotate-z="0">
    <q><b>front</b></q>
</div>

<div id="right"
    class="step slide"
    data-x="500" data-y="0" data-z="0"
    data-rotate-x="0" data-rotate-y="90" data-rotate-z="0">
    <q><b>right</b></q>
</div>

<div id="back"
    class="step slide"
    data-x="0" data-y="0" data-z="-500"
    data-rotate-x="0" data-rotate-y="180" data-rotate-z="0">
    <q><b>back</b></q>
</div>

<div id="left"
    class="step slide"
    data-x="-500" data-y="0" data-z="0"
    data-rotate-x="0" data-rotate-y="270" data-rotate-z="0">
    <q><b>left</b></q>
</div>

<div id="bottom"
    class="step slide"
    data-x="0" data-y="500" data-z="0"
    data-rotate-x="0" data-rotate-y="270" data-rotate-z="90">
    <q>This should be the <b>bottom</b>, but there's something wrong</q>
</div>

As was written in the slide, the bottom is actually NOT the bottom of the cube, ---it just stand up there, everything will leak from this bottom...

The appearance of this bottom, after some trying and calculation, is actually a rotate around the x-axis, if we modify the #bottom step into

<div id="bottom"
    class="step slide"
    data-x="0" data-y="500" data-z="0"
    data-rotate-x="-90" data-rotate-y="270" data-rotate-z="0">
    <q>This one should <strong>not</strong> be the same as the <b>bottom</b></q>
</div>

we'll get a ``cube'' just the same as the first one. So it is clearly that there's something wrong when rotating.

BTW, if I want to rotate something in a certain direction, after 360 degrees it should back to normal, but impress.js will rotate it back 360 degrees for the normal direction. Is there anyway to rotate something in a more natural way?

After all, it's so cool!

is there any way to add a video to a presentation, I have tried to add a couple diffrent html5 players and none of them work, any ideas?

Thanks

impress.js should provide public API with methods that will allow triggering transitions between slides.

Proposed API methods:

• next()
• prev()
• goTo( step )

If you think any other method may be useful, just let me know in comments.

Hi there Bartaz

I'm sorry to raise an issue; I actually wanted to send you a message; however unfortunately it seems I can't create a Pull request with just a message, and you've locked it down you I can't send you a message personally.

But, anyway, I didn't want to go and use your code without at least thanking you ^_^;;

I found it quite easy to play around with and extend with my own hacky code to get something simple working. I suspect that older browsers lacking CSS support may well be an issue for some; thankfully it's not really an issue for me as I was trying to use it to create a screencast-style video.

I'm not sure if you had screencasts in mind when you wrote this, but to be honest it turns out pretty well. If you're interested in checking out my (probably very amateur) first attempt you can see it here.

So, thank you for sharing project, it's really looking very nice!

I love it!

Perhaps out of the scope of this library, but I figured I'd file it here nonetheless: in order for this to be useful for more than a few people, you need some sort of authoring tool for these kinds of presentations, such as what Prezi has, or my own Infinite Canvas tool from several years ago:

http://infinitecanvas.jgate.de/create?name=Brad%27s%20Somber%20Mood

Any plans to do something like that, or are you leaving it to the community?

So I really like this tool, but I thought it'd be cool to be able to position elements on the canvas but not have them as slides - i.e. you only view them when zooming/moving etc. I implemented this functionality by including a new attribute: data-exclude="true" (defaults to false if not present so it doesn't break existing code).

<div id="its" class="step" **data-exclude="true"** data-x="850" data-y="0" data-rotate="90" data-scale="5">

And I filter the steps right before the select method is set, insert @ line 180:

var tempSteps = [];
for (var i = 0; i < steps.length; i++)
{
  if(!steps[i].dataset['exclude'] && true)
    tempSteps.push(steps[i]);
}    
steps = tempSteps; 

//make given step active

I didn't want to issue a pull request since this is a new feature, and I'm not sure what the design/style of this js file will be, I can issue one if you'd like.

This is just a random idea; take it FWIW. I also realize now it's very similar to #7. Feel free to close.

In looking at the example index.html file, I really like that one can just layout the content in sequence. But one notable limitation seems to be the requirement (?) to specify placement.

Would it not be possible to have the content laid out on the page automatically, using javascript, perhaps with configurable layout algorithms?

So, for sake of argument, perhaps one algorithm might say:

• the first "slide" gets centered on the page in somewhat larger or otherwise more prominent fonts
• other slides get organized around that center, and rendering can be tweaked with class attributes

On the second point, more structure to the actual source file (say using nested sections) could make this even more powerful. E.g. maybe sections get grouped first, and then subsections organized in relation to those groups.

A strawman example:

<!-- There are many ways to do this, but in the below illustration 
     example, we're using subsections to group related content, and
     then class attributes to give both semantic and rendering hints 
     that would allow the content to be automatically laid out on the 
     page. -->
<section>
  <section class="slide title">
    <h1>My Presentation Title</h1>
  </section>
  <section class="slide">
    <h1>Introduction</h1>
  </section>
  <section>
    <section class="slide title">
      <h1>My Presentation Title</h1>
    </section>
    <section class="slide">
      <h1>some content</h1>
    </section>
  </section>
</section>

In the demo, it's not clear how to advance. You should either explicitly mention hitting the space bar, or you should also allow clicking. him

A configuration step could be added so that the slide selector can be defined. This would allow for other definitions of what constitutes a slide. e.g. It would be useful to have the HTML5 section tag supported, so that rather than working with divs in a purely linear document, each section and (importantly) sub-section can become a slide. For example, see the structure of http://webf1.soc.port.ac.uk/2011/style/lecture/ ... it's a structurally nested document, but you can press escape to start the presentation and it works linearly. For education purposes having a doc that can be presented is invaluable - less writing is good! If I get time before someone else does I'll look into extracting the useful code and put in a pull request, but be my guest to run with the idea/request.

What would be especially nice if if the document structure could be somehow reflected using an automatic presentation structure, so that the document should have no extra markup beyond the script tag.

With Chromium 16.0.912.75 on Linux (Archlinux specifically, everything up-to-date):
When first time visiting the impress.js demo, the last 3D slide is fine. But on any subsequent visit, 3D will be broken. Same thing if I clone the latest master and view it locally. This is what is displayed:

I also tried to reproduce it on my other laptop (same setup). I first opened the impress.js demo, working fine. Then I opened another tab and opened impress.js demo, broken 3D. I then compared the source for both opened tabs. They were completely identical. This is some weird stuff.

It would be nice if css written in less. Then code would be much smaller. https://github.com/cloudhead/less.js

Thanks!