Is it possible to start in the middle of a presentation with reveal.js? I would like the first slide to have the option of going up,down,foward ,back to act like a quiz. or do any of you know of a program that can do this.
Sorry for the late answer, but hope that this answer could help somebody in the future.
You can use the reveal.js API to achieve that.
Simply use the call to Reveal.slide function after the 'ready' event is called.
Reveal.slide( indexh, indexv, indexf );
Reveal.initialize();
Reveal.addEventListener( 'ready', function( event ) {
Reveal.slide(2, 1); //go to slide horizontal / vertical
} );
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/moon.css">
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
<section>
<section>Slide 3</section>
<section>Slide 3.1</section>
<section>Slide 3.2</section>
<section>Slide 3.3</section>
</section>
<section>Slide 4</section>
<section>
<section>Slide 5</section>
<section>Slide 5.1</section>
<section>Slide 5.2</section>
</section>
<section>Slide 6</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.js"></script>
<script src="https://cdn.jsdelivr.net/reveal.js/3.0.0"></script>
Try giving links between the slides as below
<section id="idname">
Your content
</section>
Then just in some other slide where you want to link to this slide as below
Your text
A simple solution is to just give out a link to the middle slide you want to start on:
http://lab.hakim.se/reveal-js/#/2/2
A more complex solution would be to add id="home" to the first slide. Then use the following javascript to listen for state changes to that slide:
Reveal.addEventListener( 'home', function() {
// If user is on first slide, force change to desired slide
Reveal.slide( 2, 2);
}, false );
You might potentially be able to use this API call as well:
Reveal.isFirstSlide();
Related
I'm developing a space based environment in Rails 4 and want to play a small sound file every time a key is pressed while the user is filling out a form. In other words, every keystroke would make a small clicking sound while typing.
I'm also looking to have this solution hosted remotely possibly in the assets folder, so the user does not have to install some third party application or software to make it happen.
Is this even possible with rails? Or, what other frameworks/libraries/technologies would I need to incorporate to accomplish this with Rails, and any examples or links to examples would be appreciated. Thanks.
<!-- Sound Manager -->
<link rel="stylesheet" type="text/css" href="/soundman/demo/360-player/360player.css" />
<link rel="stylesheet" type="text/css" href="/soundman/demo/flashblock/flashblock.css" />
<!--[if IE]><script type="text/javascript" src="/soundman/demo/360-player/script/excanvas.js"></script><![endif]-->
<!-- I'm not certain which of the following .js includes are actually required, I included them all and it works, however, some of these includes may not be necessary for the most basic of implementations. Please update if you find the minimal required includes -->
<script type="text/javascript" src="/soundman/demo/360-player/script/berniecode-animator.js"></script>
<script type="text/javascript" src="/soundman/script/soundmanager2.js"></script>
<script type="text/javascript" src="/soundman/demo/360-player/script/360player.js"></script>
<script type="text/javascript">soundManager.setup({url: '/soundman/swf/'});</script>
<script type="text/javascript">
function hoverCategory() {
soundManager.setup({
url: '/soundman/demo/_mp3/hover01.wav',
onready: function() {
var mySound = soundManager.createSound({
id: "a2", // <----------- Make this unique or you might run into conflicts
url: '/soundman/demo/_mp3/hover01.wav' // <------- mp3's work as well
});
mySound.play(); // <------------- lots of cool options on mySound, play() being just one of them
},
ontimeout: function() {
}
});
}
</script>
<!-- Onclick -->
<%= f.check_box :radial, :onclick => "Javascript:hoverCategory()" %>
<!-- Onmouseover -->
<%= f.submit :onmouseover => "Javascript:hoverCategory()" %>
<!-- Onkeypress -->
<%= f.text_field :status, :onkeypress => "Javascript:hoverCategory()" %>
I use tablesorter in combination with jquerycsvtotable.
Everything works fine, but... there's a lag between the moment when the table is loaded and the moment when tablesorter is shown that makes the data appear without any formatting on the screen. The time varies on the amount of data, between 2 and say 5 seconds.
Is there any way to show a "loading" gif or just nothing untill all the process is completed to avoid showing ugly data?
Thanks!
PS: I don't mean the time tablesorter takes to re-order rows when you click on a certain header cell, which I know is already arranged with optional processing gifs shown into the header...
EDIT: please find below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
.bind("loadComplete",function(){
var footer = mytable.find('tr:last');
mytable
.find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
.tablesorter({
sortList: [[5,0]],
widthFixed : true,
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions: {filter_hideFilters : true}
});
});
});
</script>
</head>
<body>
<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
I wonder if the solution is as easy as just adding the "tablesorter" class name to the table. If you are using a theme other than default, that theme name should also be included:
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
tableClass: 'tablesorter tablesorter-default', // adjust theme name here
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
I know this has been discussed before, but with no results for me.
The problem is that deviceready() is only fired once, the first time on "list" page. I can´t get it to work on article pages. And when I go back from a "article" page to "articlelist" the event is still out of work. I need the menubutton operative in every data-role="page".
The js:
<script type='text/javascript'>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("menubutton", onMenuKeyDown, false);
}
function onMenuKeyDown() {
alert('Menu pressed');
}
</script>
The HTML:
<body onload="onLoad()">
<div id="list" data-role="page">
<ul id="articleList" data-role="listview">
<li id="list1"><a id="link1" href="#article1"></li>
<li id="list2"><a id="link1" href="#article2"></li>
</ul>
</div>
<div id="article1" data-role="page">Content</div>
<div id="article2" data-role="page">Content</div>
I'm with: cordova-1.5.0 /jquery.mobile-1.1.0-rc.2 /jquery-1.7.1 /Android
Any help please?
I just quickly tested this in the app I'm working on right now and it works. Phonegap-1.6.1 and jquery.mobile-1.1.0 final
Perhaps you should try upgrading your phonegap and jquery.mobile
I am developing an app having UI which is used for mapping fields (Source => Destination).
These fields would appear in UL -> LI -> DIV
The lists are going to be created dynamically by PHP.
Source fields are draggable with revert:true, where as Destination fields (droppable) would accept source field. I know the accept : "#divsource"
I am able to make many div's draggable, but my problem is how to define many LI->Div as droppable.
At then end the drop event would call ajax and that I can handle as well.
I am new to jQuery and whatever I have learned till now is with this task is all I know. But, my quick learning ability is not a problem.
Please help with some example.
thanks
Wikki
Below code is something I have been playing with. I know it's bit far off from what eventually it should look like:
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true,
helper: "clone"
});
$('#destinationfeilds').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is mapped!");
//$(this).removeClass('over').addClass('out');
//alert(theTitle);
}
});
});
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)