I'm trying to set "pointer-events: none" to a semi transparent PNG, in order to be able to navigate the iframe (it's a Google Map) placed beneath that PNG. I tried giving "pointer-events: auto" to the iframe, and also "pointer-events: none" to the parent div, yet none of it allows to click through.
For info, the iframe is absolutely positioned, whereas the png and parent div are both relative.
The HTML is dead simple:
<div class="wrapper">
<iframe class="map" src="https://www.google.com/maps/d/embed?mid=zZ48oPOpCSZo.khyS2koft-Ss"></iframe>
<img src="http://thehermitcrab.org/wp-content/uploads/manual-uploads/the-story/hey-there-bottom-1366.png"/>
</div>
and here's the css:
.wrapper {
position: relative;
}
.wrapper img {
pointer-events: none;
display: block;
position: relative;
}
.map {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
and here's the website:
www.thehermitcrab.org
(scroll down a tiny bit and you'll see the map)
Thank you so much in advance!
The iframe has an z-index of -1, which seems to cause it to ignore mouse events despite the pointer-events setting. Change it to at least 0 and let the image have a z-index that is bigger.
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.
Hey all - I've been googling this as much as possible, but nothing I do seems to help.
I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.
I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).
It's driving me nuts, as its the last thing I need to sort before everythings fully working...
The code for the nav bar is here:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." />home.</div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." />biography.</div>
<div id="media"><img src="images/nav/media.png" alt="media." />media.</div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." />press.</div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." />Plane Dukes Rahman Trio.</div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." />contact.</div>
</div>
and the css styling is here (any optimization here is also welcome!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}
You are missing:
.nav a, .nav2 a {
left: 0;
}
That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.
UPDATE
Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:
BEST WAY:
Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div
QUICK WAY
.nav a, .nav 2 { background: url(/images/shim.png) }
Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.
Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.
Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.
I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.