Forcing a user to read (or scroll through) all text before accepting terms

Don — Thu, 10 Dec 2009 23:39:58 +0000

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:


Lots of text to read.
Lots more text to read

Here’s our button:

Here’s our JavaScript:



<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>

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.

Dynamically re-size an iFrame’s height across browsers

Don — Wed, 08 Jul 2009 15:40:19 +0000

A while back I had a need to dynamically re-size an iFrame’s height and found a solution using a jQuery plug-in called autoHeight. What I later found was that this solution provided poor results with Internet explorer when my iFrame’s contents were fairly large and frequently changing (i.e. via navigation inside the iFrame).

It took quite a bit of tinkering but I was able to come up with a solution that works (and works well) in IE, Firefox, Safari and Chrome. It still uses jQuery but doesn’t depend on a plug-in. Here’s the code in case you’re looking for the same thing:

First, the iFrame…

Next, the JavaScript to resize it…

<script type="text/javascript">
 
     function sizeFrame() {
          jQuery("#MyFrame", top.document).css({ height: 0 });
          var heightDiv = jQuery("#MyFrame", top.document).contents().find('body').attr('scrollHeight');
          jQuery("#MyFrame", top.document).css({ height: heightDiv });
     }
 
     jQuery(function() {
          sizeFrame();
          jQuery("#MyFrame").load(sizeFrame);            
     });
 
script>

This line is needed to initially initialize the height so that it works in Safari and Chrome. Without this line the window will never shrink to fit smaller content, it will just retain the last biggest height.

jQuery("#MyFrame", top.document).css({ height: 0 });

Don Kitchen » JavaScript

Forcing a user to read (or scroll through) all text before accepting terms

Dynamically re-size an iFrame’s height across browsers