I am trying to check out a form for a page called "Agree to information." Here, the user must scroll down to move forward (remember that there is no flag at the bottom of the window, instead the user must scroll down to the end of the scroll), if the user clicks the continue / agree button without scrolling, the div / error element should be displayed, indicating , that "scrolling to the bottom of the information is required" (there should be a link for the link, when you click on it, you should highlight the field with color). here is the code and image
(function(){ angular .module('agreeToInfoApp',[]) .directive('execOnScrollOnBottom', [function () { return { restrict: 'A', link: function (scope, elem, attrs) { var fn=scope.$eval(attrs.execOnScrollOnBottom), clientHeight=elem[0].clientHeight; elem.on('scroll',function(e){ var el=e.target; if ((el.scrollHeight-el.scrollTop) === clientHeight) { elem.addClass('class-summary') scope.$apply(fn); }; }); } }; }]); })();
html:
<body> <div class="class-summary"> <div class="open"> <p>Some Information Missing</p> <ul> <li>Please scroll down to lookup the information</li> </ul> </div> </div> <form name="myform" > <div cols="3" exec-on-scroll-on-bottom name="agreeTerms" class="agree-terms" > <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> <p>adsfadfad</p> </div><br> <input type="submit" value="Continue" > </form> <script type="text/javascript" src="../../lib/angular.js"></script> <script type="text/javascript" src="app.js"></script>
Please let me know what I am missing here, or is there another way?
Agree to the information page
source share