Menu
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?
984
<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>
Excellent bit of code, if you also want to change the color in the label next to the checkbox, just modify the code as follows:
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;
document.getElementById("agreelabel").style.color = "#777";
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;
document.getElementById("agreelabel").style.color = "black";
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
