dynamically change jquery innerfade

Question

I have a small form of transition settings next to some images I'm rotating using a jquery innerfade plugin. What I would like is when the user selects a new transition setting (ie, timeout) the innerfade dynamically updates the timeout setting so the user can preview what this change will look like. But I'm not sure the best way to do this? is it possible without altering the script?

$('#foo').innerfade({
    timeout: $('#bar').val()
});

my current approach doesn't work. I've also tried unbinding the innerfade from #foo, but that didn't work either and the script doesn't have a remove function.

How can I make this work?

Answer 1

I don't know innerfade but would it work to .empty() a div wrapping your preview and refill it? As a last resort you could reload the page or an iframe wrapping the preview. None of the ideas are lovely but they don't involve altering the plugin.

Answer 2

You could replace the $.innerfade.next, which actually sets the timer, without modifying the plugin.

For example: (Untested)

$.innerfade.next = function(elements, settings) {
    if (!$.data(settings.container, 'paused')) {
        $.innerfade.animate(elements, settings);
    }

    if (settings.timeoutElem)
        settings.timeout = settings.timeoutElem.val();

    setTimeout((function() {
        $.innerfade.next(elements, settings);
    }), settings.timeout);
};


$('#foo').innerfade({
    timeout: $('#bar').val()
    timeoutElem: $('#bar')
});

You'd have to re-test this every time the plugin is updated.

Answer 3

After playing around w/ the function more I tried working with a callback function - which did work and allowed me to update any of the settings as I desired. The only downfall was I had to wait for the current fade / timeout to finish before the new settings would appear. This is not what I wanted b/c if there is a long timeout (ie 20 sec) the user would have to wait until it expired before they saw their new updates in the preview. The problem I faced was, I had no way to clear the timeouts that were being set, b/c their timeoutID is never set in the original plugin. so I modified the original script to set these so I could access them and then recall the innerfade function

in the innerfade function:

$.innerfade.startTimeout = setTimeout(function() {
    $.innerfade.next(elements, settings);
}, settings.timeout);

in the next function:

$.innerfade.continueTimeout = setTimeout((function() {
    $.innerfade.next(elements, settings);
}), settings.timeout);

Now I can bind events to my form elements when they change, clear these timeouts, and reassign the function to my containing div.

$('#timeout').change(update);

function update()
{
  if (typeof($.innerfade.startTimeout) != 'undefined') {
    clearTimeout($.innerfade.startTimeout);
  }

  if (typeof($.innerfade.continueTimeout) != 'undefined') {
    clearTimeout($.innerfade.continueTimeout);
  }

  $('#container').innerfade({[opts]});
}

Answer 4

veilig's answer works well. it's a minor change to the plugin