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
Custom SCROLLBAR with Oxygen Builder
7. 12. 2020 in ,
Are you looking for some cool scroollbar, like on CSS-Tricks website? for a specific DIV use this in your custom CSS: for a whole document use body instead.
Read More
Aleš Sýkora wrote
Custom excerpt lenght in Oxygen and WordPress
28. 5. 2021 in ,
Need to display smaller amount of words in some WordPress excerpts? Use custom function! Put the code below to your code snippets plugin or your custom funcionality plugin and use it in Oxygen Builder. Thanks to https://stackoverflow.com/a/17177847. Custom code: Then go to Oxygen builder and add custom PHP return value, when adding dynamic data field. […]
Read More
Aleš Sýkora wrote
Category Specific Conditional IF
31. 12. 2019 in
If you need to use conditional IF to display posts for some specific category, here is example conditional how to do that: If you want to display posts not in category, then use ! as negotiation: Credits: Bryan Candy, Toolset User Group on facebook.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram