You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am building a mobile Infinite scrolling for Mobile page using AngularJs but scrolling is not working for me. I am new to AngularJs.
I just wanted to use the $(window).scroll(function () as I mentioned below. Not the <div> scroll.
Source reference from MVC 4 Jquery Mobile site page.( paging logic from Internet example).
NOTE:
when-scrolled=loadMore() is not firing for <div> with overflow: auto; but anyway I do not need with inner scoll bar for div tag because of the mobile page.
This code is listing only first iteration 0,10,20,30,40 after the page is loaded after that no effect for scroll down.
With or without jquery-mobile-angular-adapter.js reference this results are the same except scroll down event. When do I need jquery-mobile-angular-adapter.js.
Stand alone jquery-mobile-angular-adapter is 1.2 MB isn't very big for Mobile page ?
Could you please help me how to fix this. Or please suggest any other way for Infinite scrolling.
This is from view source after first render
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><title>Index</title><metaname="viewport"content="width=device-width"/><linkhref="/favicon.ico"rel="shortcut icon"type="image/x-icon"/><linkhref="/Content/jquery.mobile-1.2.0.css"rel="stylesheet"/><linkhref="/Content/jquery.mobile.structure-1.2.0.css"rel="stylesheet"/><linkhref="/Content/jquery.mobile.theme-1.2.0.css"rel="stylesheet"/><linkhref="/Content/site.css"rel="stylesheet"/><scriptsrc="/Scripts/modernizr-2.6.2.js"></script></head><body><divdata-role="page"data-theme="b"><divdata-role="header"><h1>Index</h1><adata-icon="gear"href="/Account/Login">Log in</a></div><divdata-role="content"><h2></h2><bodyng-app><divng-controller="Main"><divdata-role="content"style="padding: 15px;overflow:hidden"when-scrolled="loadMore()"data-theme="c"data-content-theme="c"><uldata-role="listview"><ling-repeat="i in items">{{i.id}}</li></ul></div></div></body><scripttype="text/javascript">
function Main($scope) {////////// I HAVE ADDED THIS CODE TO SHOW.. I want to bind this one instead of div scroll$(window).scroll(function(){if($(window).scrollTop()==$(document).height()-$(window).height()){alert("Scrolled down!!!");}});$scope.items=[];varcounter=0;$scope.loadMore=function(){for(vari=0;i<5;i++){$scope.items.push({id: counter});counter+=10;}};$scope.loadMore();}angular.module('scroll',[]).directive('whenScrolled',function(){returnfunction(scope,elm,attr){varraw=elm[0];elm.bind('scroll',function(){//var oo = 'dd'; alert('');if(raw.scrollTop+raw.offsetHeight>=raw.scrollHeight){scope.$apply(attr.whenScrolled);}});};});</script></div></div><scriptsrc="/Scripts/jquery-1.8.2.js"></script><script>
$(document).on("mobileinit", function () {$.mobile.ajaxEnabled=false;});
</script><scriptsrc="/Scripts/jquery.mobile-1.2.0.js"></script><scriptsrc="/Scripts/angular_1.2.0rc1.js"></script><scriptsrc="/Scripts/jquery-mobile-angular-adapter-1.2.0.js"></script></body></html>
The text was updated successfully, but these errors were encountered:
I am building a mobile Infinite scrolling for Mobile page using AngularJs but scrolling is not working for me. I am new to AngularJs.
I just wanted to use the $(window).scroll(function () as I mentioned below. Not the
<div>scroll.Source reference from MVC 4 Jquery Mobile site page.( paging logic from Internet example).
NOTE:
<div>with overflow: auto; but anyway I do not need with inner scoll bar for div tag because of the mobile page.Could you please help me how to fix this. Or please suggest any other way for Infinite scrolling.
This is from view source after first render
The text was updated successfully, but these errors were encountered: