avoid unwanted scaling for image in parallax scrolling effect - javascript

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

Related

Bootstrap4 Navbar doesn't work with "jQuery.BgSwitcher" in mobile

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!

Display div over everything

I'm struggling to display a div on top of everything else.
I've followed other post on SO which say to use z-index and position: absolute.
Here is a screenshot to describe what I mean.
Here are the css attributes on the classes:
#media only screen and (min-width: 600px) {
.cd-single-point .cd-more-info {
position: absolute;
width: 200px;
height: 240px;
padding: 1em;
overflow-y: visible;
z-index: 10;
line-height: 1.4;
border-radius: 0.25em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
}
If anyone is able to help me I'd really appreciate it.
The link can be found here https://what-is-wrong-with-this-css.herokuapp.com/.
Thanks
You have issue with overflow in the class .cd-image-wrapper, you need to make it visible like this :
.cd-image-wrapper {
position: relative;
overflow: visible;
z-index: 2;
}
Can you try and increase the z-index: 999;
Try to increase the z-index to 9999
Try to use !important (maybe something is overriding it)
Try to decrease the z-index of the overlaping element (again try with !important)
Try to change something obvious in your media query to make sure that it is currently executed, for example change the background color
Note: this is just to experiment and find the cause of your issue, using "!important" is not recommended

Element with background color vertical align middle of the parent

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

Fixed notifications overlapping

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.

Z-index not working

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:...

Categories

Resources