impress / impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Home Page:http://impress.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug in GettingStarted.

MagnusMG opened this issue · comments

I tried the Getting Started demo, and the code for index.html left me with a page that always showed the fallback message. After some head-scratching and comparison with the demo file I discovered that the impress-demo.css also has to be included:

<link href="css/impress-demo.css" rel="stylesheet" />		

I see what you mean. In the getting started guide I assumed that you also have the impress-common.css file. Therefore I‘ve completely omitted the CSS part in the guide to keep things short. In hindsight, it wasn’t a good idea.

I‘ll come up with a fix and will open a PR possibly tomorrow with a fix for it

PS: there‘s a tutorial on my YouTube channel where I cover the CSS part as well…
impress.js :: Tutorial - Part 1: The basics
https://youtu.be/fNZJa8Ro_ww

@MagnusMG Sorry for the delay, PR #861 is open now with the changes. I'd be happy if you could review the changes and give suggestions if needed

I am still awaiting this PR to be merged, as well as another massive one.

This seems to now be mentioned in GettingStarted.md

It seems to me like this issue has not really been resolved yet (at least I just stumbled over the exact same problem and it took me quite some time to realize what was going on):
I followed the Getting Strated guide and ended up with a presentation that always shows the "browser not supported"-message.

I think there was some misunderstanding in the above discussion as @MagnusMG initially (correctly) reported the problem as "The example in Getting Started fails to include impress-demo.css", but the following discussion (and subsequent pull request) was then about impress-common.css (which is already included in the example).

So, in my opinion the example code in the Getting Started Guide should just also include
<link rel="stylesheet" href="./css/impress-demo.css">

Alternativly, one could move
.impress-supported .fallback-message { display: none; }
from impress-demo.css to impress-common.css (as well as maybe some additional basic styling).


PS: As a side note: I find the text on the option without having to download anything a bit misleading as, of course, this only applies to the impress.js-file. One still has to download the css-files (or write them oneself from scratch).

Thank you for pointing this out. This is on my list for the big update that is coming probably towards the end of the year. I had already opened a PR that was declined.