I have a reveal.js presentation with approximately 300 slides. The purpose of this presentation is to cycle slides in "kiosk mode" on a monitor behind a conference booth.
To create a "kiosk mode" I've got:
Reveal.initialize({
controls: false, // hide the control arrows
progress: false, // hide the progress bar
history: false, // don't add each slide to browser history
loop: true, // loop back to the beginning after last slide
transition: fade, // fade between slides
autoSlide: 5000, // advance automatically after 5000 ms
});
This works very well, but I'd like to randomize the slides. The slides are currently just a list of 300 <section> tags in the index document - they aren't being pulled from anywhere external. Currently random: true isn't a configuration option in reveal.js.
The display order of fragments can be controlled with data-fragment-index. Is it possible to do something like that with sections? Is there a way to trick reveal.js into randomizing my slides?
My preference would be to shuffle them each time around - that is, to show slides 1-300 in random order, and then shuffle them, and show 1-300 again in a different random order. I would also be happy with just jumping to a random slide for each transition, though.
While Reveal itself does not have this functionality built in, it does let you set up event hooks to do actions when all the slides are loaded, this means JQUERY TO THE RESCUE!
You can combine Reveal's "All slides are ready" event with simple javascript to reorder all the sections, here's a simple PoC:
First import jQuery, I did this by adding it directly above the import for js/reveal.min.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then, set up an event listener:
Reveal.addEventListener('ready', function(event) {
// Declare a function to randomize a jQuery list of elements
// see http://stackoverflow.com/a/11766418/472021 for details
$.fn.randomize = function(selector){
(selector ? this.find(selector) : this).parent().each(function(){
$(this).children(selector).sort(function(){
return Math.random() - 0.5;
}).detach().appendTo(this);
});
return this;
};
// call our new method on all sections inside of the main slides element.
$(".slides > section").randomize();
});
I put this right after declaring my Reveal settings and dependencies, but I'm pretty sure you can put it anywhere.
What this does is waits for all javascript, css, etc to load, manually reorders the slides in the DOM, then lets Reveal start off doing its thing. You should be able to combine this with all your other reveal settings since it's not doing anything disruptive to reveal itself.
Regarding the "shuffling them each time around" portion, the easiest way to do this would be to use another event listener, slidechanged. You could use this listener to check if the last slide has just been transitioned to, after which the next time slidechanged is called you could simply refresh the page.
You can do this with something like:
var wasLastPageHit = false;
Reveal.addEventListener('slidechanged', function(event) {
if (wasLastPageHit) {
window.location.reload();
}
if($(event.currentSlide).is(":last-child")) {
// The newly opened slide is the last one, set up a marker
// so the next time this method is called we can refresh.
wasLastPageHit = true;
}
});
As of reveal.js 3.3.0 there is now a built in helper function for randomizing slide order.
If you want the slide order to be random from the start use the shuffle config option:
Reveal.initialize({ shuffle: true });
If you want to manually tell reveal.js when to shuffle there's an API method:
Reveal.shuffle();
To shuffle the presentation after each finished loop you'll need to monitor slide changes to detect when we circle back to the first slide.
Reveal.addEventListener( 'slidechanged', function( event ) {
if( Reveal.isFirstSlide() ) {
// Randomize the order again
Reveal.shuffle();
// Navigate to the first slide according to the new order
Reveal.slide( 0, 0 );
}
} );
Related
My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?
As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});
BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....
I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});
Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.
for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,
Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!
I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.
My question title may seem confusing, let explain my situation. Any help would be much appreciated.
I have never done this before, hence why I can't pin point a solution in google.
I have a jquery slideshow, which I wrapped inside a function because I have some addition animation to go with it, please see below...
// my slider function
bikeSlider = function () {
var slider = $('#bike-minislider').bxSlider({
displaySlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
$('#bike-minislider-fade').fadeIn();
};
// this runs the function
bikeSlider();
As you can see, immediately after the bikeSlider function, I run the function using... bikeSlider();
Now later on, I hide some slides within the slideshow using jquery .hide().
Because my jquery slideshow function, calculates the number of visible slides within the #bike-minislider div, it means that the new number of visible slides causes the slideshow to not work. I guess it needs to re-calculate the new number of slides.
In a nutshell, I think this can be resolved by running the bikeSlider(); function again.
So I tried this below, but it did not work.
bikeFilter = function (y) {
$('.bike').fadeOut();
$('.bike[data-group=' + y + ']').fadeIn();
bikeSlider();
return false;
}
As you can see I am trying to re-run the function bikeSlider(); - but it seems to be running this over the top of the old one, so my question is, how do you remove the original slide function before running it again.
Or reloading/refreshing the original function so it re-calculate the new number slides?
Any pointers would be so helpful.
Thank You.
As i understood you dont need re-create slider, but you do exectly this by calling twice
bxSlider()
According doc you need reinit slider by
reloadShow()
//Reinitialize a slide show
For more info take a look here bxslider in section Public functions
You need to call reloadShow() for slider-object
var mySlider;
$(function(){
mySlider= $('#bike-minislider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})
I have a jCarouselLite plug in on my website. I am loading the li's from a jquery.load function. I cycle through the carousel vertically and have a function that triggers as soon as the first item comes back around to the top.
At this point, I want to refresh the data with another ajax.load. This is where I run into a problem. Once that data is reloaded, the carousel stops rotating (or rather, is running in the background).
One solution I tried is to try re-instating the carousel with another:
$("#tableapp").jCarouselLite({})
line. This seems to cause two carousels to be running at the same time. And then a third, and 4th, and so on.
So basically I am looking for some way to clear the carousel, reload the updated data, then run it again. Any ideas?
$(document).ready(function () {
updateConsole() //Gets new data
scrollWindow() //Starts carousell
});
function updateConsole() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
circular: true,
afterEnd: function (a) { ScrollEnd(a); }
});
};
function ScrollEnd(a) {
$('#tbDebug').val($('#tbDebug').val() + '\nScroll Ends');
if (**code that determines slide 1 is back on top**) {
updateConsoles();
scrollWindow(); //If this code is commented, the carousel stops cycling.
//If it isn't commented, two carousels start and things
//get buggy and eventually freezes.
}
}
I am pretty new to javascript, jquery, etc. I also tried this on jCarousel (not lite), but I couldn't get it working with vertical scrolling. It seemed buggy.
Here's a not-particulary thought out suggestion:
When you ScrollEnd, .remove that div.
http://api.jquery.com/remove/
Then recreate it and dump load into it.
Creating a div element in jQuery
Does that trick it into working?
I am working on some tabbed navigation for my website and I have an issue I'd like to fix.
I've been scrambling my head all day and getting nowhere. Would really appreciate some help.
Here be the code: http://jsfiddle.net/EghAt/
1) Notice when you click Tab 1 and then immediately click Tab 2, Tab 1 continues to loop out all the results.
I would prefer if this stopped looping Tab 1 results and just started looping Tab 2 results.
Is this possible?
How do I achieve this?
Many thanks for any pointers
You can stop the previous animation in this function of yours, by adding the .stop(true, true) you see in this revised function:
function fadeOutItems(ele, delay) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
delay ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideToggle('fast');
});
}
}
Since you call this on both the currently active tab and the newly active tab, this should stop any animations underway on the currently active tab.
See the jQuery doc on .stop() for details.
In looking at this code further, I believe it does what you literally asked for in your question (it stops the previous tab looping and starts the next tab), but I'm not sure that's actually what you want because it leaves the items in a tab only partially expanded. If that's what you want, then this will do that.
If that's not what you want, then the code will have to be modified a bit further to not only stop the currently running animations, but to put all the items for the old tab into the same state.
As I suspected, you actually want more than you asked for (per your most recent comments). You want the previously items to be hidden, no matter what state they were in previously. You can do that with this code where I changed the slideToggle() to a slideUp(). You can't use any form of toggle if the animation hasn't started yet because toggle will go the wrong way (it just reverses the state). Instead, when hiding you have to use a definitive animation that ends with the item not visible. You can use this code where I used slideUp() but you could pick something different if you wanted:
// A helper function that allows multiple LI elements to be either
// faded in or out or slide toggled up and down
function fadeOutItems(ele, show) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
show ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideUp('fast');
});
}
}
You can see that in action here: http://jsfiddle.net/jfriend00/rzd3N/.
The problem is here.
$(this).delay(i * 400).fadeToggle('slow')
You are giving a fede effect to each element at once, by increasing delay.
It's not easy to stop it this way. The correct way to do this is to call a function which will only fade an element at a time. Then this function will be executed again at a given time interval (400 in your case), and fade the next element.
This way, passing a variable to the function, for example stopExecuting=true, will stop the effects.
Take a look at setInterval and setTimeout to achieve this.
Here is the example I'm looking to create...
Let's assume there are two divs, each containing some other HTML/Content (other divs). I would like to have one of these divs in the view on page load, and then after some number of seconds (let's say 5), scroll the second div onto the same place as the first div, and then repeating that process indefinitely until the user leaves the page.
The page and elements in question can be found at http://paysonfirstassembly.com/. I am attempting to animate the left sidebar with a class of dynamicPanel. There will be at least three of these divs, and they will nearly match up in content length.
I appreciate everybody's help. I am a very new client-side programmer and appreciate the respect that this community has with new developers.
Working demo of the following →
Here's a simple jQuery plugin I just made that will slide up the first div and place it at the end of the list. I've commented the code below to further explain so that this can just get you started and you can adjust it to your needs and learn about jQuery:
// the plugin declaration
$.fn.rotateEach = function ( opts ) {
// cache the element set
var $this = this,
// create some default options
defaults = {
delay: 5000
},
// pass the defaults to settings with any override options
settings = $.extend(defaults, opts),
// repeated rotation function
rotator = function ( $elems ) {
// slide up first element in set
$elems.eq(0).slideUp(500, function(){
// detach first element
var $eq0 = $elems.eq(0).detach();
// append it to wrapper
$elems.parent().append($eq0);
// fade it back in
$eq0.fadeIn();
// call rotator on reselection of elements
// since first element was moved to end
setTimeout(function(){ rotator( $( $elems.selector ) ); },
settings.delay);
});
};
// initial rotator call
setTimeout(function(){ rotator( $this ); }, settings.delay);
};
// invoke plugin
$('.dynPanelContent').rotateEach();
If you want to change the delay you can just pass it in as an option:
$('.dynPanelContent').rotateEach({ delay: 7500 }); // 7.5 seconds
Note: I also moved .dynPanelOpener and .dynPanelTitle within .dynPanelContent so that they're included in the animations.
See working example →