smallseo.info

reveal.js

The HTML Presentation Framework reveal.js - The HTML Presentation Framework a framework for easily creating beautiful presentations using html

Tables and div elements are not centred in reveal.js

If I add the following slide into the default presentation provided by reveal.js, then the table is not centred.

  <section>
  <p>This is centred</p>

  <table>
    <tr>
      <td>This</td>
      <td>is</td>
      <td>not</td>
    </tr>
  </table>
  </section>

enter image description here

I can fix it by adding in padding, but this then becomes dependent on the screen size, and I am worried that when I go to present the screen will be a different size. There must be a better way?


Source: (StackOverflow)

Level 1 and level 2 slides in reveal.js using pandoc

I am generating a slideshow in markdown to be converted by pandoc into html (with pandoc -s -S -t revealjs test.md -o test.html).

The reveal.js framework allows a 2D setup: grouping of slides within slide subsets "vertically", and grouping of the slide subsets horizontally. In markdown, it can be achieved like this:

# Head1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

This generates the expected output. The result has four slides, arranged as follows:

[  Head 1 ] [ Head 2 ]
[ Below 1 ]
[ Below 2 ]

However, I would like to have some further content in the "Head 1" slide. This is possible in reveal.js, but the following markdown is not correctly processed by pandoc:

# Head1

Head text 1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

Because the slide level becomes 1 rather than 2, instead of four slides, I get two (one for each level 1 header). I can force the slide level to be 2 using an option to pandoc:

pandoc -s -S -t revealjs test.md -o test.html --slide-level 2

but then I get the first arrangement again -- loosing any content that was directly under "Head 1".

Any thoughts?


Source: (StackOverflow)

How to style images in reveal.js?

I am now trying to put transparent png image in reveal.js as:

<div class="slides">
    <section>
        <img src="sample.png">
        <p>sample image</p>
    </section>
</div>

where figure "sample.png" is follows.

enter image description here

However, there are:

  • white lines appear at the boundary of the figure
  • and the figure is not prefect transparent. (contains some white color?)

How can we remove it?

enter image description here


Source: (StackOverflow)

Place background image in bottom corner of every slide of reveal.js

Is there a way to place an image (e.g. a logo) on the bottom right corner of every slide in a reveal.js presentation?

Even better if there is a way in ox-reveal(the reveal.js export mode for emacs org-mode)


Source: (StackOverflow)

Prevent reveal.js to zoom

I'm using reveal.js to present screenshots, but the images are not displayed at size 100%.
My bet is that there is a «zoom» trick, as the inspector shows:

<div class="slides" style="-snip- zoom: 0.5001428571428572;">

But that I can't prevent it to occur. Is there a configuration option, a js hack for this?

Here is a slide where I'd like my 800×600 image to display 800×600: http://profgra.org/lycee/presentation_demo.html#/2

Thanks!


Source: (StackOverflow)

Reveal.js multiplexing doesn't work

I followed the examples at the following link: https://github.com/hakimel/reveal.js#multiplexing, but somehow the multiplexing doesn't work -- the clients don't update when the master slide updates. I've tried it with both the reveal.js demo socket.io server, and tried hosting my own.

Neither of those options work, and I'm pretty sure I've configured them right. Here's my config code for both:

master/index.html

  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,

    multiplex: {
      id: 'e2bc6e79f19fbe63',
      secret: '13661966883862075064',
      url: 'revealjs.jit.su:80'
    },

    dependencies: [
      { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
      { src: 'plugin/multiplex/client.js', async: true },
      { src: 'plugin/multiplex/master.js', async: true },
    ]
    // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
    // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
  });

client/index.html

  Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            center: true,

    multiplex: {
      id: 'e2bc6e79f19fbe63',
      secret: null,
      url: 'revealjs.jit.su:80'
    },

    dependencies: [
      { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
      { src: 'plugin/multiplex/client.js', async: true },
      { src: 'plugin/multiplex/master.js', async: true },
    ]
    // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
  });

