jQuery .load() automatically scrolls to element

[WolfShade]

Hello, all,

I'm using jQuery .load() to refresh a CAPTCHA, and for some reason every time the refresh is done the page will scroll up.

<div id="captcha">
     <cfinclude template="hmntst.cfm"/>
</div>
...
$('#refresh').css({'cursor':'pointer'})
     .click(function(){
          $('#captcha').html("Working.."); /* if the CAPTCHA is slow to reload */
          $('#captcha').load('hmntst.cfm');/* This is a CF CAPTCHA */
          });

Any thoughts?

V/r,

^ _ ^

[B i r n o u]

perhaps that the TAG having the 'refresh' id has a href pointing to a #... so if this is the case add a return false at the end of your click function

[WolfShade]

There is no href on the 'refresh' element.

<span id="refresh" class="refresh-btn">
    <img src="images/refresh.png" alt="Having trouble reading? Click to refresh." style="width: 20px; height: 20px; padding: 10px;" title="Having trouble reading? Click to refresh.">
</span> Click to refresh CAPTCHA image.

V/r,

^ _ ^

[B i r n o u]

it's an inline TAG, what is wrapping it ? and what is wrapping the nested Block is any ?

does using the return false, still produce the same result ?

[osgood_]

So the page scrolls up, it doesnt jump. Is there any smooth scrolling associated with the page?

[B i r n o u]

by the way do you have any scrolling function associated to the page ?

[WolfShade]

I will supply as much code as I can.

request.cfm:

<span class="spacer-20"></span>  
<div>
     <div id="captcha"><cfinclude template="hmntst.cfm"/></div>
</div>

hmntst.cfm:

<cfoutput>
    <cfsilent>
        <cfset alphaNum = ['6','F','@','G','H','J','K','L','M','N','P','Q','R','S','T','B','U','V','W','X','$','Y','5','2','Z','a','b','?','c','d','D','8','e','f','g','h','A','j','k','m','n','o','p','q','7','r','9','s','&','E','4','t','u','v','w','x','3','y','C','z'] />
        <cfset anLen = ArrayLen(alphaNum) />
        <cfset session.captchaText = "" />
        <cfloop from="1" to="6" index="idx">
            <cfset session.captchaText &= alphaNum[RandRange(1,anLen,'SHA1PRNG')] />
        </cfloop>
        <cfset funcimg = ImageCreateCaptcha(85,250,session.captchaText,"medium","serif", "30")>
    </cfsilent>
    <div class="wrapCaptcha" id="wrapCaptcha">
        <p>Enter the case-sensitive text from the image into the box below it:<span class="reqd">*</span></p>
        <div id="captchaDisplay"><span id="refresh" class="refresh-btn"><img src="images/refresh.png" alt="Having trouble reading? Click to refresh." style="width: 20px; height: 20px; padding: 10px;" title="Having trouble reading? Click to refresh."></span> Click to refresh CAPTCHA image.</div>
        <div id="captchaInput"><cfimage action="writetoBrowser" source="#funcimg#"></div>
        <div><input id="capText" name="capText" maxlength="6" /></div>
        <div class="clear"></div>
    </div>
    <p>Fields marked with <span class="reqd">*</span> are required.</p>
</cfoutput>

Thank you for looking into this.

V/r

^ _ ^

[osgood_]

Have you ruled out its nothing in the hnmtst.cfm file which is causing the issue?

Id probably just test this on a simplified page replacing the code in in the hnmtst.cfm with a simple image or something.

Just loading an external file shouldnt cause a scrolling effect unless there is something in it which would evoke that action and it doesnt seem as though you have any scrolling functions in the actual page itself.

[WolfShade · Accepted solution]

You can't see it, but right now I'm facepalming myself.  Can't believe how simple this was.

<div id="captcha" style="height: 240px;"><cfinclude template="hmntst.cfm"/></div>

SMH,

^ _ ^

[B i r n o u]

seams odd, what happen if the height is less than 240px, 240px is still a pretty significant height for a captcha, don't you think ?

any chance to have an online link of that page, or is it a private dev ?

[WolfShade]

Development environment #1 is air-gapped, cannot be accessed by internet.  Dev environment #2 is restricted, and requires a valid Common Access Card (CAC) to access.  Production is open to public, but the changes are not working; I suspect that there is a permission allowed in development environments that is not in place in production.  We are working to track that down.  Frantically.

V/r,

^ _ ^

[osgood_]

Have you added return false to the click function?

Just a stab in the dark