A while ago I was here to find out how to enable a checkbox on scroll down of a div.
Everything was fine and it all worked. Though several months later it stops working and I can't figure out why.
By "stops working" I mean when I scroll down to the bottom of the div now the checkbox remains disabled.
There is no response and no apparent errors
I just want a scrollable div to enable a checkbox when the user scrolls to the bottom of the div.
Here is the Jquery
<!--jQuery which detects user scroll down of TnC's and enabled checkbox-->
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
Here is the div in question
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit.
</p>
<p>
S Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit.
</p>
</div>
and here is the check box
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I confirm I have read and agree to the terms and conditions. (Must be ticked to continue)</span>
Does anybody see a problem here that I am missing? At the moment scrolling the div does not enable to checkbox.
Aucun commentaire:
Enregistrer un commentaire