Unexpected scroll in web page with HTML5 Captivate embedded in an iFrame

[Zozo1977]

I embedded Captivate 2019 HTML5 project in iFrame of the web page. Everything works fine except the main page scrolls to the iframe on load in Firefox and Edge. It's certainly not what I expected and I can't figure out why is it happening. Some forums  suggest it is in some way connected to autoplay function. I tried with autoplay on and off but the problem is the same, although autoplay doesn't work at all due to the known autoplay problem. Any help would be appreciated.

[Lilybiri]

Do you have bookmarking enabled by TOC?

[Zozo1977]

I don't even have TOC enabled. 

BTW, what exactly  do  you mean by TOC bookmarking option?

[Lilybiri]

In TOC settings, if 'Self-paced learning' is checked (default) you have bookmarking by TOC set up (uses local storage). I have that for some of the tutorials on my blog, and got the same issue with examples in an iFrame. Whenever I open the blog, it scrolls automatically to that iFrame to show the Runtime dialog box. Thought you were talking about such a phenomenon but stepped away since totally different answers were given. This happened only recently on Chrome in my case.

[Paul Wilson CTDP]

Two possibilities I see. Your iframe size simply isn't large enough to accommodate your eLearning course. Alternatively, you could experiment with turning on HTML scaling when publishing your course (assuming it's non-responsive of course). If so your course will squeeze in the space provided. I've never done this within an iframe mind you so I don't know what to expect. Try it and see what happens.

[Zozo1977]

Dear Paul, you are talking about content size and iframe size. This is not an issue here at all. I don't see correlation with the problem described above. The frame size is matched with content size anyway. So far, I didn't find any real solution. I did some javascript fix but this is a lame solution that doesn't work well everytime because it depends on browser, loading speed, etc...  I would really like to know what's triggering the page jump. 

I added the following line:

window.top.scroll(0,0);

in index.html bellow the following lines:

cpInit();

initialized = true;

[Sancaks]

Hi there,

i am having the same problem, could you tell me how did you fix the javascript? By using iframe code, or any Captivate exported *.js file?

thx

[Sancaks]

Sorry for asking again, u already explained it in your entry. I applied it in my export file and it did work. It makes small jump between automatic scrolls after mouse click. But it works. As a clue why this did happen, i can point the autostart function in project settigns>start and end. My problem started with it. If you disable the autostart, because u use a poster like me. Captivate generates a play icon and iframe focuses on it automatically i guess...

[Zozo1977]

I guess I didn't describe this very well. English is not my native language, sorry about that. So, this is the issue: When the page loads, it jumps to the iframe in which the Captivate content is embeded. The page has a lot of content at the beggining of the page so it jumps for few pages. That's what I meant when I was talking about scrolling page. 

[mj88888]

Hi Zozo1977
I am having the same problem with the page jumping to the Captivate tutorial in an iframe in Firefox and Edge. I tried your workaround but it didn't work for me. Did you find a solution to this?

Regards, Mark

[Lilybiri]

Popping in as administrator: please edit your forum name, do not use your email address if you don't like spam. General rule on any public forum.

[re_volver]

Our team has just encountered this same issue.  After embedding hundreds of Captivate projects in iFrames, suddenly we have a site where each page that contains embedded Captivate output scrolls immediately to that iframe.  We're using the same workflow for the last few years - autoplay off, a poster image embedded, HTML scaling turned on, nothing out of the ordinary.  My guess is that it's something in the site rather than the published output, but we still haven't found a fix for it.  I tried Sancaks' solution of adding window.top.scroll(0,0); to the index.html, but that made no difference.

Has anyone else experienced this?   Any suggestions?

[chrisk56819927]

I've been dealing with this same issue and no solution.

We can get around it by embedding the iframe content in a <details> element, but this adds a click for the user.

Just to clarify. We occasioinally use Captivate to embed little bits of interactive content into static content pages in an LMS (Canvas) content page. We want to have this static, LMS native content appear above the Captivate content, but there is an auto-focus on the load of the Captivate content which means that when the page loads it jumps to the Captivate portion. My guess is there is something in the publish js files that does this, but I haven't had a chance to parse it out. 

[chrisk56819927]

Sorry, this form doesn't allow me to edit. 

Second paragraph should be 

Just to clarify. We occasioinally use Captivate to embed little bits of interactive content into an LMS (Canvas) content page. We want to have this static, LMS native content appear above the Captivate content, but there is an auto-focus on the load of the Captivate content which means that when the page loads it jumps to the Captivate portion. My guess is there is something in the publish js files that does this, but I haven't had a chance to parse it out. 

[kirstenn91067676]

We are having the same issue at our institution. The content page jumps to the Captivate 2019 interaction which is embedded in a iframe on the page. I've tested the suggestions found here, as well as everything else I can find on the web. Has anyone found any additional ideas? Currently we are having to ensure any Captivate projects are at the top of the LMS page in order to eliminate the jump to the iframe.

[tartanneil]

I'm strugglimg with this. It's inelegant. If anyone has solved this puzzle, I'd love to know how.

[kdmemory]

The whole issue might be related to an automatic HTML DOM Element focus() command. That something in the iFrame is automatically focussed on within the HTML document which makes the browser jump/scroll to that element.

There is a parameter available called preventScroll which avoids the jump/scroll which indicates that a focus() event normally triggers a jump/scroll to the particular DOM element. Maybe to the iFrame or to something within the iFrame. (see here).

There's also the HTML DOM Element blur() command available which removes the focus from an element (see here).

Maybe something to look into?

[default6iw6u98onv04]

So low-and-behold we got an answer!

To remove this auto-scroll, you have to go into the publish files
In Assets/Js/CPM.js find and delete this code: “document.getElementById("playImage").focus();”
Doing this has worked like a charm

More on this on this forum: https://elearning.adobe.com/2022/03/my-captivate-assets-steal-focus-from-the-html-page/