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?
asked Nov 25, 2008 at 17:08
-
1Why would you want to do that?? No offense, but that is the most annoying and useless 'feature' ever!– Morten ChristiansenCommented Nov 25, 2008 at 17:14
-
1I guess that is the one valid answer :)– Morten ChristiansenCommented Nov 25, 2008 at 17:18
-
1For the record, this would drive me nuts.– scunliffeCommented Mar 6, 2009 at 21:22
-
1Somehow my comment above was deleted. I answered Morten by saying that this was to fulfill a client request. Thus, his reply above.– Jeremy SteinCommented Nov 2, 2009 at 15:25
Add a comment
|
3 Answers
<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>
answered Nov 25, 2008 at 17:08
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";
}
}
I used a readonly textarea to display my license agreement. Note that this code will not work if the license agreement text is not long enough to make the textarea show a scroll bar.
$(function () {
var serviceAgreementScrolled = false;
$('#service-agreement-textarea').scroll(
function () {
if (this.scrollTop + $(this).height() + 30 >= this.scrollHeight) {
serviceAgreementScrolled = true;
}
}
);
$('#accept-service-agreement-checkbox').change(
function () {
if ($(this).is(':checked') && !serviceAgreementScrolled) {
alert('Please scroll to read the rest of the service agreement.');
$(this).prop('checked', false);
}
}
);
});
<textarea id="service-agreement-textarea" readonly="readonly">Long long text here</textarea>
<label>
<input type="checkbox" id="accept-service-agreement-checkbox" />
I accept the terms of the service agreement
</label>
