scroll - Scrolling - jQuery shows hidden content when it is reached -

i've been following example on jsfiddle: http://jsfiddle.net/jackdent/grzpf/12/

...to automatically load more content when user reaches end of displayed content. unfortunately example seems work when .content div has set height in pixels in css.

how can achieve desired result without setting height? i've got tonne of information on single page, broken several sections, want hidden before users scrolls it, @ point appears.

been looking @ infinite scrolling plugins, examples seem remote content. need same thing content on 1 page. i'm competent html/css, can insert jquery , play around values little, otherwise terrible it...

---

jquery

//set intital divs hidden $(".content").addclass("noshow");     var contentnumber = 0;      function reveal() {         var constraintnumber = contentnumber + 6;         //important - not delete         $(window).trigger('resize');         //important - not delete         (i = contentnumber; < constraintnumber; i++) {             //get nth div of class content, n contentnumber, , make shown             $('.content').eq(contentnumber).removeclass("noshow");             contentnumber ++;         }     }  //window scroll function $(window).scroll(function() {     if ($(window).scrolltop() == $(document).height() - $(window).height() )         {         reveal();         } }); reveal(); 

---

html

<div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> <div class="content">i have content</div> 

---

css

.content {     margin: 1px;     width: 200px;     height: 400px;     border: 1px solid black;     float: left;     background-color: gray; }  .noshow{     display: none; } 

set height "auto". tried succesfully in fiddle after putting more content divs.