Please see my fiddle. In this fiddle, the black box is fixed on page. If we scroll the page the black box is overlap the map also. I want to stop the fixed position before the map. If we scorll the page after the map, black box should stay before the map. How can I do?
CSS:
.item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;}
.new_icon{ position:fixed; width:100px; height:100px; background:#000; right:10px;}
http://jsfiddle.net/6f8HK/
No need for javascript, add an id to your iframe, set the css to:
#map
{
position:relative;
z-index:2;
}
And give your fixed element a lower z-index:
.new_icon {
position:fixed;
width:100px;
height:100px;
background:#000;
right:10px;
z-index:1;
}
Js fiddle
Add z-index: -1; to .new_icon
DEMO
Try this Working Fiddle.
JQUERY:
$(window).scroll(function() {
if ($(this).scrollTop() > 450)
{
$('.new_icon').fadeOut();
}
else
{
$('.new_icon').fadeIn();
}
});
NOTE : use can use .show/.hide if you don't like the fadein/fadeout effect.
Related
So I was just testing phone functionality for my site. It operates as expected (ie the logo is at the top), but when clicked through as a link from instagram it displays as below. Is it something to do with the bar that is displayed in the link from instagram?
Jsfiddle
html
<div class="Rad_title_container">
<div class="Rad_title">
<svg>
</svg>
</div>
</div>
css
.Rad_title_container{
width:100%;
}
.Rad_title {
padding-top:2%;
padding-left:17.5%;
z-index:3;
position:fixed;
width:65%;
pointer-events:none;
}
It seems it didn't like position:fixed. I had to add a max height as well because it was doing something funky like expanding the height to 200%. No idea what was going on.
.Rad_title_container{
position:absolute;
width:100%;
z-index:3;
}
.Rad_title {
padding-top:2%;
position:relative;
width:65%;
pointer-events:none;
text-align:center;
margin:auto;
max-height:10vh;
overflow-y:none;
}
I have an image which has and inner border with opacity set to .7 and round corners, which works great. The only problem is i need to add a hover state to image. I have tried :hover but nothing seems to work.
The border needs to go blue and with a png overlay.
HTML:
<div class="box" >
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1" >
</div>
</div>
CSS:
.box{
width:191px;
background:#FCFBDF;
margin: 0 auto;
}
img{
width:191px;
height:191px;
display:block;
border-radius:50%;
}
.imgWrap{
position:relative;
}
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border: 10px solid rgba(248, 248, 255, 0.7);
border-radius:50%;
}
JS Fiddle here
http://jsfiddle.net/zangief007/52fFF/3/
I am guessing you tried to fire the hover state on the image like this :
img:hover{
.. your code ...
}
But as there is a pseudo element over it, you can never hover the image.
The workaround is to trigger the hover state on the pseudo element like this :
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
DEMO
Add hover like this.
.imgWrap:hover{
width:250px;
}
PS : I am just adjusting the width based on hover. But you could do whatever you like in the hover.
Hope this helps.
Cheers!
EDIT : Assuming you don't need to modify the image with the cat, web-tiki's solutions seems better.
I think you may have to use some Javascript/Jquery, as long as you can't directly trigger a mouse hover on the image (because there is some element above).
Here is an example.
$(".imgWrap").hover(function(){
$('img').toggleClass("imgHover");
$('.imgWrap').toggleClass("imgHover");
$('.box').toggleClass("imgHover");
});
.imgHover{
width:300px;
height:300px;
}
try this in your JSFiddle. don't forget to add Jquery lib
http://jsfiddle.net/52fFF/11/
As example i just changed the size of the Box, the Circle and the image.
I am developing a tab strip. I want the selected tab has to overlap 1px on the container div so that it will have look as it is part of the container...Here is the jsfiddle.
I dont want to make it using script. I would like to prefer CSS style first.If you say that it can't be done using pure CSS, then only can go for script.
It should look as follow:
see the demo
Add this style to your fiddle
.vUiTsContainers {
z-index: 1;
top: -3px;
position: relative;
}
.irmNText {
z-index: 10;
position: relative;
}
Hi now define some css in your css as like this
.vUiTsTabs > ul{
overflow:hidden; // remove this line
}
or add this css
.vUiTsTabs > ul:after{
content:'';
overflow:hidden;
display:block;
clear:both;
}
.vUiTsTab.vUiTsTabSel{
position:relative;
}
.vUiTsTab.vUiTsTabSel:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
height:3px;
background:#F3F3F3;
}
Live demo
I also created a live demo but was beaten to it due to the awfully slow computer I'm using
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.
Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ??
and i use the z-index but still it's not working.
I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:
<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>
And then in your stylesheet:
iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }