If you’ve used a computer before you’ve undoubtedly scrolled through and agreed to some sort of agreement. Most likely it was some sort of software license agreement that you didn’t read about some website you were signing up on or an application that you were installing.
Maybe, if you’ve installed enough software or been on enough websites you’ve come across an instance where they actually forced you to scroll all the way down to the bottom of the text before you were able to click “I Agree” or whatever acknowledgment they wanted you to use.
Well I was recently faced with creating this exact situation in a web application and ended up using jQuery to accomplish this in my ASP.NET application. For my particular situation I ended up putting my content inside a scrollable div. This can easily be done by using a textbox if you wanted without much effort.
Basically, here’s what you’ll need.
- Reference jQuery (I’m not going to go into that, you can easily find that out here)
- Put a DIV on your page containing your text that needs to scroll (obviously you’re putting more than a few sentences or you wouldn’t be in this boat)
- Put a button on your page that, once enabled, will log the user’s acceptance and redirect them accordingly
- Some simple JavaScript to tie the DIV’s scrolling event to your button
Here’s our DIV:
<div style="width: 400px; height: 400px; overflow: auto; id="Terms"> <p>Lots of text to read.</p> <p>Lots more text to read</p> </div>
Here’s our button:
<asp:Button ID="ContinueButton" runat="server" Text="Continue" />
Here’s our JavaScript:
<head runat="server"> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Initially disable the button $("#ContinueButton").attr("disabled", "disabled"); // Map the function below to the scroll event of our Terms DIV $("#Terms").scroll(function() { if ($("#Terms").AtEnd()) { // Enable the button once we reach the end of the DIV $("#ContinueButton").removeAttr("disabled"); } }); }); $.fn.AtEnd = function() { return this[0].scrollTop + this.height() >= this[0].scrollHeight; } </script> </head>
And that’s it. This code is light weight and works in IE, Firefox, Chrome and Safari. Have any feedback or suggestions on how to make it better? Let me know.
