Hi Im trying to overlay a pdf, rendered using adobe-reader plugin for IE11, with a div. Here is a jsfiddle describing my problem. The div is positioned behind the embedded pdf for some reason. Is there a solution to this problem? The problem occours in IE11.
The pdf is embedded like this with the div below it
<object id="pdf">
<embed src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"/>
</object>
<div id="overlay" />
Here os the css:
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1000;
}
#pdf {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks for your help.
Update! I managed to make the div overlay the pdf using an iframe. But I can't make the div transparent.
<iframe style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:9;" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"></iframe>
<div id="overlay" style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:10;"></div>
<iframe ALLOWTRANSPARENCY="true" style="position:absolute; left:0; top:0; width:50px; opacity: 0.0;
height:150px; z-index:9;"
srcdoc="<html><body style='background-color:transparent;'></body></html>"></iframe>
css remains the same.
A new js fiddle can be foudn here
Related
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I am new to coding and community and i am trying to embed YouTube iframes responsively. So far all i do is replacing the original width value with 100%.
<iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>
Yes it makes it responsive since the height is static there are lots of black space. Is there any simple way to prevent this.
I prefer css solutions but javascript is also welcomed.
.videoWrapper {
position:relative;
padding-bottom:56.25%;
margin:auto;
height:0;
}
.videoWrapper iframe {
background-color:#f2f2f2;
position:absolute;
max-width:100%;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
Let me know, if it does not work
This should help you get started.
Ref: Bootstrap
.responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.video {
padding-bottom: 56.25%; /* or 75% depending upon the type of video you have */
}
<div class="responsive video">
<iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe>
</div>
I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.
Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/
I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.
This only happens on chrome (maybe all webkit browsers?) - when I embed the map like so:
<iframe
id="contactsMap"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>
It shows up all nicely, but if I create a div that overlays the map, the text in that div shows up all blurry (and images too).
What I have tried:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide
{
-webkit-transform: none !important;
}
What else could I try?
Edit http://jsfiddle.net/31pxt917/
Blur happens because You are using skew transformation and then skew back. Better way would be using separate dom element, or pseudo element (:before or :after). Something like this fiddle
<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay">
<div class="content">
<span>some text goes here</span>
a random link
</div>
</div>
</div>
#contactsMap {
width: 100%;
float:left;
height:300px;
position:relative;
}
.overlay{height: 300px;}
.overlay:before {
content: '';
display: block;
width:100%;
height:150px;
background:#000;
color:#fff;
position:absolute;
bottom: 0;
-webkit-transform: skew(-9deg);
-moz-transform: skew(-9deg);
-o-transform: skew(-9deg);
transform: skew(-9deg);
}
.content {
top: 150px;
height: 150px;
width: 100%;
position: absolute;
padding: 5px 15px;
}
.overlay a, .overlay span {
color:#fff;
}
I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">
Please help me. I have spent good amount of time to fix this without any success. The following loading modal box works fine in all browsers except FireFox. In firefox it shows static gif image instead of animated loading spin.
Html:
<input type="submit" name="SubmitPayment" value="Complete Order" class="square checkout button" onclick="ShowProgressAnimation();" />
<div id="loading-div-background">
<div id="loading-div" style="display:none"><img style="margin:30px;" src="images/loading.gif" alt="Loading.."/>
<p align="center" valign="middle" style="color:##1a0980; font-size:24px; font-weight:normal; text-align:center">Please Wait While We Are Processing Your Order....</p>
</div>
</div>
Java Script:
<script type="text/javascript">
$(document).ready(function () {
$("#loading-div-background ").css({ opacity: 0.8 });
});
function ShowProgressAnimation() {
$("#loading-div-background").show();
var pb = document.getElementById("loading-div");
pb.innerHTML = '<img style="margin:30px;" src="images/loading.gif" alt="Loading.."/>';
pb.style.display = '';
}
</script>
Css:
#loading-div-background
{
display:none;
position:fixed;
top:0;
left:0;
/* background:black; */
background-color: #EDF1F4;
width:100%;
height:100%;
z-index: 10000;
}
#loading-div
{
width: 400px;
height: 200px;
background-color: #EDF1F4;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-200px;
margin-top: -100px;
}