Highlighted

jQuery .load() automatically scrolls to element

LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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,

^ _ ^

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,

^ _ ^

Views

98

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

jQuery .load() automatically scrolls to element

LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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,

^ _ ^

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,

^ _ ^

Views

99

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 11, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 1
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 1
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

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,


^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0
LEGEND ,
Jun 11, 2019

Copy link to clipboard

Copied

Have you added return false to the click function?

Just a stab in the dark

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 0