Highlighted

How to prevent web page from jumping to XD prototype on load?

New Here ,
Jan 30, 2020

Copy link to clipboard

Copied

I use Squarespace for my portfolio site. They have a "block" that allows me to use embedded XD code (below) to show my app prototype. The prototype works fine but when the page loads, it automotacailly shifts half way down the page to the prototype.

 

<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen sandbox="allow-same-origin allow-forms allow-scripts" frameborder="0">
</iframe>
</center>

 

I would like for my page to remain at the top when fully loaded instead of jumping down to the prototype. I've tried countless solutions such as using sandbox, lazy loading, and loading on scroll view. I've tried using "data src=""" as well among other options.

 

Unfortunately none of these solutions work. The only time it doesn't jump down to the prototype is when it doesn't load at all. How can I fix this? I'm able to use HTML, CSS, and JavaScript as well.

 

My best guess is to delay loading the prototype until it's in view. The only other option would be to have the prototype at the top of the page which is not what I want (messes up the flow of the project).

 

Any help is greatly appreciated!

 

TOPICS
How to, Preview, Prototyping, Share or publish

Views

464

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

How to prevent web page from jumping to XD prototype on load?

New Here ,
Jan 30, 2020

Copy link to clipboard

Copied

I use Squarespace for my portfolio site. They have a "block" that allows me to use embedded XD code (below) to show my app prototype. The prototype works fine but when the page loads, it automotacailly shifts half way down the page to the prototype.

 

<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen sandbox="allow-same-origin allow-forms allow-scripts" frameborder="0">
</iframe>
</center>

 

I would like for my page to remain at the top when fully loaded instead of jumping down to the prototype. I've tried countless solutions such as using sandbox, lazy loading, and loading on scroll view. I've tried using "data src=""" as well among other options.

 

Unfortunately none of these solutions work. The only time it doesn't jump down to the prototype is when it doesn't load at all. How can I fix this? I'm able to use HTML, CSS, and JavaScript as well.

 

My best guess is to delay loading the prototype until it's in view. The only other option would be to have the prototype at the top of the page which is not what I want (messes up the flow of the project).

 

Any help is greatly appreciated!

 

TOPICS
How to, Preview, Prototyping, Share or publish

Views

465

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
Jan 30, 2020 1
belac77 LATEST
Community Beginner ,
Feb 19, 2020

Copy link to clipboard

Copied

I'm trying to figure out the same issues, but haven't made any progress.

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...
Feb 19, 2020 0