Return to Snippet

Revision: 31197
at September 1, 2010 02:06 by vagrantradio


Updated Code
<div id="scrollPane" style="height:150px;overflow-y:scroll;">
 <div class="inner">
  Terms of service jargon stuff here
 </div>
</div>
<input name="TERMS_ACCEPTED_YN" type="checkbox" id="TERMS_ACCEPTED_YN" value="Y"><label>I accept the blah, blah, blah.</label>

jQuery(document).ready(function() {
	jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
	
	var $box = $("#scrollPane"),
	$inner = $("> .inner", $box),
	innerOuterHeight = $inner.outerHeight();
	boxHeight = $box.height();
	boxOffsetTop = $box.offset().top;
	
	jQuery("#scrollPane").scroll(function() {
		if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
		jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
	}
 });
});

Revision: 31196
at September 1, 2010 02:05 by vagrantradio


Updated Code
<div id="scrollPane" style="height:150px;overflow-y:scroll;">
 <div class="inner">
  Terms of service jargon stuff here
 </div>
</div>

jQuery(document).ready(function() {
	jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
	
	var $box = $("#scrollPane"),
	$inner = $("> .inner", $box),
	innerOuterHeight = $inner.outerHeight();
	boxHeight = $box.height();
	boxOffsetTop = $box.offset().top;
	
	jQuery("#scrollPane").scroll(function() {
		if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
		jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
	}
 });
});

Revision: 31195
at September 1, 2010 02:04 by vagrantradio


Initial Code
<div id="scrollPane" style="height:150px;overflow-y:scroll;">
 <div class="inner">
  Terms of service jargon stuff here
 </div>
</div>

jQuery(document).ready(function() {
	jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
	
	var $box = $("#scrollPane"),
	$inner = $("> .inner", $box),
	innerOuterHeight = $inner.outerHeight();
	boxHeight = $box.height();
	boxOffsetTop = $box.offset().top;
	
	jQuery("#scrollPane").scroll(function() {
		if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
		jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
		}
 });
});

Initial URL


Initial Description
This detects if a user has scrolled to the bottom of an overflow div and enables the checkbox. Can be used for terms of service acceptance, etc.

Initial Title
Div Bottom Scroll Detection

Initial Tags


Initial Language
jQuery