auto-resizing doesn't work when `active` class is used anythere on a page

[jenil]

Hey!
I am trying to get started with impress.js, like we have on the demo gh-page of impress.js, whenever we resize the width of the page, the step automagically fits into the current width.
This is not working on a project I have been trying. However, if i resize, then reload the page, it fits in that viewport.
Anybody knows what's the issue?

[bartaz]

It would be hard to guess without any example to look at.

[jenil]

Hey,
There you go! http://www.jgog.in/lab/jg
Go to the second step, and resize the width of the browser, the step doesnt automatically scale down.

[bartaz]

Ok, I found it.

Impress.js uses active class to mark current slide (and resize it when screen resizes).
You are using active class in your navigation, too. So impress.js is taking element from your navigation instead of the active slide.

That's a bug in impress.js obviously (I shouldn't assume that you won't use active class anywhere else).
But at this point, to workaround that you would need to change the name of the class you use in navigation to something alse then active.

You can also find a line api.goto(document.querySelector(".active"), 500); in impress.js code (should be line 792) and change it to api.goto(document.querySelector(".step.active"), 500);. So only steps with active class will be taken into consideration.

[jenil]

Its worked! Thanks!