EzDevInfo.com

How to make deck.js presentations go forward when clicking

How do I configure deck.js so it goes to the next slide when I click anywhere on the page? Very much like Powerpoint or Impress does it.

Custom styles not working with deck.js

I'm creating a presentation using deck.js, the problem that I'm having is that whenever I try to use custom styles eg to add border to tables or to use google code prettify, it has absolutely no effect. The presentation can be found here.

Edit: I have the following snippet for displaying source code.

<code class="prettyprint">
chmod 000 filename
cat filename
</code>

How exactly is this affected by the CSS Specificity issue?

How I can include the use of the extension deck.automation.js when I create a document Rmarkdown-slidify-deck.js in RStudio?

How I can include the use of the extension deck.automation.js when I create a document Rmarkdown-slidify-deck.js in RStudio? It is to show a presentation on a screen with statistical content without interaction from anyone, and when finished will start automatically.

https://github.com/rchampourlier/deck.automatic.js

http://ramnathv.github.io/slidify/index.html

Plot dimple(d3.js) chart in deck.js section

I would like to insert a dimple plot into a deck.js presentation. The code below online puts the plot in the body at the background. But I would like to have the plot displayed in the section class. I think I have to change something in var svg = dimple.newSvg("body", 800, 600). Because of my very limited javascript skills I have no idea what to change exactly. Any help would be very much appreciated.

<section class="slide" id="test-section">
 <h2>test section</h2>      
  <script type="text/javascript">
       <script src="http://d3js.org/d3.v3.min.js"></script>
       <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
  </script>
</section>

If only the included the specific section class code in my question. If needed the complete code can be found here. The index page in the is located in the introduction folder.

Get buttons (prev, next, pause) working for Deck.js

I am trying to use Deck.js but have a massive issue that is making me feel very very stupid.

I want to have navigation buttons. I want a button that allows the user to move forward and a button that moves back.

Also, if its not too much to ask, a way to make the slideshow move on a timer (A slide moves every 10 seconds) with a pause button.

I have went through the documentation that shows in plain sight the functions to make the buttons work, but I cannot get buttons to show, I have tried everything and I cannot get any buttons at all.

