Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Nested slides auto-advance issues #273

Closed
unnamedcrewman opened this issue Dec 10, 2012 · 6 comments
Closed

Nested slides auto-advance issues #273

unnamedcrewman opened this issue Dec 10, 2012 · 6 comments

Comments

@unnamedcrewman
Copy link

I'm having an issue with the new version of reveal.js and nested vertical slides. Using version 1 from some time in September, I was using the following code for nested slides:

<section>
    <h1>Topic Title</h1>
        <section>
            <h2>Slide 01 Title</h2>
            // cool slide content here (lists, etc.)
        </section>

        <section>
            <h2>Slide 02 Title</h2>
            // cool slide content here (lists, etc.)
        </section>
</section>

I tweaked the css a bit so everything fit just right, but what resulted was that the "Topic Title" appeared on every page as a kind of stationary header, and the nested slides would roll in vertically upon the normal up/down key presses. Advancing to the right would move on to a new topic title.

For some reason, with version 2, I get pretty much the same behavior, except that all of the nested slides immediately start to advance automatically and can't be stopped. In other words, as soon as I advance to a particular "Topic Title", the vertically nested slides underneath begin to auto-advance in a kind of slideshow mode.

I've found that as soon as I remove the <h1>Topic Title</h1> line, everything goes back to normal, and the nested slides work as expected. I've also noticed that if I replace the <h1>Topic Title</h1> line with text that has no html tags, the nested slides work as expected also. I've tried lines with

tags, and

tags, and as soon as there is html, the auto-advance issue starts again.

I'm ok with HTML and CSS (barely), but my JS chops are worse than weak. Could someone give me an idea about where to look in the code to see why a line with HTML such as <h1>Topic Title</h1> is causing the auto-advance issue?

@hakimel
Copy link
Owner

hakimel commented Dec 27, 2012

Not sure what's happening there, there are only two ways to trigger the auto-advance mode. Do either of the following apply to your presentation?

  1. Passing in an autoSlide value to the Reveal.initialize() method.
  2. Specifying a data-autoslide attribute on any given <section> element.

@unnamedcrewman
Copy link
Author

Thanks a lot for the answer. I have not made either of the changes that you have suggested. However, in doing some further checking, I've narrowed the problem to something else. I was adding some attributes to the <section> tags, IDs in particular (<section class="level2" id="nested-slide-one">) which I didn't include in my sample code (newbie error, sorry).

Adding these IDs seemed to work fine with the earlier version of Reveal that I was using, but now they are causing the auto advance issue. Any nested slides that have an ID automatically advance, and any slides without an ID function as normal. I'm still not sure why the behavior has changed, but if it is intentional, I'll just stop adding the IDs.

Thanks again for your help.

@hakimel
Copy link
Owner

hakimel commented Dec 30, 2012

ID's should not make slides auto-advance so if they are, that's a bug. I'm
away travelling right now and don't have access to a computer but will test
in a few days.

On Sunday, December 30, 2012, unnamedcrewman wrote:

Thanks a lot for the answer. I have not made either of the changes that
you have suggested. However, in doing some further checking, I've narrowed
the problem to something else. I was adding some attributes to the

tags, IDs in particular (
) which I didn't include in my sample code (newbie error, sorry).

Adding these IDs seemed to work fine with the earlier version of Reveal
that I was using, but now they are causing the auto advance issue. Any
nested slides that have an ID automatically advance, and any slides without
an ID function as normal. I'm still not sure why the behavior has changed,
but if it is intentional, I'll just stop adding the IDs.

Thanks again for your help.


Reply to this email directly or view it on GitHubhttps://github.com//issues/273#issuecomment-11765097.

@unnamedcrewman
Copy link
Author

Thanks for the follow-up. I've refined my testing once again, and I have isolated the problem further. On a clean instance of Reveal, I modified the nested slide sample section of index.html by:

  • adding a single line of html (<h1>Offensive HTML</h1>)
  • adding IDs to each of the nested sections.

The "auto-advance" issue only occurs for nested slides, when both modifications are present.

I have no problems when:

  • <h1>Offensive HTML</h1> is commented out, but IDs remain,
  • IDs are removed, but <h1>Offensive HTML</h1> remains.

Problem Code

    <!-- Example of nested vertical slides -->
    <section>
        <h1>Offensive HTML</h1>
        <section id="bad-id-one">
            <h2>Vertical Slides</h2>
            <p>
                Slides can be nested inside of other slides,
                try pressing <a href="#" class="navigate-down">down</a>.
            </p>
            <a href="#" class="image navigate-down">
                <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
            </a>
        </section>
        <section id="bad-id-two">
            <h2>Basement Level 1</h2>
            <p>Press down or up to navigate.</p>
        </section>
        <section id="bad-id-three">
            <h2>Basement Level 2</h2>
            <p>Cornify</p>
            <a class="test" href="http://cornify.com">
                <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
            </a>
        </section>
        <section id="bad-id-four">
            <h2>Basement Level 3</h2>
            <p>That's it, time to go back up.</p>
            <a href="#/2" class="image">
                <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
            </a>
        </section>
    </section>

@hakimel hakimel closed this as completed in 68f8c93 Jan 2, 2013
@hakimel
Copy link
Owner

hakimel commented Jan 2, 2013

Thanks for looking into it further. The issue has been fixed. Sections with ID's are added to the URL as "named links", but internally those names are still converted to numerical indices. That conversion process got offset by one vertically since there was an extra element in the stacks .children list (the h1). That's what lead to the automated auto-advance.

@unnamedcrewman
Copy link
Author

I sure appreciate the support on this, the fix seems to work for me. I realize mine is probably an edge case, but I had a system going and hated to leave it behind.

enovajuan pushed a commit to enovajuan/reveal.js that referenced this issue Dec 2, 2014
vvscode added a commit to vvscode/js--xmind-2-reveal that referenced this issue Sep 25, 2017
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants