Problem
I want to check a checkbox when an iframe is clicked. Normally I would just use an label around the input. And this works for images, text and others. But it doesn't seem to work for iframes?
Here is a fiddle
Here's my code
<form>
<label>
<iframe src="http://yx-ads6.com/banner_show.php?section=General&pub=836169&format=468x60&ga=g" frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0"></iframe
<input type="checkbox">
</label>
</form>
I would make using an element above the iframe like this:
HTML
<form>
<label>
<span></span>
<iframe frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0" style="background-color: #fff"></iframe>
<input type="checkbox">
</label>
</form>
CSS
span {
width: 468px;
height: 60px;
position: absolute;
opacity: 0;
}
here a jsfiddle about this code.
Basically the click event is within the iframe not the label, so the input is not checked.
You can do this with JS. Look at this answer: https://stackoverflow.com/a/32138108/4556503
Related
I did search to see if there was already an answer and there are some related answers but the code is different. I'm honestly not sure if this is HTML or Javascript. I have no experience with web development.
So this is what is pasted to my WordPress website.
<iframe src="https:"some address" style="border:none; min-height: 700px; width: 1px; min-width: 100%; *width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" allowfullscreen></iframe>
scrolling
Try adding scrolling (scrolling="no") attribute to remove scrolling.
<iframe src="https://stackoverflow.com/" style="border:none; height:100vh; width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" scrolling="no" allowfullscreen></iframe>
as scrolling is deprecated I guess then we should go with CSS.
you can add this in your styleSheet or inside <style> tag in HTML page
iframe {
overflow-x:hidden;
overflow-Y:hidden;
}
When a page initially loads I have a hidden iframe and other visible ones. Then when a button is clicked I need to hide one that was previously visible, then unhide another (actually I need to set the src attribute too on the one that is becoming visible, but I'll tackle that next). I don't want to refresh the entire page (hence the return false below).
The code below does not display the red iframe2 upon the button click. Can you tell me why?
<form>
<h1>Test</h1>
<input type="submit" id="search" value="Search" />
</form>
<iframe id="frame0" style="background-color: blue" height="200" width="800" ></iframe>
<iframe id="frame1" style="background-color: yellow" height="200" width="800" ></iframe>
<iframe id="frame2" style="visibility: hidden; background-color: red" height="200" width="800" ></iframe>
<script type="text/javascript">
$(document).ready(function(){
$( "#search" ).click(function(event) {
$("#frame1").hide();
$("#frame2").show();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
});
</script>
User disply insted of visibility edit, your frame2 as below :
<iframe id="frame2" style="display: hidden; background-color: red" height="200" width="800" ></iframe>
Here is working jsfiddle :
https://jsfiddle.net/keval/vqyczm7a
jQuery's .show() and.hide() work with the CSS display property, as oppose to the visibility property.
.show() = css('display', 'block')
.hide() = css('display', 'none')
However, you can use .toggle() to either hide or show an element based on it's current state. I think this is what you would require, as you'd like to hide the one that was previously visible.
You'd need to change your iframe visibility style to use display instead
<iframe id="frame2" style="display: none; background-color: red" height="200" width="800" ></iframe>
Then instead of showing and hiding the iframes, use .toggle()
$( "#search" ).click(function(event) {
$("#frame1").toggle();
$("#frame2").toggle();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
See my working example: https://jsfiddle.net/o2gxgz9r/14250/
I am loading a content from another site in iframe window, but when I select any link it opens the parent site in the window. I need everything to be opened in the same iframe? How to fix that?
The code:
<div class="calculator" style="display: block;width: 900px; height: 440px; overflow: hidden; ">
<iframe src="http://www.avtosojuz.ua/technical_service/" align="middle" width="962" height="100%" scrolling="no" frameborder="0" style="margin-top: -440px;
"></iframe>
</div>
This question has been asked before: How to open a iframe link within the same iframe?. It appears that it is not possible to control this when referencing an external website.
I have an iframe and it's code is:
<iframe page_id="3" allowtransparency="true" src="https://www.mysite.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="visibility: hidden; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>
For some reason visibility: hidden is not working in Safari yet it is in Chrome and FF. I've never come across this before. It seems to be a new issue since this code is very very old. Any ideas?
I am not toggling display to avoid some other issues.
EDIT It looks like a Safari bug? http://jsfiddle.net/y2V3T/ v7.0.4
If visibility: hidden is not working you can also use opacity: 0;
The code would look like this:
<iframe page_id="3" allowtransparency="true" src="https://www.example.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="opacity: 0; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>
Let's see if this is a legit bug, as I think it is:
https://bugs.webkit.org/show_bug.cgi?id=134774
Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");
ok just figured it out:
$('#hi-world').contents().find('p').css("background","red");
The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.