Question

I’m currently adding a div to use as a slider programmatically, but when I apply the slider to it, everything appears but I can’t drag the handle nor do any of the hover states work correctly.

var container = $('<div class="container"></div>');
var slider_div = $('<div class="position_slider"></div>');

$(slider_div).slider();

container.append(slider_div);
$placeholder = $("#"+player_id);
$placeholder.append(container);

I’ve tried all number of combinations of adding the slider div to no avail, and I’m just wondering if there’s something I don’t know about that I’ve missed. Physically adding a <div class="position_slider"> to the page gets the slider working, but that’s not an option.

Answer 1

The problem was to do with jquery.flash altering the container DIV after the slider had been instantiated. I simply changed the order from build slider, append to container, insert flash to build slider, insert flash, append slider.

If you’re having trouble whereby you can see the slider and all the ui components, but you can’t operate it, try just removing all other jquery from the page apart from that which you need to accomplish the slider, then add it all back in one by one until you discover the gremlin.