Best way to handle Reveal JS slide overflow

Question

I am working on a project for which I use Reveal JS to present data to users as slides.

Sometimes I find that the text overflows beyond the viewport.

Due to which the text is not displayed, as shown in this image http://i.stack.imgur.com/TWOaO.png

I tried to reduce the dynamic size of the text based on the height of the screen, for example:

var $present_section = $('section.present');
var section_bottom = $present_section.offset().top + $present_section.height();
var allowed_height = $(document).height() - $present_section.offset().top;

if (section_bottom > allowed_height) {
    var cur_font_size = parseInt($present_section.css('font-size'));
    $present_section.css('font-size', cur_font_size - 1);
}

running this code in a recursive loop will adjust the font size <section>to adjust the height of the document.

Is there a better way or plugin to solve this problem without reducing the number of characters on the slide?

Answer 1

CSS scrollable-slide:

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}

, CSS , . jQuery.

function resetSlideScrolling(slide) {
    $(slide).removeClass('scrollable-slide');
}

function handleSlideScrolling(slide) {
    if ($(slide).height() >= 800) {
        $(slide).addClass('scrollable-slide');
    }
}

Reveal.addEventListener('ready', function (event) {
    handleSlideScrolling(event.currentSlide);
});

Reveal.addEventListener('slidechanged', function (event) {
    resetSlideScrolling(event.previousSlide)
    handleSlideScrolling(event.currentSlide);
});

box-shadow background, , CSS:

.scrollable-slide::before {
    background: none !important;
}

.scrollable-slide::after {
    box-shadow: none !important;
}

:

• - JS - API
• SO - JS - CSS