Sometimes software installers force you to scroll to the end of the EULA before the “I agree” box is enabled. How can I produce the same effect on a web page?
+4
A:
<html>
<head>
<script type="text/javascript">
function setupPage() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
if (scrollableHeight > visibleHeight) {
var checkbox = document.getElementById("agreebox");
checkbox.checked=false;
checkbox.disabled=true;
agreement.onscroll = handleScroll;
}
}
function handleScroll() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
var position = agreement.scrollTop;
if (position + visibleHeight == scrollableHeight) {
document.getElementById("agreebox").disabled=false;
}
}
</script>
</head>
<body>
<form>
<textarea id="agreetext" rows="8" cols="40">Long agreement</textarea>
<br/><br/>
<input type="checkbox" id="agreebox" value="true"/> <label id="agreelabel" for="agreebox">I agree</label>
<br/><br/>
<input type="submit" value="Continue"/>
</form>
<script type="text/javascript">
// We put this at the end of the page rather than in an document.onload
// because the document.onload event doesn't fire until all images have loaded.
setupPage();
</script>
</body>
</html>
Jeremy Stein
2008-11-25 17:08:27