smallseo.info

reveal.js

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

AngularJS with reveal.js

I trying use both AngularJS and reveal.js together. The following works:

<!doctype html>
<html ng-app>
    <head>
        <link rel="stylesheet" rel='nofollow' href="lib/reveal/css/reveal.min.css">

        <script type="text/javascript">
            function MyController($scope, $http, $location) {
                $scope.location = $location;
                $http.get('slides.json').success(function(data) {
                       $scope.slides = data;
                       setTimeout(function() {
                            Reveal.initialize();
                       }, .1 * 1000);
                });
            }
        </script>
    </head>
    <body>
        <div class="reveal">
            <div class="slides" ng-controller=MyController>
                <section ng-repeat="slide in slides">
                    <section ng-repeat="image in slide.images">
                        <img ng-src="{{image}}" />
                    </section>
                </section>
            </div>
        </div>

        <script src="lib/angular/angular.js"></script>
        <script src="lib/reveal/reveal.js"></script>
    </body>
</html>

Setting a time out feels so wrong. How should I change this?


Source: (StackOverflow)

Generating events for gesture-controlled websites

I am very happy that I got the opportunity to work on a website that is gesture-based. I have a few inspiration for this: link

I visited lot of websites and googled it, Wikipedia and gitHub also didn't help much. There is not much information provided as these technologies are in nascent stages. I think I will have to use some js for this project

  1. gesture.js (our custom javascript code)
  2. reveal.js (Frame work for slideshow)

My questions are how come gestures generate events, how does my JavaScript interact with my webcam? Do I have to use some API or algorithms?

I am not asking for code. I am just asking the mechanism, or some links providing vital info will do. I seriously believe that if the accuracy on this technology can be improved, this technology can do wonders in the near future.


Source: (StackOverflow)

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)

How can I get left-justified paragraphs in reveal.js?

Standard HTML paragraphs are displayed centered by reveal.js. I would like to change this to left-justified, like on a normal webpage. I have seen reveal.js presentations that do this, but how does this work?


Source: (StackOverflow)

syntax highlighting code in Reveal.js how to?

I cloned reveal.js's git repo, copied the js,css,plugin and lib directories to /my-home-dir/ and created a sample page called r.html.

In r.html I have a <pre><code></code></pre> block, but it is not highlighted... which is the default behavior as I understand. I went ahead and changed the initialization of reveal.js to help with this, but nothing changed. (the theme and slide are fine otherwise)

Any suggestions?

The code for r.html is below:

<!doctype html>
<html lang="en">    
<head>
    <meta charset="utf-8">
    <title>Reveal.js 3 Slide Demo</title>
    <link rel="stylesheet" rel='nofollow' href="css/reveal.min.css">
    <link rel="stylesheet" rel='nofollow' href="css/theme/default.css" id="theme"> 
    <!--Add support for earlier versions of Internet Explorer -->
    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <!-- Wrap the entire slide show in a div using the "reveal" class. -->
    <div class="reveal">
        <!-- Wrap all slides in a single "slides" class -->
        <div class="slides">

            <!-- ALL SLIDES GO HERE -->
            <!-- Each section element contains an individual slide -->
            <section>
                This is my code
                <pre><code>
                    System.out.println("What is this?");
                    String p = "this is p";
                </code></pre>
            </section>



        </div>
    </div>
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>

    <script>
        // Required, even if empty.
        Reveal.initialize({
            dependencies: [
        // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
        { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

        // Interpret Markdown in <section> elements
        { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
        { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

        // Syntax highlight for <code> elements
        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

        // Zoom in and out with Alt+click
        { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },

        // Speaker notes
        { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }

        ]
        });
    </script>
</body>
</html>

The log from the firefox "browser" console:

file:///Users/my-home-dir/www/r.html
file:///Users/my-home-dir/www/css/reveal.min.css
file:///Users/my-home-dir/core/www/css/theme/default.css
file:///Users/my-home-dir/www/lib/js/head.min.js
file:///Users/my-home-dir/www/js/reveal.min.js
Unknown pseudo-class or pseudo-element 'selection'.  Ruleset ignored due to bad selector. reveal.min.css:7
Unknown property 'hyphens'.  Declaration dropped. reveal.min.css:7
Error in parsing value for 'display'.  Declaration dropped. reveal.min.css:7
Error in parsing value for 'min-height'.  Declaration dropped. reveal.min.css:7
Error in parsing value for 'background'.  Declaration dropped. default.css:20
Error in parsing value for 'background'.  Declaration dropped. default.css:21
Error in parsing value for 'background'.  Declaration dropped. default.css:22
Error in parsing value for 'background'.  Declaration dropped. default.css:23
Expected color but found 'center'.  Error in parsing value for 'background'.  Declaration dropped. default.css:24
Unknown pseudo-class or pseudo-element 'selection'.  Ruleset ignored due to bad selector. default.css:34
GET https://fonts.googleapis.com/css [HTTP/1.1 200 OK 20ms]
file:///Users/my-home-dir/www/plugin/highlight/highlight.js
file:///Users/my-home-dir/www/plugin/zoom-js/zoom.js
file:///Users/my-home-dir/www/plugin/notes/notes.js
Error in parsing value for 'width'.  Declaration dropped.

Source: (StackOverflow)

How to change text color in different fragments

Say I have a simple reveal.js slide like this:

 <section>
   <h1>Title</h1>
   <p >Text</p>
   <p class="fragment">Fragment</p>
 </section>

I'd like to change Text colour to red after Fragment appears on screen. How should I do it?


Source: (StackOverflow)

How does reveal.js resize elements?

I am trying to understand how reveal.js ( http://lab.hakim.se/reveal-js/#/ ) resizes elements dynamically.

To see this, adjust the height of the page and see how elements (to a certain degree) shrink as the page shrinks.

However, using chrome inspector, I cannot see how this shrinking is actually happening, either in CSS or Javascript.

(My interest comes from wanting to improve it, if possible, but I was surprised how hard it was to figure out how it works at all.)


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)

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)

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)

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)

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)

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)