I have the following code with an invisible div that's over an iframe. I would like to get all the mouse events that are executed on the iframe (for now let's listen just to click). But if I set the pointer-events to none, the click listener is not called.
I tried to implement this as well, but without success: Add click event to iframe
My goal is to listen to any event that happens in the iframe and pop-up a message in the main window: "some event happend in the iframe". I don't care to know more info about the events in the iframe, just if they where triggered or not.
Note: The src of the iframe is a different domain as the window.
Any ideas if this is possible?
jQuery(function($) { // DOM ready
$('#overlay').on('click', function(e) {
alert('test');
});
});
#frame {
z-index: 1;
width: 600px;
height: 400px;
position: absolute;
pointer-events: all;
}
#overlay {
width: 605px;
height: 405px;
opacity: 0;
background: red;
z-index: 9999;
position: absolute;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>
here is http://jsfiddle.net/cxbmu/348/
var frame = $('#frame').contents(); only possible if same domain or CORS
frame.find('body').click(function(event){
console.log('yaay');
});
If this wasn't given many sites would be pretty vulnerable to XSS.
you must remove pointer-events: none from css:
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>
#frame {
z-index: 1;
width: 600px;
height: 400px;
position: absolute;
pointer-events: all;
}
#overlay {
width: 605px;
height: 405px;
opacity: 0;
background: red;
z-index: 9999;
position: absolute;
}
$(document).ready(function(){
$('#overlay').on('click', function(e) {
alert('test');
});
})
Related
As the title says, I'd like to know if it's possible to enable only a specific div when body is set to touch-action: none.
My goal is to block all the browser zoom, but allow to zoom in a specific part of it (maybe an image).
Is this possible? maybe in Javascript or pure CSS?
my code is the following:
$("#no-zoom").click(function(){
if( $('body').css('touch-action') == 'none' )
$('body').css("touch-action","")
else
$('body').css("touch-action","none");
$('.zoom').css("touch-action","pan-x pinch-zoom");
});
Obviously, this part is not working: $('.zoom').css("touch-action","pan-x pinch-zoom");
Thank you!
You can use siblings: .notouch and .content.
.notouch will cover all the page and .content will contain elements that can suffer touch interactions.
<body>
<div class="notouch"></div>
<div class="content">
<div class="image"></div>
</div>
</body>
body {
position: relative;
}
.notouch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
}
.content {
position: relative;
width: 0;
height: 0;
}
.image {
width: 200px;
height: 200px;
background: #d3d3d3;
}
Like this, you can use zoom only inside .image.
How do I disable the link associated with the widget I added to my website? I don't have access to anything other than the HTML code they provided. An example would be the Trustpilot widget at the bottom of the page in the link. If you click on the widget it takes you to Trustpilot's website, but we don't want that to happen. https://goldsilver.com/
The widget is an iframe, and when an iframe is cross domain (so the iframe source file is not on your site) you can not change anyting inside of it.
You could put an overlay div over it, but that would block every click on the iframe.
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies ~ Saumya Rastogi
Just for learning purposes:
#widget {
width: 450px;
height: 350px;
border: 1px solid black;
position: relative;
}
#widget > iframe {
border: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
#widget:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2000;
}
<div id="widget">
<iframe src="https://widget.trustpilot.com/trustboxes/539ad0ffdec7e10e686debd7/index.html?locale=en-US&templateId=539ad0ffdec7e10e686debd7&businessunitId=4bf1926500006400050c99f2&styleHeight=350px&styleWidth=100%25&theme=light&stars=4%2C5"></iframe>
</div>
You can give this css property to that particular a tag like this:
a { pointer-events: none; }
a.disabled_link {
pointer-events: none;
}
<a class="disabled_link">Any Link</a>
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies.
I have an iframe (soundcloud embedded track) of a particular class.
What I want is that, when I click on the iframe, its class change to another one with different properties.
My code for that is:
index.html
<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
<script>
$('#soundcloudtrack').click(
function (v) {
$(this).toggleClass('soundcloud soundcloudext');
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
}
);
</script>
and style.css:
.soundcloud{
z-index:99997;
width:100%;
height:62px;
opacity:0.25;
}
.soundcloudext{
z-index:99997;
width:100%;
height:135px;
opacity:1;
}
But it's not working and I can't see why. I have also tried with getElementById. Can you please help?
You can't really target the iframe directly as I.G stated, you need to set something over the iframe that you can control on your webpage , I wrote something on jsfiddle, please try and see if it's what you are looking for: https://jsfiddle.net/652ejv6j/#run.
<div id="player">
<span>click here</span>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
</div>
$('#player span').click(function() {
//alert(1);
$("#soundcloudtrack").toggleClass('soundcloud soundcloudext');
alert($("#soundcloudtrack").attr("class"));
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
});
.soundcloud {
z-index: 0;
width: 100%;
height: 62px;
opacity: 0.25;
}
.soundcloudext {
z-index: 99997;
width: 100%;
height: 135px;
opacity: 1;
}
#player {
position: relaitve;
z-index: 999;
width: 100%;
height: auto;
}
#player span {
position: absolute;
height: 20px;
top: 40px;
opacity: 0;
z-index: 999;
text-align: center;
width: 100%;
}
ALT Check if there's an API for your player through which you can control directly.
I have the following html.
<div id="video-popup-overlay"></div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade"><i class="fa fa-times"></i></div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
Basically I have a video playing when the #video-popup-container is showing. I want to be able to hide this video. But normally when the element is hidden, the video still plays in the background.
That is why I want to change the src. But when I change the src, the elements don't hide. But the hide commands work if I don't change the src.
Is there a reason this would be happening?
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-iframe").attr('src', "");
$("#video-popup-overlay").hide();
$("#video-popup-container").hide();
});
Here is an example
Is it a requirement to be able to potentially show again after it is hidden? Since you're setting the src param in the iframe to blank I'll assume probably not?
If that is the case, I would recommend to try using the .remove() function instead of hiding. ie:
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").remove();
});
UPDATE:
Based on the fiddle provided it looks like you are calling the wrong ID's to close. View fiddle here: https://jsfiddle.net/g139c9b0/2/
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-iframe-container, #video-popup-close").hide();
$("#video-popup-iframe").attr('src', '');
});
MORE UPDATE:
Sorry, I thought that would be enough to extrapolate. Yes, you will have to add a show() function since you are hiding the elements. Here is the full fiddle, working as I think you would expect it to: https://jsfiddle.net/g139c9b0/3/
My best guess as to why you see the odd behavior is that the iframe itself is NOT being treated as part of the current DOM, so hiding it's container won't necessarily cascade to the iframe window. Generally you cannot interact with an iframe using javascript (without some workarounds). It definitely feels like a bit of a browser bug, but it's possible that it works as such for security reasons.
what kind of video are you playing?
Is a locally hosted file, a YouTube video, Vimeo? I'm asking because if it is YouTube, maybe you could just use jQuery to stop the video.
this being said, I've tested your code and it seems to work ok.Are you getting any errors on the browser console?
$(".clickme").on('click', function(e){
e.preventDefault();
$("#video-popup-iframe").attr('src', "//player.vimeo.com/video/"+$(this).attr('id'));
$("#video-popup-overlay, #video-popup-container").show();
});
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr('src', '');
});
#video-popup-overlay {
display: none;
position: fixed;
z-index: 995;
top: 0;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
}
#video-popup-container {
display: none;
position: fixed;
z-index: 996;
width: 60%;
left: 50%;
margin-left: -30%;
top: 20%;
background-color: #fff;
}
#video-popup-close {
cursor: pointer;
position: absolute;
right: -10px;
top: -10px;
z-index: 998;
width: 25px;
height: 25px;
border-radius: 25px;
text-align: center;
font-size: 12px;
background-color: #000;
line-height: 25px;
color: #fff;
}
#video-popup-close:hover {
color: #DE0023;
}
#video-popup-iframe-container {
position: absolute;
z-index: 997;
width: 100%;
padding-bottom: 56.25%;
border: 2px solid #000;
background-color: #000;
border-radius: 2px;
}
#video-popup-iframe {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickme" id="161171581">
Click me
</div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade">x</div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
another possible solution:
Stop embedded youtube iframe?
EDIT: take a look at the updated code, is this the expected behavior?
EDIT2: https://jsfiddle.net/588chuyb/
Try hide before change the src. And look at the console and see if there is some message, it should helps.
$(document).on('click', '#video-popup-close, #video-popup-overlay', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr("src", "");
});
Jsfiddle is here: http://fiddle.jshell.net/Msd7v/29/
Here is my Javascript:
$('#app').contents().find('.dragOption').draggable({
iframeFix:true,
scroll: true
});
and then in the iFrame
#html
<div id='box'>
<div class='dragOption'></div>
</div>
#css
#box {
background: red;
height: 600px;
width: 100%;
left:10;
z-index: 10000;
position: relative;
top: 10;
}
.dragOption {
height: 80px;
width: 200px;
position: absolute;
z-index: 100001;
outline: 1px solid #000;
top: 400px;
}
When you try to move the draggable div when you are already scrolled down, the draggable library doesn't take into account the window height. Is there a way to offset this? or a monkey patch for the library so you can force it to recognize the correct scroll distance and not have the draggable div jump up to the top of the iframe above the fold?