javascript - How to load remaining more results with scoll down to the end of the div? -
i dealing scroll down event display more results when scroll bar goes down end of tag. have division(div) able append tags when scroll bar goes down end. have written following code.
in script:
<script> $(document).ready(function () { $(window).scroll(function () { if ($(window).scrolltop() + $(window).height() > $('#main').height() - 200 ) { fun(); } }); var fun= function(){ $('p').appendto("#main"); settimeout(fun2, 100); } var fun2=function(){ $("#main").append("<p>hello scroll me</p>"); } }); </script> in body:
<div id="main"> <p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p><p style='height:100px;'>hello scroll me</p> </div> i have achieved this, need is:
i have 100 'p' tags in division(), want display 10 p's @ first , when move scroll bar down end want display next 10(total 20)...so on. not getting do.
can please me with out referring scoll plug inns
html
<div id="main"> <!-- <p> tags here --> </div> <span id="indicator"></span> css
.hidden { display: none; } jquery
$(document).ready(function() { $("#main p").addclass("hidden"); while ($("#main").outerheight() < window.innerheight) { shownextten(); } $(window).scroll(function(e) { if (($("span").offset().top - $(window).scrolltop()) <= window.innerheight) { shownextten(); } }); }); function shownextten() { $("#main p.hidden").slice(0, 10).removeclass("hidden"); } the span outside #main div used indicator check whether scrollbar has reached bottom of page.
and way, used while loop load not first 10 ps, because if first 10 loaded there's chance not long enough produce scrollbar, scroll event can triggered , useless. if want first 10 can remove while loop , instead call shownextten() immediately.
Comments
Post a Comment