Obviously, I went to http://revealjs.jit.su/token to get a token and secret, and the client secret is null so they cannot control the presentation themselves. However, when I go to another slide in the master, the client doesn't follow at all despite being configured to do so. Both master and client are hosted locally under XAMPP (I've also tried hosting the master with node static, but same results).

Has anyone got any idea on how to solve this? Any help is much appreciated!


Source: (StackOverflow)

Display slide number in reveal.js printout

I have activated slideNumber for my reveal.js based slides and they show up nicely on the HTML view.

Now I would like to also show them on the PDF printout that I generate with Chrome as suggested on the documentation.

It seems that its all one large page so even header and footer display only once for all slides rather than on each slide. Is there a way to print reveal.js slides that works nicely for these sort of things?


Source: (StackOverflow)

sound transition with reveal.js

I'm learning to use reveal.js and I find it very powerful. I wonder wether it's possible to make reveal play a sound at each slide transition. I made a presentation with the auto-sliding option on and it would be usefull to have a sound when the slide changes. Can someone help me ? Thanks


Source: (StackOverflow)

How to position a background image in reveal.js?

I want to have a background image on the right hand side of one slide in a reveal.js presentation.

I added the image to the slide like this:

 <section data-background="myImage.jpg">
  // content
 </section>

How can I add css styles to make it appear on the right edge of the screen?


Source: (StackOverflow)

How do I separate slides when exporting an IPython notebook to reveal.js?

When I execute an IPython notebook to a reveal.js presentation using

ipython nbconvert mynotebook.ipynb --to slides --post serve

I am getting all the content as a single slide. How do I separate my content into several slides?

presentation screenshot

I tried using --- (hinted in this video), \n\n\n and === inside the notebook (as separate cells and before my titles), but it didn't change anything. I know that for a Markdown input file in reveal.js one can set the data-separator option, but the generated html file doesn't seem to include the content as Markdown, but inlines everything using HTML tags, so I don't know how to make IPython generate new slide tags where I want them.

(I'm using IPython 1.1 installed via pip)


Source: (StackOverflow)

Fragments in reveal.js using Markdown

reveal.js supports fragments which will be shown one after another in HTML

<section>
    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment roll-in">roll-in</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>
</section>

It supports using MarkDown instead of HTML for each slide using:

<section data-markdown>
    ## Page title

    A paragraph with some text and a [link](http://hakim.se).
</section>

But I could not find any documentation on using fragments using MarkDown. Did I miss something or is it not yet supported?


Source: (StackOverflow)

reveal.js background color choices

I've been working with reveal.js a bit and you can change the background of individual slides with something referred to as the global state as seen here in the demo.

Are there other colors besides the ones mention (-soothe, -blackout and -alert) on this slide that can be applied (hit down key in the presentation to see the colors)? If so what colors?


Source: (StackOverflow)

How to add and change fonts in reveal.js?

I'm working with reveal.js for my next presentation, I want to change the default fonts used for headings.

How can I add and change fonts in reveal.js?


Source: (StackOverflow)

Reveal.js HTML Code syntax higlighting without rendering it

Hello quick question for reveal.js users.

I am trying to show a HTML markup in my reveal.js presentation. Issue is it renders the html block within my Code syntax higlighting block so the markup can not be seen.

Is there a way around this?

example below

                <section>
                <h2>Pretty Code</h2>
                        <pre>
                            <code contenteditable>

                                <form id="demo-form" data-validate="parsley">
                                <label for="fullname">Full Name * :</label>
                                <input type="text" id="fullname" name="fullname" data-required="true" />

                                <label for="email">Email * :</label>
                                <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

                                <label for="website">Website :</label>
                                <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                                <label for="message">Message (20 chars min, 200 max) :</label>
                                <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
                                </form> 

                            </code>
                        </pre>
            </section>

Thank you.


Source: (StackOverflow)

position:fixed in reveal.js

I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.

Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:

Reveal.initialize {
    ...
    width: '100%',
    height: '100%',
    ...
}

But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

Any ideas how to solve this?


Source: (StackOverflow)