search

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.
http://impress.js.org
MIT License
37.62k stars 6.67k forks source link

Bug in GettingStarted. #860

Closed MagnusMG closed 10 months ago

MagnusMG commented 1 year ago

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" />
janishutz commented 1 year ago

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

janishutz commented 1 year ago

@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

janishutz commented 1 year ago

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

henrikingo commented 10 months ago

This seems to now be mentioned in GettingStarted.md

GraffL commented 4 months ago

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).

janishutz commented 4 months ago

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.