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?
Related
In my html page, I have a header and its position is fixed. In the contant or body of the page I have an Iframe to display a youtube video and other DIV tabs. In other browsers like chrome, Morzilla etc all the contants schrolls behind the header and works fine!!.
But In IE (IE 11), only the youtube video in Iframe scrolls over/aboves the header. How can I make it to scroll behind the header in IE.
here is the code
css
#header {
position: fixed;
background-color: #ffffff;
margin-top: -18px;
z-index: 10;
width: 100%;
}
iframe {
background-color:transparent !important;
z-index: -1;
}
html (php page)
<div style="text-align:center;padding:20px;font-size:16px ; z-index: -1;">
<div>
<iframe " width="320" height="247" src="http://www.youtube.com/********" frameborder="0" allowfullscreen></iframe>
</div>
</div>
http://jsfiddle.net/Rq25Q/
try adding ?wmode=opaque at the end of src attribute of iframe
like <iframe " width="320" height="247" src="http://www.youtube.com/abcd?wmode=opaque" frameborder="0" allowfullscreen></iframe>
I trying to reproduce what you want, but I can't find any error in IE 11.
.header {
position: fixed;
}
Here is a jsfiddle for this: http://jsfiddle.net/nJBy9/
All the contents scrolls behind the header and works well.
Can you explain what is your problem?
You need to ensure that the z-index of the iframe is less than the z-index of the header:
.header {
z-index: 10;
}
iframe {
z-index: 1
}
I'm trying to build a simple responsive site.
For the most part everything is working. But as soon as I start to shrink the site, the YouTube video gets bumped onto the next row. Is there a way to fix this so it stays aligned with the ad to the left?
Here is a link to the demo site:
http://ctrice.ca/test/rwd/
This is the css I'm using.
#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }
#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }
#trailer iframe,
#trailer object,
#trailer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is the HTML code:
<div id="ad"><img src="img/ad.jpg" alt="ad" /></div>
<div id="trailer">
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe>
</div>
The problem will lie with the iframe. I wish I could remember all the gory details but it's best to get that lesson from an expert by Googling for Scott Jehl and "responsive and responsible" videos and any articles you can find (of which there are many). His specific problem was with ads delivered to the Boston Globe via iframes. Your problem may be that the video is in an iframe.
I know we're not to give answers as "Google for it" but my answer points to the iframe and the many points made by Jiehl are best left to him.
This code seems to work for me. The percentage in CSS is found when you divide the height by the width of your video.
(HTML)
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe>
</div>
(CSS)
`/*/V I D E O * W R A P P E R/*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}`
Hope it works for you good luck!
Trying out Soundcloud for a site. I resized the iframe to fit the space - this worked seamlessly in Chrome/FF/Safari.
On IE however it's not resizing but truncating the viewable space.
For example:
The way it's supposed to look:
IE's interpretation (can't really see or click play button):
HTML:
<div class="rightnav_below">
<iframe width="100%" height="180" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http...&auto_play=false&show_artwork=true&color=ff7700"></iframe>
</div><!-- end .rightnav_below -->
CSS:
#wrap #content #rightnav_wrapper .rightnav_below {display: block; text-align: left; margin-top: 20px; background: #ccc; border-color:#fc663d;}
#wrap #content #rightnav_wrapper .rightnav_below iframe{float: none; height: 180px; width: 180px; vertical-align: top; }
Also, getting an error in IE when I do hit that tiny play portion:
Webpage error details
Message: 'nodeName' is null or not an object
Line: 3
Char: 99080
Code: 0
URI: http://w.soundcloud.com/player/?url=...http...&auto_play=false&show_artwork=true&color=ff7700
Any ideas what's going on? Thanks!
I need to have a flash intro for my website (a requirement from my teacher). I created the intro and embedded it into my page. I takes up the entire screen in both Chrome and Chromium. In IE8, Firefox and Opera the size is incorrect. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="3; url=template.htm">
<meta charset="UTF-8">
<title>Com Tech Projects | Jason Cook</title>
</head>
<body style="background: black;">
<embed style="height: 100%; width: 100%;" src="Flash/Introv6.swf"/>
</body>
</html>
Try to use
<style>
html,body{height:100%;padding:0px;margin:0px;background-color:black;}
</style>
instead.
In the HTML5 doctype, the parent element must also have % values defined for a child element to use % values. So in the CSS for your body tag:
body {
height: 100%;
width: 100%;
}
Then it should work.
If you want it fullscreen, write the following:
<video style="position: absolute; height: 100%; width: 100%;">
<embed style="position: absolute; height: 100%; width: 100%;" src="Flash/Introv6.swf"/>
</video>
If that does not work, consider the use of the <object> tag instead of <embed>.
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;
}