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>
Related
I have embedded a vimeo within a div that is the full-width of the viewport. The video worked perfectly for a couple of days but now the play button (and all other buttons) are completely non-responsive.
I've tried messing around with the z-index but that doesn't work.
<div class="full-screen-vid">
<iframe src="https://player.vimeo.com/video/192013765" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
.full-screen-vid {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 90px;
z-index: -1;
}
There is a strange message I've been getting in the console which I looked up and tried to fix but I don't think it is the problem (or the whole problem) because if I remove the video from the full-screen-vid, it works correctly.
Console message:
Refused to load the script'data:application/javascript;base64,KGZ1bmN0aW9xxxxIGZ1…xxxxxxxxxxxx='
because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'
https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".
Load the <iframe> stand-alone, adding the full-screen-vid class to it, should work.
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%;" />
I am having problems with an embedded youtube video.
I want that a fixed div goes over the embbedded youtube video. I know and read about the issue, and added ?wmode=opaque at the end of the source, and still not worked. Also i tried a bunch of other variants ?wmode=transparent &wmode=transparent
Here is the iframe code:
<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Here is div css code:
#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;
}
Also i am having another problem, don't know if it`s related, it's very strange.
If I go on youtube and try to embed another video in the place of the old one. It will not change the video, will change the width with the new one but the video is the same, with the new width from the other video i try to embed. If i embed with the old youtube code it will show the new video.
Please help me fix the two issues, they are driving me crazy!
You need to put a z-index on your footer:
http://jsfiddle.net/P3ysJ/9/
#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;
z-index: 1000;
color: #c00;
font-size: 3em;
}
<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
<footer id='footer'>overlap</footer>
I embed iframe element in my HTML page:
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
applet.html looks like this:
<html>
<head>
</head>
<body>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
</body>
</html>
The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.
I tried to use another iframe element:
<html>
<head>
</head>
<body>
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
<div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>
Works fine in IE, Firefox but not in Chrome.
I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
From the article:
The solution is to have a third Iframe
C within Iframe A. Iframe C has a
z-index within Iframe A that is higher
than the z-index of the Applet. It is
positioned so that it's rectangle as
considered by the top page is
identical to that of the Iframe B
overlay.
I pasted second IFrame code from your main page into applet.html like so:
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
And it seemed to do the trick in chrome.
I did get a frame border but i'm guessing this is fixable. Give it a go.
This problem is partly solved with latest updates, at least on MacOSX:
I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!
It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?
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;
}