How to remove iframe's scrllbars? In Firefox it's easy, however I found myself unable to achieve this effect to be compatible with all major browsers.
If the CSS technique isn't working for you, try also adding the property scrolling="no" to the iframe HTML tag.
<iframe scrolling="no" src="..." >
CSS
iframe {
overflow: hidden;
}
And/or use Coin_op's answer, it seems to be better.
on top of Alex's answer, I also had to add the following to remove horizontal toolbars from both FF and Chrome. This was added in the i-frame page, even though it should be possible to add it in the css as well:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
<iframe runat="server" id="_theFrame" src="url" width="100%" scrolling="no" height="200" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" style="display: block; background: none repeat scroll 0% 0% transparent; width: 100%;" />
Related
I have the premade widget, and I am trying to position it on lower right hand corner with a fixed position so it stays there regardless of scrolling. I for the love of me cannot get it to go where I want it to, it just stays under the content. Please help.
<iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
I have tried using a div as done on w3 schools, again unable to make it work.
<div.fixed><iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div.fixed>
<div.fixed> does not exist. You have to add a class. The name of the class can be what ever you like. In CSS you will then need the . to access the class. Something like this will work
.fix-me {
position: fixed;
bottom: 20px;
right: 20px;
background-color: orange;
width: 100px;
height: 100px;
}
<div class="fix-me">
<div>what ever content</div>
</div>
Added video embed code inside wordpress post:
<iframe src="https://www.example.com/embed-blabla.html" width="640"
height="480" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
But the full screen button not working (not clickable) on video player(JW 6).
How to fix?
You have to add the allowfullscreen attribute on iframe tag
I added a basic iframe to my website, and it is showing scrollbars (vertical and horizontal) that I can't get rid of in any way. I've been reading a lot about it on the Net, and nothing seem to work (like overflow: hidden, or scrolling="no"). What is the best and most standard way of fixing this, as of now / 2016?
Thanks!
Use the following CSS:
iframe::-webkit-scrollbar {
display: none;
}
i would say <iframe scrolling="no" src="..." >CSS
iframe { overflow:hidden; }
<body>
<div class="ifrm">
<iframe src="http://tholman.com/elevator.js/" height="300" width="300" scrolling="no"</iframe>
</div>
</body>
The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.
iframe {
overflow: hidden;
}
On my site http://aspspider.info/thesamy/GalleriesTest/MainPage/Main.aspx (free hosting for test), I have 2 background images. The body that works in every browser and a content-wrapper that doesn't work in IE7, IE8.
I can't understand why, if the background img of the body shows, why it doesn't work in different areas on the page?
This is the HTML code of the area:
<div id="Content-wrapper">
<div id="GalleriesContent">
<iframe scrolling="no" id="iframeBoxID" frameborder="0" class="iframeBoxClass" name="iframeBox"
src="http://www.google.com"></iframe>
</div>
</div>
and here is the css:
#Content-wrapper
{
/*background-image:url('../logo/blackBackGround2.png'); <-- tired that*/
background-image:url(../logo/blackBackGround2.png);
}
#GalleriesContent
{
background-color:transparent;
clear: both;
}
.iframeBoxClass
{
background-color:transparent;
border: 1px solid white;
width: 100%;
height: 550px;
}
For whatever magical reason IE renders iframes with a white background and has to be told to explicitly render a transparent background in order for your div background to show. That behavior is detailed here and the fix is quite simple, simply add the following attribute to your iframe tag and it should fix the issue:
allowTransparency="true"
e.g.
<iframe allowTransparency="true"></iframe>
Try adding a background-repeat to your CSS
background-repeat: repeat-y;
I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.
I already have used many stuffs like:
<iframe src="dynamic url"></iframe>
does work with IE but not with safari and FF.
and
some tweets like
div.iframe-link {
position: relative;
}
a.iframe-link1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
code:
<div class="iframe-link">
<iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
</iframe>
</div>
worked in FF and Safari not in IE7,8.
SO can anybody suggest what to do..
any help would be appreciated.
The Iframe is loading a dynamic address of image like::::
<div class="news_img01">
<div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
<iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
</iframe>
</div>
</div>
so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..
You could create a overlay to make the area over a iframe clickable. This worked for me.
<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
</div>
I found this code snippet from this thread here:
https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/
According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.
<div class="news_img01">
<a href="URL"
style="display: block; width:90px; height:60px; overflow:hidden;">
<img src="thumbnails/1188.gif" />
</a>
</div>
Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?
<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
<iframe ...></iframe>
</div>
By adding the following css rule, it will work as if the iframe were a clickable link.
div {
cursor: pointer
}
iframe {
pointer-events: none; // This is needed to make sure the iframe is not interactive
}
Set css property pointer-events to none on iframe tag.
a {
display : block; /* or inline-block */
}
a iframe {
pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
<iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>
If the iframe is loading an HTML page, just put your <a> tags in the source of that.
If it is just loading an image, why are you not using an <img> tag?
I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.
I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable
$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });
I have the same problem and I solved it with this code:
div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}
For me,it works for all browsers and IE8 as well.
Hope it helps :)
I faced such type of problem and solved by this:
a.iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}