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;
}
Related
I'm trying to make with google maps reference stick on the right side of my page I've tried this code still scrolls with the rest of the page
#map{
position: -webkit-sticky;
position: sticky;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
You are looking for position:fixed:
#map {
position: fixed;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Elements with position:fixed will stay in place when their parent element is scrolled.
This should stick your map to the top (I've added a div to be able to scroll down):
#map {
position: -webkit-sticky;
position: sticky;
top: 0;
}
div {
background-color: yellow;
height: 2000px;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div>Extra Space</div>
If you want to the right, right: amount should do the trick. left for left and bottom for bottom.
#Edit - I've found that setting right does not seem to be working. I've searched around and seems like there are several rules when it comes for something to be sticky. I haven't used sticky yet so I don't know if I'm just missing something. I apologize as my comment is most likely useless in your case.
You might want to check Interneting Is Hard if you want to learn more about positioning, though it does not have sticky, it should have enough for your needs without the use of sticky.
add
top:0;
in #map. this will stick the page at the top. This way you can user css position.
Make a sticky div before you insert your iframe in.
<div style="position:sticky; top:3vh;">
<iframe src="page.html"></iframe>
</div>
Here is my Iframe editor, I want to change some css inside editor , when I want to try to apply css, iframe css doesn't get.
<div id="editor" style="flex: 1 1 0%;">
<iframe src="https://editor.unlayer.com/1.0.55/editor.html" frameborder="0" width="100%" height="100%" style="min-width: 1024px; min-height: 100%; height: 100%; width: 100%; border: 0px;">
</iframe>
</div>
so , How can I apply css by using DOM?
DEMO: https://codesandbox.io/s/busy-ride-nbrj6
You have to link the style sheet inside the iframe, or on the source page would be better.
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
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
I want to hide container based on google DFP ad is not loaded or not. I get Iframe body blank as shown below when ad is not loaded.
<iframe id="google_ads_iframe_/1009127/<id>_0__hidden__" name="google_ads_iframe_/1009127/<id>_0__hidden__" width="0" height="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border: 0px; vertical-align: bottom; visibility: hidden; display: none;" src="javascript:"<html><body style='background:transparent'></body></html>""></iframe>
You are looking to the collapseEmptyDivs method - this should do what you want.
This page should tell you everything you need to know: https://support.google.com/dfp_premium/answer/3072674?hl=en