calling js functions when slide changes (deck.js with D3.js)

[Greg]

Hi,

I am just trying out deck.js and it seems wonderful! I just can't
figure out this one thing:
I would like to activate D3 transitions when I press the error key
while the current slide remains unchanged. When I press the back key,
I would like to trigger a different transition that reverts the prior
one. How can I do that? Instead of changing to a different slide, I
basically need to call a js function...
(I am very familiar with js but have no idea about jquery and the
dollar signs in the syntax still confuse me)

Thanks!

[Caleb Troughton]

Hi Greg,

There isn't anything in deck.js to explicitly overload the actions of next/prev to run some arbitrary JS instead of change slides.  There is a tool in place with the deck.change event, in that preventing default inside a deck.change handler causes it to fire a slide change back, effectively canceling the first change.  But this has some edge case pitfalls that I don't need to get into here.  Making this easier is the type of functionality I may explore in the future as some other use cases have come up for preventing slide change and instead doing X.

In the meantime, a relatively painless workaround exists. If you need a step to run some JS without changing slides, just make a nested blank slide div.  Give it an id or class, and within a deck.change handler see if that blank div is becoming the current slide (or losing focus, to go back).  If it's the "to" slide, fire your d3 transition.  If it's the "from" slide, fire your backwards transition.  Take a look at this gist for more details (and the code): https://gist.github.com/1976702

As for another thing you brought up, the $.  In the jQuery library $ is just the name of a function, also called "jQuery".  Any instance of $(somestuff) could just as well be written jQuery(someStuff).  The purpose of the function is to query the DOM or otherwise wrap raw HTMLElements in a wrapper object that itself provides all the cross-browser methods we have on http://api.jquery.com that make up jQuery.  Myself and others also make it a habit to start the name of any variable that is an instance of this jQuery wrapper with a $, just so that throughout the code if you see $varname you know that variable is a jQuery object, without having to go check where it was defined to see what it is.  Just a convention, and not necessary to writing jQuery.  If you would like some more crash course jQuery material I recommend taking a look at jQuery Fundamentals. http://jqfundamentals.com/