reveal.js
The HTML Presentation Framework
reveal.js - The HTML Presentation Framework a framework for easily creating beautiful presentations using html
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
- gesture.js (our custom javascript code)
- 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)
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)
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)
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)
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)
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)
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>
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)
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)
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)
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)
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?
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)
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)
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)
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)
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)