Scrolling “Agree to Terms” Component with MooTools ScrollSpy

By  on  

Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done it.

The HTML

<form method="post">
	<div id="terms-pane">
		<h2>Terms & Conditions</h2>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<!-- many more... -->
	</div>
	<input type="submit" name="submit" id="submit" value="Submit" />
</form>

The scrolling area must be wrapped with a DIV.

The CSS

	#terms-pane	{ width:800px; height:200px; overflow:scroll; border:1px solid #ccc; background:#eee; margin:5px 0; padding:10px 20px; }

The aforementioned DIV should have an explicit height and the overflow set to scroll.

The MooTools JavaScript

window.addEvent('domready',function() {
	//disable submit
	var submit = $('submit');
	submit.disabled = true;
	//scrollspy
	var div = $('terms-pane'), height = div.getScrollSize().y;
	var spy = new ScrollSpy({
		container: div,
		min: div.getScrollSize().y - div.getSize().y, //tolerance
		onEnter: function() {
			submit.disabled = false;
		}
	});
});

We start out by disabling the submit button. Then we calculate both the height and the scroll height of the DIV, subtracting one from the other to get the allowance range of the scrolling area. When the user scrolls down there, ScrollSpy fires the enter event and we know the user has hit the bottom!

I used to hate these things when they were included in Windows application installs. If you want this type of effect though, here it is.

Recent Features

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

Discussion

  1. Nice! And annoying ;)

    When I F5 the page when scrolled down in Firefox the page reloads with the scrolling at the bottom but with the button disabled. It should check on page load what the current position is (if possible).

  2. @Vincent van Scherpenseel: I like that idea. I’ll add some MooTools to it a bit later today that automatically scrolls the div to the top at page load.

  3. Wow, I just had to do this a few weeks ago in jQuery for a client project. Interesting to see it from the MooTools perspective.

  4. Salih Gedik

    Wow. Nice work dood

  5. Now, that is neat! I’ve seen those during install, but on a webpage, I think it’s a first…
    A simple tweak that “forces” user to read the agreement… Useful on some stuff.

  6. ALEX

    I like the script, but if anyone asks for this is a project, is because they don’t know that people don’t read those “terms”. They just scroll down. And if anyone is interested in reading it, they will do it without this script “forcing” them. Also you can always move the terms out of the form (hence cleaning it up) and just display a link to them (lightbox ir whatever), making clear that clicking on “submit” implies accepting them.

    I’m not trying to be picky; I love the simplicity of the script. ;-)

  7. ALEX

    how can I edit my comment?
    i wanted to say “if anyone asks for this IN a project”…

  8. Jeff Hartman

    Alex,

    People who ask often know people don’t read the terms. They are doing it so they don’t get sued.

  9. Jeff Hartman

    Rather, not so they don’t get sued, but have a defense when they do get sued.

  10. ALEX

    I don’t mean to draw the attention off David’s cool script ;-) but… Isn’t including the text “Clicking ‘submit’ implies accepting the terms of use” enough, legally speaking? Does including this script prevent them from being sued?… hmmm…

  11. Jeff Hartman

    To my knowledge (which includes nothing about law), clicking submit alone is not legally binding.

    Is putting some unsigned mortgage documents in a stamped envelope in a mailbox similar as clicking submit? Since you sent them back, does that mean you are accepting the terms of the mortgage agreement?

  12. ALEX

    Might be… But, is scrolling down like signing a document? Then, the script is useful. For the life of me, I don’t know these things. But it’s strange to me that scrolling down is more legally binding than a explicit sentece (I’m referring to the “clicking submit implies..” notice). For example, when you buy a flight online, you never get to read the contract between you and the airline, but clicking on “buy” implies you accept it. No?

  13. This is excellent. I might be incorporating this into one of my latest projects :)

  14. john

    Not seeing the button appear at all:

    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

  15. john

    @john: Nvm I’m an idio and was looking for the “I agree” button.

  16. Dutchie

    @ALEX: I agree with you. This isn’t any more than eye candy, since the JS FX rage has only started 2 years ago orso :) plus, this is a Mac style fx in the first place (or maybe Windows is doing it now as well? dunno).

    Anyway- it’s a nice script and a good example of what you can do with it.

  17. Beaver

    This does not work for iPhone/iPad any ideas how to fix it?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!