2

I can't find a website at the moment, because I'm not at my desk where this is done, but I have seen it when you register there is a Terms of Use. To make sure the user reads it, it appears in a dialogue box (not sure of the exact name of this in HTML) and the "register" button stays greyed out until the user scrolls through the entire Terms of Use. How is this done? I am assuming this is JavaScript, but I don't know how to detect and control this. Some examples of this or how this is done in JavaScript would be very helpful. Thanks!

Edward
  • 9,430
  • 19
  • 48
  • 71
  • 5
    Nope, not going to happen. No one is going to read your terms of service - sorry. If you just want to make sure they scroll you can check the `.scrollTop` property. – Benjamin Gruenbaum Nov 04 '13 at 22:02
  • 6
    Let me guess: Your boss wants this for legal reasons? Have you tried carefully explaining what a horrible thing this is for usability? – SomeKittens Nov 04 '13 at 22:09
  • Check this post if you want to use jQuery.http://stackoverflow.com/questions/8114611/check-if-div-is-viewable-in-window – Mark Nov 04 '13 at 22:09
  • Seems like this question should answer yours http://stackoverflow.com/questions/2745935/is-there-a-way-to-force-a-user-to-scroll-to-the-bottom-of-a-div – bmcculley Nov 04 '13 at 22:12
  • 3
    Well, if you place the register button at the end of terms of service page, then it has the same result. – Rainer Plumer Nov 04 '13 at 22:12
  • Also if it is for legal reasons - how do you cover users that dont have JS enabled - i know its a tiny % nowadays, but if you need to be that sure that you want a script to check they scrolled to the end of your T&C you should, with the same cap on be thinking about these users. – sam Nov 04 '13 at 22:59

2 Answers2

3

You can do this without jQuery with the following code:

//Your DIV with the TOS
var i=document.getElementById("ipsum");

//Event Listener for Scroll
i.onscroll=function(){
    //Your Button
    var y = document.getElementById("yay");

    //The height to scroll to:
    var x = i.scrollHeight - i.offsetHeight - 1;

    if(i.scrollTop >= x)
        y.removeAttribute("disabled");
    else if(!y.hasAttribute("disabled"))
        y.setAttribute("disabled",true);
};

Fiddle with HTML and CSS here.

Also, I agree with everyone else who's posted or commented, this is probably not a good idea.

Jason Nichols
  • 3,739
  • 3
  • 29
  • 49
2

You want to check the scrollTop is toward the bottom of the scrollHeight on the element.

$('.tos').scroll(function() {
   if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
       $('input[type="submit"]').prop('disabled', false);
   }
});

Adapted from this answer

Here is a jsfiddle example.

Warning: Before you implement this

This will not detect if the user has read the terms. It is also extremely annoying to have to scroll through these (often tiny) TOS boxes.

A much, much better solution is to require the user to explicitly tick a box stating they have read and understand the TOS.

Community
  • 1
  • 1
Jess Telford
  • 12,880
  • 8
  • 42
  • 51
  • Please do not offer a jQuery solution to a problem not tagged with jQuery. It has been discussed several times among the community in Meta the community decided against it. Note it's extremely simple to convert this code to vanilla JavaScript using `Element.scrollTop` https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop – Benjamin Gruenbaum Nov 04 '13 at 22:18
  • 3
    +1 for the checkbox suggestion. IANAL but this is probably the legally-better solution and in addition it's less annoying (people won't actually read a long, maybe even all-uppercase, wall of legalese) – ThiefMaster Nov 04 '13 at 22:19