[SOVLED] Embeding an iframe with its boddy only (not the links)

Q&A about the latest versions
Post Reply
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Hi everyone!

As the title says: I'd like to embed an iframe (e.g a Wikipedia page), to be able to scroll down the iframe and without being able to click the links of the original iframed page.

Is that maybe possible to achieve with the "Accessibility" or "Advanced" tabs of a Text Element?
I've tried to create a layer element (such like a 'donut' rectangle) above my iframe, but either it's not possible to scroll down, either the iframe takes over (with the "Permeable" box checked and unchecked).

Any tips?
Thanks in advance

Julien
Last edited by Julien on Tue Feb 14, 2023 6:59 am, edited 4 times in total.
Mac, pro version always updated :)
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Julien,

Hope you are well.
I'd like to embed an iframe (e.g a Wikipedia page), to be able to scroll down the iframe and without being able to click the links of the original iframed page.
Never tried this before but I've come up with a working example albeit there are some limitations. You can see in the image the top element only shows a pointer when it's over a link while in the lower image it shows a hand. (note: unless the iframe is in the same domain anchor links don't work).

block_click_action.jpg
block_click_action.jpg (181.93 KiB) Viewed 2586 times

Here is the link: https://p2vr.s3.ap-southeast-2.amazonaw ... index.html


In the lower example you can click on the 'Blog' link as its not an anchor but goes to a new page or scroll down the page and you can click on the different links there.

The limitations are:

1.That I can only get it working when the iFrame and the container element it sits in are defined in pixels.
2. You have to define a maximum height that will allow the whole page to load. In this example I've set it for 10,000px high.

Workflow I used:

a. Create a text box with iFrame code with scrolling = no
b. Create a Scroll element with the size you want I'm using 850px x 437px
c. Move the text box into the Scroll element as a child
d. Set the text box anchor to top left and set the size of the text box, I'm using 835px x 10,000px
e. Add 'pointer-events: none;' to the CSS Styles Inner Element in the Properties > Advanced panel

cheers,

Tony
Last edited by Tony on Sun Feb 05, 2023 6:58 am, edited 1 time in total.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Hi Tony,

Doing well thanks, always trying to push that special project. Hope you are well too!

Thanks for support. Your tutorial works great!
d. Set the text box anchor to top right
-> top left - otherwise the scrolling bar takes over the iframe.

I was right trying to involve a second or 'a donut' element, but I'm not an expert! :D

Thanks again
Julien 🇰🇭
Mac, pro version always updated :)
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

One question.
1.That I can only get it working when the iFrame and the container element it sits in are defined in pixels.
Do you know why the limitation is in pixel (and not in percent)?
- Is it related to 'general web'?
- Or to Pano2VR? something that could be added to the wish list.

Thanks,
Julien
Mac, pro version always updated :)
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

d. Set the text box anchor to top right
-> top left - otherwise the scrolling bar takes over the iframe
.

Yes I’d had it right in the project! I’ve updated the post.

Tony]
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Hey Tony,

Sorry mate I'm having a following problem.
Your tutorial works great, but in my case I'm interested to display multiple iFrames and which has different heights in pixels.

I've understood 'why' your 10000px in the text box with iFrame - related to the height of a page.
I've also figured out the Scrolling Element -> Scroll Area -> Inner Size -> Height tab was very much involved in the whole trick.

However, trying to trigger another height (related to the heights of my different iFrames/pages) using a hotspot placeholder or a custom properties placeholder doesn't work.

It seems the height's tab of the scrolling element is blocking somewhere.
So, do you think it's possible to 'shovel' a "xx pixels !important;" somewhere? Another workaround? Or saving the iframed pages as simple PDFs (which I'm not interested in).

Thanks
Julien
Attachments
Screenshot.jpg
Screenshot.jpg (1.1 MiB) Viewed 2527 times
Mac, pro version always updated :)
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

I'm running into another issue :cry:

Using multiple (or actually just one) iFrames into a scrolling element, it doesn't look possible to reset the scrolling bar to its default position - when we're closing the iFrame.
So if we're scrolling 'iframe 1' to halfway down, then closing it, then opening 'iframe 2', the scrolling bar will be still halfway down :cry:
Indeed we're closing the iFrame (text element), not the scrolling element.

Humm that trick is looking more and more complicated...
Julien
Mac, pro version always updated :)
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Julien,
Using multiple (or actually just one) iFrames into a scrolling element, it doesn't look possible to reset the scrolling bar to its default position - when we're closing the iFrame.
You can reset the scrollbar by removing the text box when closing the container and then adding it back in when reopening the container. This will then reset the start position of the scroll area.

Check out this post from Martin viewtopic.php?p=69889

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Thanks Tony, it didn't knew the trick!

Regards,
Julien
Mac, pro version always updated :)
Post Reply