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

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -