1

I am trying to require a user to scroll to the bottom of paragraph to enable a button – almost identical to this question posed here Using jQuery, how do I force a visitor to scroll to the bottom of a textarea to enable the submit button? and answered by Christian Varga. For some reason when I use that code I am unable to get the same result – is there something in my header information that is limiting me from doing that, such as the script information.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>

textarea {      
width: 240px;
height: 200px;
overflow-y: scroll;
}

</style>
</head>

<body>

<form action="action.php">
<textarea readonly id="terms">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<button id="agreeButton" disabled>Button</button>
</form>


<script>

var activated = false;
$(document).scroll(function() {
if (!activated) {
var scrolled = $(document).scrollTop() + $(window).height();
var height = $(document).height();
var offset = height - scrolled;

if (offset == 0) {
  activated = true;
  $('#agreeButton').removeAttr('disabled');
    }
  }
});


</script>

</body>
</html>

The fiddle this originated from http://jsfiddle.net/ETLZ8/. I essentially cleared out everything but the header information and did not get it to work.

Community
  • 1
  • 1
Hambone
  • 57
  • 1
  • 8

2 Answers2

0

You're missing the js to force the button disabled until they scroll. If you don't load it in, it won't take effect.

Jorden
  • 99
  • 6
  • The JS I am using is from this working example http://jsfiddle.net/ETLZ8/. Are you suggesting I need additional JS even though the fiddle is working? – Hambone Jul 31 '15 at 13:10
  • Yes. You're not loading it. Based on your html, all you're loading is bootstrap and jQuery. – Jorden Jul 31 '15 at 13:26
0

You will also need to use jQuery 2.1.1. 

var activated = false;
$(document).scroll(function() {
  if (!activated) {
    var scrolled = $(document).scrollTop() + $(window).height();
    var height = $(document).height();
    var offset = height - scrolled;

    if (offset == 0) {
      activated = true;
      $('#agreeButton').removeAttr('disabled');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="agreeButton" disabled>Button</button>
  • After adding in the suggestions you have given me I am not sure that I have set it up in the correct manner as I still seem to be missing something... – Hambone Jul 31 '15 at 14:03