Is there a simple CSS / JS workaround for fixed notifications?
I have put a JSfiddle together http://jsfiddle.net/Lcq6syLt - as you will see I have two notifications which are fixed, but they are overlapping each other. Is there a way to make them go above each other? and not overlap?
The CSS I am using is:
div.notification.fixed {
width: 300px;
max-width: 300px;
position: fixed;
bottom: 0; right: 10px;
z-index: 1000;
opacity: 0.9;
}
The best thing to do is make a common container and make that fixed instead.
Related
So I am using Bootstrap4 (Bootswatch4 to be more specific) and I need a div with changing/fading backgrounds. I found that js to be closest to what I want: https://github.com/rewish/jquery-bgswitcher
So I use it like this in https://jsfiddle.net/p5d8rskg/:
$(".banana").bgswitcher({
images: ["image1.jpg", "image2.jpg"],
interval: 5000,
duration: 2000
});
Everything works fine in the desktop version. But the problem is that in mobile version the navbar goes over the div and pushes the content of the div outside. How can I fix this "bug"? Or are there simpler approaches to get the same effect as with "bgswitcher" without that "bug"?
Thanks for your input.
More a hacky solution, but a workable one is to use position: absolute for your .banana container. This way the container is fixed to your defined position.
I have updated your fiddle in order to show the solution:
nav {
z-index: 1000 !important;
}
.banana {
background-color: powderblue;
height: 400px;
width: 400px;
background-size: cover;
color: white;
font-size: 30px;
position: absolute;
top: 56px;
left: 0;
}
Basically i added position: absolute as well as top: 56px (the height of your navbar) and left: 0 to define the position. In order to bring your navbar to the front and not the text apply a bigger z-index to this element.
Good luck!
I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from codepen.io .
In this demo you can see the images. The images width and height is different not a same. I want to crop that images with CSS Like this DEMO page.
The difference between the first and second demo
First demo :
.exPex {
width: 100%;
}
Second Demo:
.exPex {
width: 200%;
}
So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?
You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.
HTML for an example image:
<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>
CSS:
._jjzlb {
position: relative;
padding-top: 100%;
width: 100%;
overflow: hidden;
margin: 1px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Optional centered background */
background-position: center;
}
If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.
HTML for an example image with normal image mouse interactions:
<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
<img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>
CSS to hide the image on top:
.exPex {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity:0;
}
And here is a DEMO with the images, interacting with the user like you might expect them to.
EDIT: As pointed out by #GCyrillus, there are downsides to using a background image rather than keeping the images in the content of the page. These might include search engines and screen readers failing to recognize the image. I do not have an exhaustive list of the downsides but depending on your application it may be worth investigating.
you may use transform :
.exPex {
position: absolute;
left: 0;
top: 0;
min-width:100%;
margin: 0;
transform: scale(2);
transform-origin: 0 40px;
}
http://codepen.io/gc-nomade/pen/jrbPRy
if you define a dimension to the image the aspect ratio will also be included. The best way is to put your image inside a div and declare the size of images that way you will be able also to crop images.
Well it might seem obvious but you could just put a fixed width to it ? Try to change width: 100% with width: 400px on .exPex for example.
I am trying to achieve this "stupid" thing, but I can't find a solution.
I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image.
more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand
I tried to make a codepen, but without success http://codepen.io/mp1985/pen/BoEMPN
.bg {
background: red;
top: 25%;
position: absolute;
width: 100%;
height: 100%;
bottom:0;
left: 0;
right: 0;
z-index: 100;
backgrund-position: center center;
z-index: 1;
}
do you have any advice or suggestion?
You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.
.container {
height: 900px; // img-height * 4
}
Then, for the background color to align to the center of the first image, add this:
.bg {
top: 150px; // img-height / 2
}
As for horizontally centering the imgs, use
.box-images {
left: 50%;
margin-left: -300px; // img-width / 2
}
Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with
position: relative;
left:50%;
Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with
position: relative;
min-height: 900px; //(imgNum-1)*imgHeight
top: 150px; //imgHeight/2
and with what you have already set.
If you have width problems, min-width and max-width are useful attributes.
In my mind it works. Please comment for issues and rate positive if useful
here is my demo, as you can see the image scale so the margin:top of the parallax wrapper can't be dynamic.
demo : http://jsfiddle.net/KsdeX/12/
.wrapper-parallax {
margin-top: 150px;
margin-bottom: 60px;
}
what are the possible solution for this? max width for the img?
yes, i dont really understand whats the problem here, you can just do
img {
position: fixed;
top: 0;
max-width: 350px;
z-index: -1;
background: cyan;
}
and then the image wont scale anymore.. ?
I believe this is what you wanted..
I had to use some javascript in this code, and declared some ids to make it easy for me :p
fiddle
Take a look at this page I'm working on: http://s361608839.websitehome.co.uk/textcube/
The nav bar is going behind the slider and I wanted it to sit above instead. I've tried setting a high z-index on the #navbar and #navbar-inner and nothing happened.
#navbar{
background: url(../images/nav-bg.png) repeat-x;
height: 55px;
margin: 0;
padding: 0;
z-index: 9999;
}
#navbar-inner{
width: 912px;
margin: 0 auto;
position: relative;
z-index: 9999;
}
I think the javascript slider using CSS style .bx-window and .bx-window are the cause however I have set a low z-index on both, yet I don't see any difference.
Help with this would definately be appeciated.
Cheers
z-index works only with positioned elements (position:absolute, position:relative).
Here's an article http://www.w3.org/TR/CSS2/visuren.html#z-index
In your case, you forgot to add position to one of your element.
Add position:relative to #navbar
It works with either float:... or position:...