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
[SOVLED] Embeding an iframe with its boddy only (not the links)
Hi Julien,
Hope you are well.
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
Hope you are well.
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).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.
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/
Hi Tony,
Doing well thanks, always trying to push that special project. Hope you are well too!
Thanks for support. Your tutorial works great!
I was right trying to involve a second or 'a donut' element, but I'm not an expert!
Thanks again
Julien
Doing well thanks, always trying to push that special project. Hope you are well too!
Thanks for support. Your tutorial works great!
-> top left - otherwise the scrolling bar takes over the iframe.d. Set the text box anchor to top right
I was right trying to involve a second or 'a donut' element, but I'm not an expert!
Thanks again
Julien
Mac, pro version always updated
One question.
- Is it related to 'general web'?
- Or to Pano2VR? something that could be added to the wish list.
Thanks,
Julien
Do you know why the limitation is in pixel (and not in percent)?1.That I can only get it working when the iFrame and the container element it sits in are defined in pixels.
- 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
.-> top left - otherwise the scrolling bar takes over the iframed. Set the text box anchor to top right
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/
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
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 (1.1 MiB) Viewed 3069 times
Mac, pro version always updated
I'm running into another issue
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
Indeed we're closing the iFrame (text element), not the scrolling element.
Humm that trick is looking more and more complicated...
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.
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
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
Hi Julien,
Check out this post from Martin viewtopic.php?p=69889
Tony
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.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.
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/