+ Start a Discussion
SHAIK MOHAMMAD YASEENSHAIK MOHAMMAD YASEEN 

make user to scroll till down and then make the agree, disagree checkboxes and submit button enabled on vfpage

Hi All,

I have a VFpage with some content on it and top i have two radio checkboxes(agree and disagree) and a button(submit).

Now my requirement is i have to disable the radio checkboxes and button when the page loads and have to enable the same when the user scrolls till end of the page(just to ensure he has read the entire content of page).


Please help me how to achieve this functionality and also please share if there any code for the same. Thanks.

BEst Regards,
Mohammad Yaseen
Best Answer chosen by SHAIK MOHAMMAD YASEEN
SHAIK MOHAMMAD YASEENSHAIK MOHAMMAD YASEEN
Hi All,

I was able to get the requirement done by using below code. Thansk all

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) 
   {
     $('#buttonId').removeClass('disabled');
 }

All Answers

Raj VakatiRaj Vakati
Hi Yaseen , 
Please find the javascript code. You can achieve it with javascript .
<apex:pageblockSection id="licenseAgreement">
	</apex:pageblockSection>
	
	<input name="button" type="checkbox" value="Submit" disabled> I agree

	
	document.getElementsById("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
    var agreementTextElement = document.getElementsById("licenseAgreement")[0] 
    if ((agreementTextElement.scrollTop + agreementTextElement.offsetHeight) >= agreementTextElement.scrollHeight){
        document.getElementsByName("button")[0].disabled = false;
    }
}



 
SHAIK MOHAMMAD YASEENSHAIK MOHAMMAD YASEEN
Hi Rajamohan.Vakati,

Thansk for your response

Instead of <input tag i am using the below for button in my code can you 

can you please help me if the code can be edited per below

<div id="topbuttons" align="Right" style="width:100%;background:#FFFFFF;margin:0px; height:35px;">
        <span> <a class=" btn btn-primary" onclick="acknowledge();">Acknowledge</a></span>
</div>

Best Regards,
Mohammad Yaseen
 
SHAIK MOHAMMAD YASEENSHAIK MOHAMMAD YASEEN
Hi All,

I was able to get the requirement done by using below code. Thansk all

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) 
   {
     $('#buttonId').removeClass('disabled');
 }
This was selected as the best answer