My page have an iFrame here:
here is the code of putting the iframe:
<iframe src="" name="iframe_a" scrolling="no" width="100%" frameborder="0" style="margin-top: 200px; background-color: White;"
id="I1"></iframe>
when I click any button that triggers page load, the page keeps adding more white spaces below the iFrame:
How can i prevent this kind of problem?
NOTE:(I'm using ASP.NET)
I will appreciate all answers, advices and suggestions :)
The "iFrame" is not at fault. Check the source of the "iFrame".
Related
I have page where all I need is a simple, full-width embedded google map. When I set the custom size of the map to 1980px x 240px, and put the iframe on my page, the width of the map is 1200px by default.
When I open Chrome DevTools window and find the iframe there, there is a style forced to the iframe, that is not in the original iframe I pasted from google maps.
The website is build on Wordpress. Link: https://zubar-litomerice.cz/
The original iframe:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
Forced style:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border: 0px; width: 1200px; height: 145px;" allowfullscreen=""></iframe>
I have searched for answers before asking and could not find anything, but maybe you can help me find the answer I am looking for.
I have the code for iframes but for some reason, it won't work. It will display either an error message or an empty blank, white box. I am not sure if I need to enable the code that the iframe is targeting or if there is something wrong with the "extension".
<iframe src="https://www.w3schools.com" width="80%" height="380px" scrolling="yes">
Maybe because you didn't close the iframe tag?
https://www.w3schools.com/html/html_iframe.asp
<iframe src="https://www.w3schools.com" width="80%" height="380px" scrolling="yes"></iframe>
I have a couple of giphy GIFs that I'd like side by side not vertical, all that I am using are the embed codes.
<iframe src="//giphy.com/embed/5wWf7GX8ia4T1wiMPEA" width="120" height="90" frameBorder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
is there something i can do to add to these codes to enable side by side ...ness, to happen? or do i have to actually figure out how to script something ? cuz it would be great if i can just change or add some words.
thank you for reading this
here is the entire code for the post
<iframe id="visor53e023f8f288a1e6698b4568" width="480" height="360" src="" frameborder="0" scrolling="no"></iframe><script src="//studio.themadvideo.com/player/js/MadVideo.js.php?id=53e023f8f288a1e6698b4568"></script>
Hmm it's hard to answer with so little info, but try adding a display: inline-block; to the iframes style.
<iframe class="side-by-side-iframe" />
.side-by-side {
display: inline-block;
width: 50%; //or just leave it blank if they are small enough
}
This should solve it, and they will display in the same line, unless they are too big for the line.
Ok, so, it's waaaay easier than even I could expect, simply go into the visual tab, drag it so the GIFs appear horizontal.....that's it, no coding, nothing. If it's the wrong size, just move one out of the line then ... back into the line. Or in the Text post tab, just place all the iframes like so
<iframe src="//giphy.com/embed/5wWf7GZTUCuUTm5u8TK" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe><iframe src="//giphy.com/embed/ToMjGpvMXxv6uUaCL9C" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe><iframe src="//giphy.com/embed/HishDXMdGANR6" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
basically just place everything (the embeds you want horizontally next to each other, literally either textually or drag and drop so it's all side by side and it'll probably appear side by side, i'm tired and my mind is blown i added the random victory GIF so i'd remember this moment, thanks Pinhas for figuring it out in your way as well.
Trying to add my bands like box to my website. I have done this for other websites and it has been fine but this page doesnt display any news feed or anything. I have heard that it wont show posts older than 30 days but I have much newer posts.
ANy help would be much appreciated.
page is www.facebook.com/Sidewaystheband
Existing code:
<iframe src="facebook.com/plugins/…; scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:447px;" allowTransparency="true"></iframe>
Cheers
As I can see from your code that, the src attribute missed a closed double quote.
The code should be:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSidewaystheband&width=292&height=590&show_faces=true&colorscheme=light&stream=true&border_color&header=true&appId=YOUR_APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
p.s. recommend to use HTML5 approach if possible
Is it possible to have scrollbars on a webpage when it must have overflow:hidden for use in an iFrame?
Leave the web page as it is, and the on the <iframe>, use:
<iframe src="page.html" scrollbars="no" style="overflow: hidden;">
I think the best solution is scrolling="no" so it should be:
<iframe src="page.html" scrolling="no" style="overflow: hidden;">
as suggested here