Aleš Sýkora wrote

Disable scrolling in Iframe when scrolling page

23. 11. 2020 in

SITUATION: I am using iframe for 3D room tour. When I hover mouse over it when scrolling page up and down, it starts to zoom in and out. So I want to enable it only when user clicks inside the iframe once. I am using it in Oxygen Builder so there is a tutorial for it.

What I need? I need to put transparent div over mine iframe. So I add my iframe into Code block HTML

<iframe src="https://tourmkr.com/F1VrjTJAiq" name="willowdent-virtualniprohlidka" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen></iframe>

I need to wrap it into a div:

<div class="roomtour">
<iframe src="https://tourmkr.com/F1VrjTJAiq" name="willowdent-virtualniprohlidka" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen></iframe>
</div>

And add some CSS in Code block CSS

/*Overlay block*/
.roomtour {
width: 100%;
}
/*Iframe itself*/
.roomtour iframe {
width: 100%;
 /*I have fullwidth iframe. You can use width in pixels too.*/
display: block;
position: relative;
pointer-events: none;
 /*Disable actions with mouse completely*/
}
.roomtour iframe.clicked {
pointer-events: auto;
 /*Enable mouse actions again*/
}

And JS in Code block JS

jQuery('.roomtour')
 //you can add your own selector
.click(function(){
 //apply function when click on iframe
jQuery(this).find('iframe').addClass('clicked')})
 //apply class clicked
.mouseleave(function(){
 //apply when mouse leave the iframe
jQuery(this).find('iframe').removeClass('clicked')}); //remove class clicked

You can see the iframe here: https://www.willowdent.cz/zubni-hygiena-praha-5/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Oxygen Dynamic repeater examples
14. 1. 2021 in ,
Query parent pagedata in Oxygen repeater Query parent page on child page. If current page is parent then query this page itself. Display all posts with same ACF post object field value Gets current post ID and look for posts connected to it by post object field from ACF.
Read More
Aleš Sýkora wrote
Oxygen Front-end styles in Gutenberg
WARNING: I can’t figure how to make it working currently. If you have any idea, please put in in the comments below. You may want to display the content when editing in Gutenberg editor with your frontend Oxygen Styles included. It is possible with But the challenge is that Oxygen is creating CSS files for […]
Read More
Aleš Sýkora wrote
Change required fields by current time in Iconic Delivery Slots
21. 1. 2021 in
If you need to set the fields required in some times, you need to use custom function for that. Why is it needed? For example ASAP delivery is not possible to cutoff in the morning. You can set cutoff time in the evening. but next day, it is avaible immediately after midnight. So I created […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram