标签: reveal.js
如何更改不同片段中的文本颜色
说我有一个这样的简单reveal.js幻灯片:
<section>
<h1>Title</h1>
<p >Text</p>
<p class="fragment">Fragment</p>
</section>
我想在屏幕上显示Text后将颜色更改为红色Fragment.我该怎么办？
推荐指数
解决办法
查看次数
当reveal.js中出现某个幻灯片时执行函数
我使用这个javascript框架http://lab.hakim.se/reveal-js/#/创建了一个演示文稿,当出现某个幻灯片时,我想执行函数stats(),它每隔5秒显示一次来自API的数据,但是仅当此幻灯片出现时
function stats(){
$.ajax({
type: "GET",
url: url_survey,
dataType: "json",
success :
function (data) {
//some code to display data
},
error:
//some code
});
}
在HTML文件中我有这个:
<section>
<div id="stats">
</div>
</section>
我该怎么做？我编写了这段代码,但它始终有效,不仅在幻灯片出现时
function check(){
if($("#stats").is(":visible"))
stats();
}
check();
setInterval(function(){check()}, 2000);
推荐指数
解决办法
查看次数
reveal.js如何调整元素大小？
我试图理解reveal.js(http://lab.hakim.se/reveal-js/#/)如何动态调整元素大小.
要查看此内容,请调整页面的高度,并查看元素(在某种程度上)在页面缩小时如何缩小.
但是,使用chrome检查器,我无法看到这种缩小是如何实际发生的,无论是在CSS还是Javascript中.
(我的兴趣来自于想要改进它,如果可能的话,但我很惊讶很难弄清楚它是如何工作的.)
推荐指数
解决办法
查看次数
在div中嵌入整个reveal.js演示文稿
我想知道如何在标签的范围内嵌入整个reveal.js演示文稿,以便我的演示文稿看起来像slideshare.net上的演示文稿
提前致谢.
推荐指数
解决办法
查看次数
如果我使背景半透明,列表编号将变为半透明
几个月来,我一直在用reveal.js演示文稿来解决问题.会发生的是,如果我为幻灯片内容制作半透明的背景,那么ol数字,但不是ul子弹,也不是我能看到的任何其他元素,也会变得半透明到相同的程度.
最重要的问题是列表编号是如何设计的？第二个问题是,列表编号的颜色如何以这种方式与背景相关联？
我已经仔细检查了显示CSS(并且有相当数量)无济于事.当然,我已经检查了浏览器工具中涉及的元素.问题的一个重要部分是我不知道如何故意达到这样的效果; 这些只是具有库存CSS样式的股票HTML列表 - 没有与CSS内容等有趣的业务.
注意第二张图像中的数字几乎不可见.当我改变背景颜色的半透明度时,数字的半透明度随之变化.
背景是一个固定的div:
<div class="background"<% [WallpaperImage] %> style="background-image:url(<% WallpaperImage %>)"<% [/] %>></div>
具有非常直观的造型:
body > div.background {
background : fixed border-box #000 center/cover no-repeat;
bottom : 0;
left : 0;
position : fixed;
right : 0;
top : 0;
}
推荐指数
解决办法
查看次数
带有reveal.js的R htmlwidgets
如何在reveal.js和Rmarkdown中使用优秀的htmlwidgets(例如http://rstudio.github.io/leaflet/)？
这个mwe(不是reveal.js)有效:
---
title: "Maptest 1"
output: html_document
---
## Map
```{r, echo=FALSE}
library(leaflet)
m <- leaflet()
m <- addTiles(m)
m <- addMarkers(m, lng=174.768, lat=-36.852, popup="The birthplace of R")
m
```
但是这个没有:
---
title: "Maptest 2"
output: revealjs::revealjs_presentation
---
## Map
```{r, echo=FALSE}
library(leaflet)
m <- leaflet()
m <- addTiles(m)
m <- addMarkers(m, lng=174.768, lat=-36.852, popup="The birthplace of R")
m
```
我重新使用了htmlwidgets-webpage中的示例,reveal.js-template来自https://github.com/jjallaire/revealjs
推荐指数
解决办法
查看次数
在他们出现后隐藏reveal.js片段
说我有一个简单的reveal.js幻灯片,如下所示:
<section>
<h2 class="fragment" data-fragment-index="1">first</h2>
<h2 class="fragment" data-fragment-index="2">second</h2>
<h2 class="fragment" data-fragment-index="1">first</h2>
</section>
我希望两个"第一个" 仅在片段1中显示,然后在"第二个"出现时返回隐藏在片段2中.我该怎么办？
推荐指数
解决办法
查看次数
在reveal.js打印输出中显示幻灯片编号
我为基于reveal.js的幻灯片激活了slideNumber,它们很好地显示在HTML视图上.
现在我想在文档中建议的Chrome生成的PDF打印输出中显示它们.
似乎它的所有一个大页面,所以即使页眉和页脚只显示一次所有幻灯片而不是每张幻灯片.有没有办法打印reveal.js幻灯片,这些幻灯片可以很好地用于这些事情？
推荐指数
解决办法
查看次数
设置页眉和页脚reveal.js演示文稿
我想在演示文稿中设置页眉和页脚.我使用以下问题作为起点:https://github.com/hakimel/reveal.js/issues/806和http://www.ciges.net/revealjs_demo/#/
我当前的实现提供了以下输出:
现在据我所知,reveal.js默认使用固定大小的表示,宽度为960px,高度为700px.这个尺寸对我来说完全没问题.但是,我希望不在此窗口中修复页眉和页脚.他们需要适应实际的屏幕尺寸.也就是说,我希望左标题与屏幕的左上角对齐.同样对于其他页眉和页脚,另请参见图像.我怎样才能做到这一点？目前看来我的页眉和页脚是固定在默认窗口(960x700).
我在reveal.js 3.2.0中使用以下代码(index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( …推荐指数
解决办法
查看次数
SVG和RevealJS中的鼠标位置
我正在使用RevealJS创建演示文稿,并希望合并使用D3创建的一些交互式SVG可视化.我之前已经多次没有遇到过这种情况,但这次我遇到了一些困难.经过一些调试后,我将问题跟踪到以下内容:由于某种原因,当整个事物被包装在RevealJS中时,相对于SVG的鼠标位置没有正确报告.
我的原始版本的代码使用标准的D3技术来获得鼠标位置.然而,为了简化和隔离问题,我删除了D3,现在使用vanilla Javascript来获取鼠标位置,详见StackOverflow答案.我的代码(作为stack-snippet实现)看起来像这样:
var info = document.getElementById("info");
var svg = document.getElementById("svg");
pt = svg.createSVGPoint();
var cursorPoint = function(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove',function(evt){
var loc = cursorPoint(evt);
info.textContent = "(" + loc.x + ", " + loc.y + ")";
},false);svg {
border: solid black 1px;
border-radius: 8px;
}<div id="info">pos</div>
<svg id="svg" width="300" height="200"></svg>当我在Mac上的Firefox中的RevealJS中运行它时,我会得到非常不同的数字 - 好像坐标已被移位(-423,-321)或其他一些大的负数对.我在下面添加了一个屏幕截图来说明这一点.鼠标没有出现在屏幕截图中,但是在左上角附近,所以它应该读取类似(3,5)或类似的小值.
我假设RevealJS正在对SVG进行一些额外的转换,但我找不到它,我希望有一些RevealJS推荐的方法来处理这个问题.
RevealJS版本在这里有一个完整的(好的,实际上没有正确的)版本.它几乎与上面的stack-snippet完全相同,但包含在最小的RevealJS模板中.
更深入地研究这个问题,问题似乎发生在Firefox上,而不是发生在Chrome上.我在我1岁的Macbook Pro上运行这些程序的当前版本.我真的很喜欢一些可以在各种浏览器中运行的代码,并且肯定希望它能够在Firefox和Chrome中运行.
推荐指数
解决办法
查看次数
标签 统计
reveal.js ×10
javascript ×4
css ×3
html ×3
firefox ×1
knitr ×1
pdf ×1
presentation ×1
printing ×1
r ×1
r-markdown ×1
svg ×1