Please help me, how do I enable buttons with deck.js (I have read the documentation many many many times, at this point in time I think i'm too stupid to understand it because I cannot get any buttons to work at all.)

Please help!

Thanks!

How to remove page number from deckjs framework (using Slidify)

I have created slidify presentation using deckjs framework and used "> *" to make things appear sequentially (like PowerPoint bullet points).

However, I found that it shows the page number differently. When I click next to show the next bullet point, the page number increases. For example, if I have 3 slides in my presentation and one of the slides includes 3 bullet points, total number of slides shows 6 slides.

How can I remove the page number from the slides, or just show the number of slides?

Can ease-in and ease-out have different speeds for the css transition timing function?

I'm trying to have one element exit slowly and another one come in just as slow, but I want the first element to come in fast and the second one to exit fast too. Is this possible? Here's what I tried. This is for a deck.js slide set.

.slide.long.in {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 5000ms ease-in;
    transition: transform 500ms ease-out;
}
.slide.long.out {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-in;
    transition: transform 5000ms ease-out;
}

deck.js - Is it possible to change the element (body) for the class "deck-container" to another element?

Deck.js works fine when I'm using

<body class="deck-container"><section>

...but it is not working for other elements like divs or <article> etc. However, on the homepage of Deck.js -- http://imakewebthings.com/deck.js/ -- they are using <article class="deck-container">.

It might be just a small adjustment needed to the JS code. But I can't find any help in the docs.

It would be very nice if someone could help me out here!

Deck.js changing displayed slide size based on slide content

When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.

The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.

What is going on here, and how do I get control of the display size in these situations?

(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)

Thanks.

Deck.js Transitions Not Working

I can't seem to get Deck.js transitions to work. I want the horizontal slide transition. I've included the css in my page, I can see the css is indeed being included buy looking at the inspector, but the transition does not occur. Instead, the transition is instant. No animations occur.

I've tested in both Chrome and Safari.

<head>
  <link rel="stylesheet" media="screen" rel='nofollow' href="pathToDeck/core/deck.core.css">
  <link rel="stylesheet" media="screen" rel='nofollow' href="pathToDeck/themes/transition/horizontal-slide.css">
</head>
<body>
  ... my slides ...
  <script type="text/javascript" src="./path/to/deck.core.js"></script>
</body>

Carousel for nested slides in deck.js

I'm using deck.js for a presentation. For one slide, I want a static header with figures/images that I can carousel through. Here's the relevant HTML:

<section class="carousel slide">
  <h2>Static Title</h2>
  <figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure>
  <figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure>
  <figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure> 
</section>

And here's the JS I've added to deck.js to make this work with the horizontal-slide theme that comes with deck.js.

.carousel .deck-before {
    -webkit-transform: translate3d(-400%, 0, 0);
    -moz-transform: translate(-400%, 0);
    -ms-transform: translate(-400%, 0);
    -o-transform: translate(-400%, 0);
    transform: translate3d(-400%, 0, 0);
    height:0;
}

.carousel .deck-after {
    -webkit-transform: translate3d(400%, 0, 0);
    -moz-transform: translate(400%, 0);
    -ms-transform: translate(400%, 0);
    -o-transform: translate(400%, 0);
    transform: translate3d(400%, 0, 0);
    height:0;
}

.carousel .deck-next {
    -webkit-transform: translate3d(200%, 0, 0);
    -moz-transform: translate(200%, 0);
    -ms-transform: translate(200%, 0);
    -o-transform: translate(200%, 0);
    transform: translate3d(200%, 0, 0);
    height:0;
}

.carousel .deck-previous {
    -webkit-transform: translate3d(-200%, 0, 0);
    -moz-transform: translate(-200%, 0);
    -ms-transform: translate(-200%, 0);
    -o-transform: translate(-200%, 0);
    transform: translate3d(-200%, 0, 0);
    height:0;
}

This works great when the carousel of images is going forward. However, when I go back, the image that is moving off the screen shifts down so it is below the spot where the new image is entering.

How do I make it so that the image that is moving off the right of the screen stays level with the image that is coming on the screen from the left?

asciidoctor breaks rendering deck.js backend

I am attempting to use the deck.js backend with asciidoctor. I followed the instructions at http://asciidoctor.org/docs/install-and-use-deckjs-backend/. I get the following error:

$ asciidoctor --trace -T asciidoctor-backends/haml deckjs-example.asciidoc 
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- asciidoctor/stylesheets (LoadError)
    from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
    from /home/worldwidewilly/Dropbox/presentations/adoc-deck/asciidoctor-backends/haml/deckjs/helpers.rb:1:in `<top (required)>'
    from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
    from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/renderer.rb:121:in `block in initialize'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/renderer.rb:69:in `each'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/renderer.rb:69:in `initialize'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/document.rb:743:in `new'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/document.rb:743:in `renderer'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/document.rb:752:in `render'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor.rb:915:in `render'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/cli/invoker.rb:86:in `block in invoke!'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/cli/invoker.rb:79:in `each'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/lib/asciidoctor/cli/invoker.rb:79:in `invoke!'
    from /var/lib/gems/1.9.1/gems/asciidoctor-0.1.4/bin/asciidoctor:13:in `<top (required)>'
    from /usr/local/bin/asciidoctor:23:in `load'
    from /usr/local/bin/asciidoctor:23:in `<main>'

My document - deckjs-example - looks like:

= Asciidoctor Deckjs Example
Bill Turner
:backend: deckjs
:deckjs_theme: web-2.0
:deckjs_transition: horizontal-slide
:navigation:
:blank:
:goto:
:menu:
:status:
:split:
:toc:

== Title of Slide One
Hello World!

[canvas-image="images/groovy.jpg"]
== Slide Two's Title will not be displayed

[role="canvas-caption", position="center-up"]
This text is displayed on top of the example.jpg image.

My directory contains all the things that I seem to need to have installed:

$ ls
total 32K
22021551 drwxr-xr-x 7 worldwidewilly worldwidewilly 4.0K Apr 27 13:38 asciidoctor-backends
24910534 drwxr-xr-x 8 worldwidewilly worldwidewilly 4.0K Apr 21 20:30 deck.js
  527971 -rw-r--r-- 1 worldwidewilly worldwidewilly  394 Apr 27 14:01 deckjs-example.asciidoc
26740079 drwxr-xr-x 2 worldwidewilly worldwidewilly 4.0K Apr 27 14:00 images

I presume a configuration problem. Searching has yet to reveal a solution, though I did find a similar problem on the AsciiDoctor discussion group which, unfortunately, did not seem to provide a solution, at least not one I understood.