jQuery slider: clone and delete element based on slider value -
just title says...
i'm trying find best way duplicate/clone div based on slider value; conversely, i'm trying remove added elements when slider value decreased. effectively, slider value should reflect number of cloned elements displayed (stacked on top of each other). initially, 0 elements displayed.
e.g.
element cloned:
<div class="test" style="display: none">test</div>
slider: http://jqueryui.com/demos/slider/#slider-vertical
init:
max: 20, value: 0,
thanks in advance!
you can use stop event of slider calculate how many divs need add or remove. adding , subtracting div elements clone well.
demo: http://jsfiddle.net/lucuma/ggc8s/
$(function() { $("#slider-vertical").slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 0, stop: function(event, ui) { $("#amount").val(ui.value); var diff = ui.value - $('#content div').length; if (ui.value == 0) { $('#content div').remove(); } else if (diff < 0) { $('#content div:gt(' + ($('#content div').length + diff - 1) + ')').remove(); } else { var = diff; while (i--) { $('#content').append('<div>div</div>'); } } }, slide: function(event, ui) { $("#amount").val(ui.value); } }); });
as alternative remove divs , regenerate them instead of calculating deltas.
demo: http://jsfiddle.net/lucuma/ggc8s/3/
$(function() { $("#slider-vertical").slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 0, stop: function(event, ui) { var diff = ui.value; $('#content div').remove(); while (diff--) { $('#content').append('<div>div</div>'); } }, slide: function(event, ui) { $("#amount").val(ui.value); } }); });
Comments
Post a Comment