Recently a client wanted to have a user agreement added to an enrollment form. The catch was that I needed to confirm that the user had at least scrolled through the text before allowing them to continue on with the form submission. Once again, jQuery to the rescue!

HTML

<div class="agreement">
  <div class="agreement-inner">
    Content for agreement goes here...
  </div>
</div>
<div class="agreement-agree">
  This is the stuff I want activated when the agreement has been read.
</div>

jQuery JavaScript:

$(".agreement").scroll(function() {
  if ($(this).scrollTop() >= ($('.agreement-inner',this).height() - $(this).height())) {
    $('.agreement-agree').removeClass('disabled');
    $('.agreement').unbind('scroll');
    $('.agreement-agree').fadeTo(0,1);
  }
});

I’m currently working on deploying this to a generic jQuery plugin that will let you specify the content that needs to be scrolled through as well as the content should become enabled once that criteria is met.

Comments are closed.