CODEWITHSUNDEEP
javascriptjqueryhtmlfilter
James Rand
James Rand

Reputation: 57

Update number of divs displayed based on a text input value

I think i am going in the right direction i just seem to be missing something simple

i am using the jquery knob plugin to update the input field

$('document').ready(function() {

    $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);

                        var num = parseInt($("#sitesinput").val());
                        var total = $(".one").length;
                        alert(num + ' ' + total);

                              $(".one").slice(1,value).fadeToggle();


                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    }
                });

});

<div class="item box one">1</div>
<div class="item box one">2</div>
<div class="item box one">3</div>
<div class="item box one">4</div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box two"></div>
<div class="item box three"></div>
<div class="item box three"></div>
<div class="item box three"></div>
<div class="item box three"></div>

I have attached a link to the demo i have been working on demo

Thanks,

Upvotes: 0

Views: 124

Answers (1)

Jeff Shaver
Jeff Shaver

Reputation: 3355

Change the fade toggle to this:

$('.one').slice(0,value).fadeOut();
$('.one').slice(value).fadeIn();

That says to hide the ones that are below the value and show the ones that are above it. You were close, but the fade toggle was hiding/showing ones that you didn't want to.

JSFiddle: http://jsfiddle.net/HYt4Z/6/

Upvotes: 1

Related Questions