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;
}
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 am trying to have a simple design with three nested divs (Div 3 inside Div 2 inside Div 1), each overlaid on top of each other (Div 3 overlaid on Div 2 overlaid on Div 1). The middle div (Div 2) has a certain level of opacity, such that the outermost div (Div 1) is visible to some extent. However, the div which is the top-most div (i.e. Div 3) should be completely visible and the opacity of Div 2 should not affect Div 3.
Here is the jsfiddle. Child 2's opacity is getting affected by Child 1's opacity, which I don't want to happen. I want Child 2's opacity to be 1.0. How can I do this? Please test on Chrome and Firefox.
Following is the html part:
<html>
<head>
</head>
<body>
<div class="parent box">
Parent
<div class="child box">
Child
<div class="child2 box">
Another Child
</div>
</div>
</div>
</body>
</html>
Following is the css (note that I need position: absolute for both the children):
.box{
width:200px;
height:200px;
}
.parent {
background-color:green;
}
.child {
background-color:blue;
left:40px;
top:40px;
z-index:10;
position:absolute;
opacity:0.35;
}
.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}
That's not possible, opacity affects all childs. Use
rgba(r,g,b,a)
for the elements instead.
Example:
.parent {
background-color: rgba(28,179,239, 0.35)
}
.child {
left:40px;
top:40px;
z-index:10;
position:absolute;
background-color: rgba(28,179,239, 0.5)
}
.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}
See here
Break the tree of the nested divs: You don't need to change your HTML, but set the background color and opacity that is now in the child div to a pseudo element of it.
This way you break the dependency in the opacity channel
.box {
width: 200px;
height: 200px;
}
.parent {
background-color: green;
}
.child {
left: 40px;
top: 40px;
z-index: 10;
position: absolute;
}
.child:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: blue;
opacity: 0.35;
}
.child2 {
background-color: green;
left: 40px;
top: 40px;
z-index: 100;
position: absolute;
}
<div class="parent box">
Parent
<div class="child box">
Child
<div class="child2 box">
Another Child
</div>
</div>
</div>
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
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">
I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?
I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?
Example site where this is demonstrated: http://www.plus.de/
Here's a Fiddle
HTML
<div class="slide">
<span class="text">OPEN</span>
</div>
CSS
#overflow {
background: rgba(50,50,50,0.5);
display: none;
width: 100%;
height: 100%;
}
.slide {
background: #0296cc;
position: absolute;
top: 200px;
left: -270px;
width: 300px;
height: 180px;
z-index: 9999;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #fff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
jQuery
$(function() {
$('.slide').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '0' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
$('#overflow').fadeIn('slow');
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.slide').stop().animate({ left: '-270px' }, 650);
});
// Prevents window scroll when overflow is visible
$('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
});
BASIC DEMO
<div id="gallery">
<img src="images/img1.jpg" alt="" />
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt="" />
<div id="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
<div>Tab 4</div>
</div>
</div>
CSS:
#gallery{
position:relative;
margin:0 auto;
width:500px;
height:200px;
background:#eee;
}
#gallery > img{
position:absolute;
top:0;
margin:0;
vertical-align:middle;
}
#gallery > img + img{
display:none;
}
#tabs{
position:absolute;
top:0px;
right:0;
height:200px;
width:100px;
}
#tabs > div{
cursor:pointer;
height:49px;
border-bottom:1px solid #ddd;
}
jQuery
$('#tabs > div').click(function(){
var i = $(this).index();
$('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});