I'm using bootstrap's affix plugin here
HTML:
<html>
<head>
...
<style>
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
top: 10px;
}
h1.affix {
top: 8px;
}
body {
padding: 10px;
height: 5000px;
}
</style>
</head>
<body>
<h1 data-spy="affix" data-offset-top="10">yo!</h1>
</body>
</html>
Whenever I scroll down for a considerable distance (using scroll on the right, not the mouse scroll), the div jumps. How can I prevent that? Apperantly the problem is div scrolls up beyond the screen, then it's applied a fixed position and it moves down causing it to jump. I tried using transition to make it jump smoother, but for some reason it didn't work.
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
transition-property: top;
transition-duration: 3s;
}
How can I fix this?
Try this:
Use affix class
<h1 class="affix">yo!</h1>
Now it will not jump !
Related
I have create a bottom div that is present all the time when scrolling the site. Its "natural" stop is right after the footer. When I do scroll, and it's not at the footer, it is a bit transparent. However, what I would like to do is when the sticky div reaches the bottom (i.e. its "true" position), then the background changes or something like that.
Is that possible WITHOUT using JS or something like that ?
Updated with a fiddle:
https://jsfiddle.net/octvg6mn/
HTML:
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
CSS:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background: blue;
color: white;
opacity: 0.8;
padding: 25px;
}
.stickyDiv:hover {
opacity: 1.0;
}
So as you can see in the fiddle, the sticky has a light opacity while scrolling, but when I reach the bottom, where it is supposed to be, I would like it to turn the opacity into 1.0 or something like, just like when hovering the mouse.
You can apply an opaque background to the container to simulate this. When the sticky element will reach the bottom that background will hide the transparency:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.container {
background:rgba(0,0,255,1);
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background:rgba(0,0,255,0.5);
color: white;
padding: 25px;
}
.stickyDiv:hover {
background:rgba(0,0,255,1);
}
<div class="container">
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
</div>
I am currently trying to make my .modal class's black background span the whole document length and width (not just the whole viewport, which it is currently doing). It would also be great to make it so you couldn't scroll the document anymore until you interacted with it.
I have verified that its parent container would be body, which I believe should be at least 600px due to my containers having a minimum height of 300px each and them being stacked on top of each other. I have used both 100% width and 100% height and absolutely positioned my element but have had no luck with it covering anything past the bottom of the viewport. I used z-index to ensure it was sitting on top of the other elements in the page and nothing seems to work.
<body>
<main class="todo">
<section class="todo__ctn todo__ctn--lists">
<span>Hello man...lists</span>
</section>
<section class="todo__ctn todo__ctn--tasks">
<span>Hello man...tasks</span>
</section>
</main>
<div class="modal">
<div class="modal__content">
<p>Hello Man...content</p>
</div>
</div>
</body>
````````````````
/* SCSS Styling */
* {
box-sizing: border-box;
}
.todo {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
border: 1px solid black;
&__ctn {
min-height: 300px;
&:first-child {
border-bottom: 1px solid black;
}
}
&__ctn--lists {
background: gold;
}
&__ctn--tasks {
background: tan;
}
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,.8);
color: orange;
&__content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
}
}
Like I had mentioned, I would like to have the black background persist, even when you scroll down the page. Once I scroll past the bottom of the viewport, the black background seems to stop and I don't know why.
HTML looks like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 5</title>
<style type="text/css">
</style>
</head>
<body>
<div id="animWrap">
<div id="boks"></div>
</div>
</body>
</html>
What i want to do is make the div with the id "boks" expand and "eat" the entire div "animWrap".
So my css is as following:
body{
margin: 0px;
}
#animWrap{
height: 600px;
width: 960px;
background-color: rgb(145, 75, 75);
margin: auto;
position: relative;
}
#boks{
width: 250px;
height: 175px;
top: 200px;
left: 380px;
background-color: rgb(180, 100, 100);
position: absolute;
transition: all 5s linear 0s;
}
#animWrap:hover #boks {
height: 400px;
width: 580px;
}
What i noticed is that it only expands to the right and towards the bottom. Probably because it isnt centered properly. Is there any way to expand it in every direction from the middle with only html and css?
Of course, you can do that but you have to apply a trick. Just calculate the space remaining. In this case I think the space covered by the whole div is 960px and #bok got 580px while hovering so the space at left = 190px and right = 190px.
Now you can apply the hover css like this:
#animWrap:hover #boks {
height: 400px;
width: 580px;
left:190px;
}
This will do the trick and animate aligning at center. Its working in mine.
Happy Coding!
Cheers!!
If you you set #boks width & height respectively to 100%, and comment out it's top and left values, it should fill the entire parent div:
#boks{
width: 100%;
height: 100%;
background-color: rgb(180, 100, 100);
position: absolute;
transition: all 5s linear 0s;
}
i want to place text on top of the image inside container with width 80%
conainer.width 80% - code below not working
conainer.width 100% - code below working
screen shot of my brouser
<style type="text/css">
.conainer {
margin: auto;
width: 80%; /* change that to 100% code will work */
border: thin solid #000;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
</style>
<div class="conainer">
<div class="image">
<img src="img/banners.jpg" width="100%" height="100%" />
<h2>some text gos here</h2>
</div>
</div>
You should just set the background of your div, instead of trying to place the h2 on top of an img tag
It works for me. Is there any more code?
I think the most code-efficient and compatible method would be to define your banner image as the background-image of div.image using CSS.
Replace your h2 style as
h2 {
position: fixed;//yours is on top of image but absolutely positioned, so not visible
top: 200px;
left: 0; //Specify where you want to put your image with top and left properly now.
width: 100%;
}
Ok! i found the problem change top 200 => top 0
h2 {
position: absolute;
top: 0px;
left: 0;
width: 100%;
I have a following HTML/CSS (simplified):
<body>
<style>
body
{
margin: 0px;
padding: 0px;
color: #fff;
background-color: #090909;
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
background-color: blue;
}
#header
{
width: 500px;
margin: 0px auto;
background-color: green;
}
#over-div {
background-color: red;
position: absolute;
height: 20px;
width: 100%;
margin: 0px;
top: 0px;
left: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
</style>
<div id="over-div">aa</div>
<div id="header">
header
</div>
<div id="content">
content here
</div>
</body>
The idea is to have over-div to cover the upper part of the page completely (but do not keep it fixed there, so it is not visible when user scrolls down the page).
If you zoom-in extremely (Ctrl+ wheel) till the horizontal scrollbar appears, you can see that after scrolling completely to the right, the over-div does not cover the header completely to the right side of window.
I hoped that width:100% would mean "always use 100% width of the body", but it seems it is not true for absolute positioned divs.
Tested browsers: Firefox 3.5, Chrome, IE8 (with and without compatibility mode).
Is there any way to get that div cover 100% width of page?
Yes, add this to the #over-div styling:
min-width:500px;
That ensures that #over-div will be at least as wide as your #header and #content divs