We Keep Coding

Using wheelnav.js how can I connect my wheel to a copy slider

I would like to correlate my wheel nav slider to my copy container. An example is shown on this link - http://wheelnavjs.softwaretailoring.net/examples.html
I've tried to figure out how to link to the selected section of my wheel but I can't figure it out. How do I set up a slider functionality that works with the wheelnav.js?

After createWheel() is called, you can register callback functions to be triggered by navigateFunction.
wheel = new wheelnav('wheelDiv');
wheel.createWheel();
wheel.navItems[0].navigateFunction = function () { alert('Hello wheel!'); };
More info here: http://wheelnavjs.softwaretailoring.net/documentation/navItem.html

Randomize slides in reveal.js

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 );
}
} );

bxslider wont stop

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.

Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.

Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});

External Controls (Next / Prev) for Nivo Slider (raphaeljs)?

I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions, and raphaelJS for animated next / previous buttons. My only issue is that there is no built in way to give an element to Nivoslider that represents the next button. Because my element is a triangle that animates I need someway to let NivoSlider know that I want $(triangle.node) to represent next & previous. The library is private (I think that's how you express that) so it can't see the triangle.node global. Any ideas?

Add this code before you initialize Nivo Slider and replace the parameters with your triangleNodePrev / Next. This has the advantage of disabling the default action on your links so that if you use href="#" the browser doesn't scroll back to the top of the page.
$('#previousButton, #nextButton').on('click', function (e) {
// Prevent the link from being followed
e.preventDefault();
// Initialize variables
var buttonId = this.id,
 buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';
// Trigger the slider button
$('.nivo-directionNav').find(buttonClass).click();
});

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})
That should do it
but in any case the commands you need are
$(".nivo-directionNav .nivo-prevNav").click()
and
$(".nivo-directionNav .nivo-nextNav").click()

<script type='text/javascript'>
$(document).ready(function() {
jQuery("#previousButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-prevNav").click();
});
jQuery("#nextButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-nextNav").click();
});
});
</script>

Mootools Slider plugin functions

I am using mootools to create a CSS skin for the Youtube chromeless player using the javascript API to control playback. I cannot post the code unfortunately. The question I have is a more general one. When using the slider plugin a call to mySlider.set(step) moves the knob to the correct step on the slider but it triggers all of the plugins event functions (onChange, onTick, onComplete). The problem with this is, how do you know if the sliders knob position was changed by a user or a call to the set() function? I would have thought there would be a function reserved for when the knob was released by a mouse only and not be called if the position was simply set in code. I have code that updates the knobs position based on where the videos playback duration is currently at. I need to be able to move the knob to the current position in code without it thinking a user let go of the knob.
To simplify the question, is there a way to set the knobs position on a slider in code without triggering the functions used when a user interacts?
You can find the Slider plugin reference here http://mootools.net/docs/more/Drag/Slider
Thanks

I got this problem and ended up doing this
var slider = new Slider(track,knob, {
onChange: function(){
console.log("doesn't fire after autosize()");
}
});
// fake .set();
slider.step = 50; // new value
slider.autosize(); // redraw the knob

Make a variable that indicates that you're setting it programatically, then skip your event handlers if the variable is true.
Then, each time you set the slider in code, set the variable to true first, then back to false afterwords in a finally block.