asp.net mvc - loading data by scrolling using javascript -
i displaying data on page , when click on load more data button load more data on same page below data displayed. want convert feature more data loaded user scrolls down page rather clicking on load more data. here have , have attempted.
html view
<section id="rosterimages"> <section id="users"> <div id="nameimage"> <figure id="content" class="thumbnail"> <img width="158" height="158" alt="gravatar" data-bind="attr:{src: gravatarurl}"/> <figcaption> <a title="email" id="emailicon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + email()}"></a> </figcaption> </figure> </div> </section> </section> javascript scroll
$(window).scroll(function (e) { if ($(window).scrolltop() >= ($(document).height() - $(window).height()) * 0.7) { $('#users').append(next()); } }); next method
next = function () { var _page = $.views.roster.viewmodel.currentpage() + 1; $.views.roster.viewmodel.currentpage(_page); $.views.roster.getpage("/api/roster", 9, _page); }; the next method works if link button not scroll.
is fine if try loading data when user scroll's end of page,
then can possibly try :-
<script> $(window).scroll(function () { //will check if user has reached bottom of page if ($(window).scrolltop() == $(document).height() - $(window).height()) { alert('just checking if end of scroll works'); $('#users').append(next()); } }); </script> [updated] tried same $(document).ready(function () {));, , works charm:-
$(document).ready(function () { // handler .ready() called. $(window).scroll(function () { alert("scrollbar initiated"); //will check if user has reached bottom of page if ($(window).scrolltop() == $(document).height() - $(window).height()) { alert("scrollbar appended"); $('#users').append(next()); } }); }); the complete code tried below:-
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <script> $(document).ready(function () { // handler .ready() called. $(window).scroll(function () { //will check if user has reached bottom of page if ($(window).scrolltop() == $(document).height() - $(window).height()) { alert("scrollbar appended"); $('#users').append(next()); } }); next = function () { var text = "..............appended lipsum......................"; return text; }; }); </script> <body> <div id="users"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque sed tellus mauris, non tincidunt libero. nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. suspendisse ut ante justo. proin mollis pellentesque elit, in eleifend erat rhoncus vel. aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. suspendisse eget neque id risus pharetra sollicitudin. </p> <p> fusce fermentum sollicitudin neque eu vestibulum. donec adipiscing fermentum varius. ut ut libero lacus, ut viverra dolor. praesent bibendum elementum dui @ consequat. pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. aliquam erat volutpat. donec fermentum molestie tempor. donec non facilisis metus. nam convallis tempor ipsum in scelerisque. mauris cursus metus sed justo pretium fringilla. nulla cursus scelerisque tellus vel ornare. etiam sit amet sapien diam, ut commodo mi. vestibulum nec enim id metus feugiat aliquet. integer varius faucibus odio vel eleifend. nunc convallis lectus @ quam consequat ac accumsan nunc sodales. </p> <p> nunc elementum augue quis velit hendrerit vel aliquam dui porta. pellentesque sollicitudin tincidunt elit ac cursus. sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. nullam in massa felis, sit amet tempus urna. vestibulum condimentum urna quis tortor volutpat sodales. nullam sed nisl est, eget pulvinar elit. pellentesque sagittis congue urna, nec molestie quam lacinia nec. ut rhoncus fringilla tellus, eget molestie nibh mattis quis. nunc nec purus elit. cras vitae felis ac arcu iaculis egestas. pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. nulla nunc neque, sed fermentum risus. vestibulum pellentesque elementum suscipit. nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nunc lacinia justo in ante ornare consequat. </p> <p> sed dapibus quam ut augue luctus rhoncus. aliquam cursus semper velit ac feugiat. nullam erat magna, adipiscing id pharetra vel, elementum ut odio. phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. nunc tristique velit et turpis viverra vel condimentum nibh varius. vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. suspendisse auctor quam vitae nisl blandit vulputate. praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. phasellus dictum tincidunt massa, sed dictum urna rutrum id. praesent eu gravida risus. </p> <p> nullam et neque tortor, ut accumsan nisl. nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. praesent rhoncus malesuada mauris @ fringilla. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; aliquam ac massa lacus, et eleifend turpis. proin fringilla imperdiet eros @ venenatis. fusce eu tempor lorem. morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. maecenas in augue nunc, et ultrices risus. fusce convallis tempus varius. pellentesque eget nulla magna, ac ornare nibh. morbi euismod dolor et nisl molestie in ornare eros gravida. praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. suspendisse nec nisl erat, ut ornare risus. nulla nec pretium sapien. </p> <p> proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. in consequat pretium dolor vel sollicitudin. aliquam quis mauris eu elit hendrerit ultrices et justo. phasellus nec sodales felis. pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. proin posuere augue eu odio volutpat ultrices. donec pulvinar interdum eros in auctor. sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. phasellus ac augue urna. pellentesque feugiat suscipit semper. pellentesque luctus tempus tincidunt. ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. nam purus neque, accumsan nec lacinia ut, varius vel arcu. nullam @ orci sem, et aliquet augue. nam imperdiet suscipit feugiat. suspendisse dictum mi eget magna commodo @ tristique odio dictum. </p> <p> ut magna nec nulla ultrices faucibus. praesent et est est. aliquam vulputate lobortis tincidunt. phasellus rhoncus imperdiet aliquet. nullam id mi neque, sit amet tristique urna. integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. quisque consectetur ornare euismod. nam vel iaculis risus. proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p> nullam bibendum posuere adipiscing. suspendisse potenti. praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. curabitur sed purus eu turpis congue egestas. sed tempus orci quis elit hendrerit pretium. nam dictum nibh non orci vestibulum elementum. phasellus sit amet velit volutpat erat elementum venenatis. quisque facilisis egestas libero, gravida nibh rhoncus quis. quisque risus diam, viverra eu lacinia eu, ultrices non eros. curabitur placerat imperdiet neque, ut cursus purus posuere eu. proin sed ipsum leo, vitae rutrum diam. suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. vivamus et bibendum justo. </p> <p> duis sed metus ac mi fermentum congue in vel nisl. integer nunc magna, pulvinar venenatis a, accumsan varius libero. integer facilisis urna non enim viverra porttitor ante lobortis. pellentesque pharetra gravida porttitor. morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. praesent euismod aliquam laoreet. praesent @ dolor eget augue convallis viverra vel ut ante. praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, porta nunc felis @ felis. nam eget libero urna. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. aenean iaculis massa sed purus tempor eu laoreet odio venenatis. integer ultrices felis id ante pharetra bibendum. sed @ lorem vitae nunc vestibulum egestas. fusce vel malesuada neque. </p> <p> sed non pretium sem. aliquam id elit malesuada mi commodo dignissim ac sit amet diam. integer fringilla arcu id est tincidunt non vestibulum eros commodo. sed dictum sapien in nisi dapibus id pretium ipsum rutrum. nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. aenean eu tristique augue. suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. suspendisse eget turpis varius magna pretium fermentum. nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec sit amet mi augue. maecenas pretium accumsan sollicitudin. </p> <p> in @ neque quam, sed sollicitudin eros. praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. nullam bibendum, nisl scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, bibendum lectus nisl sit amet felis. mauris @ lorem quis est auctor tristique. quisque dui libero, congue vel fermentum vel, congue quis libero. aenean cursus dolor @ augue sodales rutrum. aenean egestas vulputate nulla, @ porta tortor venenatis id. vivamus sit amet lectus vitae lorem pellentesque mollis sed diam. donec consectetur mi non sapien sagittis faucibus. proin @ lacus purus, in lobortis lorem. praesent ac arcu justo, @ elementum erat. quisque vulputate accumsan turpis. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. duis tempor erat vel tellus pellentesque tincidunt. duis dolor mi, placerat id molestie laoreet, semper ut nibh. </p> <p> suspendisse potenti. sed eu risus dolor, vel semper libero. sed accumsan est eget urna vulputate pretium. integer varius venenatis quam. praesent lacus diam, condimentum quis luctus in, convallis vitae est. suspendisse potenti. phasellus interdum mauris ut nisi feugiat sodales. vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. in sed odio arcu. proin id diam lacus tristique posuere. integer luctus urna et nulla ultrices interdum. </p> <p> vestibulum eros quam, et laoreet nisi. duis convallis tincidunt augue nec pulvinar. nunc malesuada urna ut sem placerat consequat. nulla sollicitudin venenatis quam sollicitudin gravida. curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. in turpis augue, luctus et iaculis a, molestie @ risus. praesent sit amet ante ac ipsum fringilla dignissim. aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. proin quis varius velit. </p> </div> </body> </html>
Comments
Post a Comment