/ Published in: jQuery
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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<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"); } }); });