Related
This might be duplicate question, I search lot on google not found any thread
Code is as pages/amp/amp/
export const config = {amp: true};
const posts = [
{
body: "Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.",
id: "1",
time: "1498910001"
},
{
body: "Sed leo sapien, molestie sit amet lorem eu, suscipit imperdiet tortor. Mauris maximus magna quam, non sodales metus auctor nec. Aenean tristique massa enim, non dictum mauris eleifend tristique. Proin fermentum nulla a nulla bibendum ultricies. Nulla pulvinar, risus vel tristique aliquet, elit quam tincidunt nisi, non blandit leo nulla eu ipsum. Sed porta, felis vitae elementum pellentesque, mauris felis rhoncus quam, ac suscipit eros justo ac justo. Proin et elit vitae sem interdum posuere et vitae nibh. Ut sed orci aliquam, pulvinar felis ac, pretium massa. Nullam porta ipsum non euismod mollis. Quisque scelerisque nisi quis pharetra blandit.",
id: "2",
time: "1498910002"
},
{
body: "Vestibulum eu varius dolor. Praesent sagittis magna sem, non bibendum quam aliquam et. Sed et tristique mi. Quisque porta lorem et nulla lacinia gravida. Nullam semper lobortis sem, interdum tempus tellus. Proin accumsan imperdiet leo at vulputate. Nulla euismod placerat finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
id: "3",
time: "1498910003"
},
{
body: "Aenean ante erat, egestas a justo eu, sollicitudin convallis nulla. Fusce ex est, ornare in odio eu, venenatis dapibus purus. Etiam sit amet orci quam. Proin lobortis lobortis tellus, non elementum nunc consequat ac. Suspendisse eu purus sit amet dolor elementum mattis ut in odio.",
id: "4",
time: "1498910004"
}
]
function Amp({items}) {
return (
<amp-live-list layout="container"
data-poll-interval="1000"
data-max-items-per-page="15"
id="amp-live-list-insert-post">
<button update
on="tap:amp-live-list-insert-post.update"
className="ampstart-btn ml1 caps">
You have updates
</button>
<div items>
{
items.map((post, index) => (<p key={index} id={post.id} data-sort-time={post.time}>{post.body}</p>))
}
</div>
</amp-live-list>
)
}
export default Amp;
export async function getServerSideProps({req, res, locale, params}) {
if (req.method === 'POST') {
console.log(req.body);
posts.push({
body: "sd",
id: posts.length + 1,
time: '' + (Date.now())
})
}
return {
props: {
items: posts,
}
};
}
I'm very thankful if you can provide any thread,link
i tried google search not found any thread which regard with nextjs
i'm trying to get rid of error as in picture
update[button] and items[div] was remove during ssr so replace update="true" and items="true"
With this code, I get the following result:
I want to know how I can make the container > divs fit into the available space, just like in this image:
how can I do it?
.container{
display:flex;
flex-wrap:wrap;
border:3px solid black;
}
.container > div{
margin:5px 15px;
}
.son1{
border:1px solid red;
width:400px;
height:400px;
}
.son2{
border:1px solid blue;
width:250px;
height:220px;
}
.son3{
border:1px solid blue;
width:200px;
height:270px;
}
<div class="container">
<div class="son1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
</div>
<div class="son2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
</div>
<div class="son3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
</div>
<div class="son3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
</div>
</div>
NOTE: this is my real problem, with this example I know that I can solve my problem
I made a grid system for you. Will it solve your problem? please take a look and let me know.
Note that I didn't work on the responsive side of this snippet. Also, there is an overflow and I am sure you can fix that easily.
And here is a screenshot of the result. Is this what you are looking for?
body {
margin: 40px;
font: 80% Arial, Helvetica, sans-serif;
}
.wrapper {
display: grid;
justify-items: center;
justify-content: center;
grid-gap: 10px;
grid-template-columns: repeat(5, 177px);
grid-template-rows: repeat( 4, 180px);
background-color: #fff;
color: #444;
}
.box {
border: 1px solid #444;
padding: 20px;
font-size: 150%;
color: black;
}
.a {
grid-column: 3 / 6;
grid-row: 1 / 2;
background-color: #444;
}
.c {
grid-column: 3 / 6;
grid-row: 2 / 3;
background-color: beige;
}
.d {
grid-column: 3 / 6;
grid-row: 3 / 4;
background-color: yellowgreen;
}
.e {
grid-column: 1 / 3;
grid-row: 1 / 4;
align-self: stretch;
background-color: burlywood;
}
.b {
grid-column: 1 / 3;
grid-row: 4 / 4;
align-self: stretch;
background-color: antiquewhite;
}
<div class="wrapper">
<div class="box a">
<p>This is box A. </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
</div>
<div class="box b">
<p>This is box B.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! </p>
</div>
<div class="box c">
<p>This is box C.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
</div>
<div class="box d">
<p>This is box D.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
</div>
<div class="box e">
<p>This is box E</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni fugiat commodi, at quia atque sequi, libero tempora repellendus perferendis, quam aliquam. Itaque minima at, perferendis fugit vitae impedit facere possimus.
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus accusamus necessitatibus cumque fugit odit ducimus eveniet laboriosam amet veritatis impedit, sint explicabo! Excepturi, minus dolorum? Sapiente nam facere veniam. Nesciunt?</p>
</div>
</div>
If you are looking for more customized gird I highly recommend using this library it will help you out a lot: Cascading grid layout library
The Github repo for masonry
I hope that helps you out reaching an answer.
If you want irregular sized containers to line up probably best to use floats or Masonry (jQuery plugin).
But flexbox is great if you want to align columns very specifically and have them line up really evenly. I've removed all heights and added flex-wrap: wrap and align-content: flex-start to the container class to make this work.
You can take this and add spacing you desire, I put in the box model in css so padding won't shift the containers/increase their percentage widths.
* {
box-sizing: border-box;
}
.container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
border:3px solid black;
}
.container > div{
}
.son1{
border:1px solid red;
width: 60%;
}
.son2{
border:1px solid blue;
width: 40%;
}
.son3{
border:1px solid blue;
}
<div class="container">
<div class="son1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
</div>
<div class="son2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
</div>
<div class="son1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
</div>
<div class="son2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
</div>
</div>
If you want to create a vertical flexbox masonry using CSS only (no JS), you can try this:
.masonry { /* Container */
display: flex;
flex-flow: column wrap;
max-height: 1000px;
margin-left: -8px; /* Adjustment for the gutter */
width: 100%;
}
.masonry-brick {
margin: 0 8px 8px 0; /* Some gutter */
max-width: 33%; /* 3 columns */
}
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 1000px;
margin-left: -8px;
width: 100%;
}
.masonry-brick {
margin: 0 8px 8px 0;
background-color: lightgrey;
max-width: 33%;
}
<div class="masonry">
<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper.
</div>
<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris. Sed sed sollicitudin lorem, non finibus leo. Vivamus sapien dui, bibendum at nibh nec, consectetur ornare justo. Sed ac augue id libero porttitor placerat.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper. Curabitur porta nibh nec metus scelerisque, eu ultricies augue viverra. Nam laoreet, libero vitae molestie condimentum, justo lorem vestibulum erat, sit amet elementum risus augue at erat.
</div>
<div class="masonry-brick">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi massa, tristique vehicula ligula at, vulputate vulputate tortor. Etiam lobortis ex eu nunc tristique, in tristique quam placerat. Nullam in tempor felis. Fusce congue pretium urna, cursus suscipit dolor rutrum in. Sed ut sagittis purus. Suspendisse sed scelerisque lorem, sed rutrum dui. Morbi elementum aliquam ante, eget malesuada tortor mattis sed. Sed sit amet porta mauris.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="masonry-brick">
Sed non euismod tellus. Mauris rhoncus nulla id eros blandit, facilisis gravida ex congue. Aliquam ullamcorper tristique enim, eget suscipit velit. Praesent non eros id diam molestie lacinia sed quis diam. Pellentesque semper sapien blandit risus consequat, nec tempus eros ultrices. Duis ornare magna posuere massa sollicitudin posuere vitae a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="masonry-brick">
Cras ac justo consectetur, fringilla tortor ac, tristique massa. Sed ultricies pretium nisi ac sollicitudin. Pellentesque viverra eros id blandit consequat. In turpis nulla, sodales ac tristique nec, volutpat quis felis. Curabitur mi quam, euismod sit amet egestas faucibus, rhoncus ac massa. Maecenas ac fringilla elit, quis eleifend ligula. Sed laoreet est ut dolor dictum, et feugiat leo ullamcorper. Phasellus ligula neque, finibus aliquam fermentum eget, lobortis at sem. Integer vulputate eu mauris eu ullamcorper.
</div>
</div>
I have 3 paragraphs side by side, each with a button underneath. When the screen size changes so does the length of the paragraphs which moves the buttons out of line with each other.
Is there a way to make it if one button moves down the other ones will move with it so they all stay inline?
The simplest way to achieve this could be:
Make you paragraph container same height and put your button at the end of the container of the paragraph and make its position absolute and the parent container must be relative. In this case if if paragraph height changes the button's position will not change as it's out the content flow for absolute position.
.container {
display: flex;
}
.card {
width: 33%;
border: 1px solid black;
position: relative;
}
.btn {
padding: 0 50px;
position: absolute;
margin-right: 20px;
bottom: 0;
}
.card p{
padding: 10px;
}
<div class="container">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis massa, at maximus erat. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem sapien, dictum congue elit quis, ultrices aliquam nunc. Phasellus bibendum augue augue, eget pharetra dolor faucibus eget. Vestibulum facilisis eros mollis, dictum mauris in, pharetra lacus. Aliquam sollicitudin sagittis magna, Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.
</p>
<button class="btn">lulu</button>
</div>
<div class="card">
<p>
Vivamus volutpat lorem molestie congue tempor. Phasellus in ligula urna. Aliquam mi lectus, gravida eget tincidunt in, mattis vitae nibh. Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.
Integer nec dui ipsum. Vivamus malesuada id diam ac iaculis. Aliquam aliquam sagittis tortor non fringilla. Nullam maximus cursus leo quis dignissim. Nullam vehicula elit sit amet libero congue, id condimentum nibh dignissim. Nulla facilisi. Sed pretium tincidunt scelerisque. Nam accumsan sed diam vitae sagittis. Nam facilisis ex nisi, venenatis interdum ante tristique sit amet. Pellentesque consequat non magna a hendrerit. Integer laoreet sapien enim, nec pharetra est aliquam nec. Etiam ut euismod augue, ut feugiat turpis. Aenean pulvinar nec ligula vitae bibendum. Nam hendrerit leo ac vulputate maximus. Sed eu tincidunt est.</p>
<button class="btn">lulu</button>
</div>
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis massa, at maximus erat. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem sapien,
Vivamus volutpat lorem molestie congue tempor. Phasellus in ligula urna. Aliquam mi lectus, gravida eget tincidunt in, mattis vitae nibh. Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.
Integer nec dui ipsum. Vivamus malesuada id diam ac iaculis. Aliquam aliquam sagittis tortor non fringilla. Nullam maximus cursus leo quis dignissim. Nullam vehicula elit sit amet libero congue, id condimentum nibh dignissim. Nulla facilisi. </p>
<button class="btn">lulu</button>
</div>
</div>
Yes.
You first need to wrap the paragraph with its according button into a wrapper element.
Then you need to make sure that this wrapper elements always have the same height.
Last you need to position the buttons. Here you can make use of flexbox. Take a look at the property justify-content.
It's quite simple to achieve this using Flex:
Add a parent <article> to the paragraph and button elements.
Give them a display:flex and justify-content: space-between.
This will be enough to always make the buttons align with each other at the bottom.
section{
display:flex;
padding:20px;
}
article{
flex-basis:33%;
display:flex;
flex-direction: column;
justify-content: space-between;
}
#media (max-width:500px){
section{
flex-wrap:wrap;
}
article{
flex-basis: 100%;
}
}
<section>
<article><h1>1</h1><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam.</p><button>read more</button></article>
<article><h1>1</h1><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, adipisci?</p><button>read more</button></article>
<article><h1>1</h1><p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quibusdam laudantium illo quidem expedita beatae ratione quaerat culpa dolorem reprehenderit numquam provident aliquid molestiae sint voluptate, dolore repudiandae nemo impedit? consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam.</p><button>read more</button></article>
</section>
Is it possible to make a fixed div scroll along when page scrolls, using CSS? And yes, it needs to remain fixed for other reasons.
.fixedDiv{
width:100%;
height:200px;
font-size:4em;
position:fixed;
}
.otherDiv{
position: relative;
width:250px;
height:auto;
}
<div class="fixedDiv">THIS IS A FIXED DIV</div>
<div class="otherDiv">The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
1914 translation by H. Rackham
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
1914 translation by H. Rackham
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
You need to listen to onscroll and, based on that, update the position of the fixed element, relative to the viewport and taking into account the scroll percentage (rather than its absolute value) and the available vertical space left by the fixed element.
You can then move it using window.requestAnimationFrame and transform: translate(0, <Y>) to get an smoother and more performant animation:
const fixedDiv = document.getElementById('fixedDiv');
document.onscroll = () => {
const { documentElement } = document;
const { scrollTop, scrollHeight, clientHeight } = documentElement;
const availableSpace = clientHeight - fixedDiv.offsetHeight;
const scrollPercentage = scrollTop / (scrollHeight - clientHeight);
/*
scrollTop = How many pixels the page has scrolled vertically.
scrollHeight = Total height of the page, including content that overflows the visible area.
clientHeight = Viewport height.
availableSpace = How much unused vertical space does #fixedDiv leave.
Using requestAnimationFrame and transform, rather than not using it and updating top or
margin-top, will make the scrolling effect smoother and more performant:
*/
requestAnimationFrame(() => {
fixedDiv.style.transform = `translate(0, ${ availableSpace * scrollPercentage }px)`;
});
};
body {
margin: 0;
font-family: monospace;
}
#fixedDiv {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
font-size: 32px;
padding: 16px;
box-shadow: 0 2px 0 black, 0 -2px 0 black;
background: rgba(255, 255, 255, .5);
}
#lorem {
width: 250px;
padding: 0 16px;
}
<div id="fixedDiv">THIS IS A FIXED DIV</div>
<div id="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta vitae nunc ut fermentum. Nam cursus eu neque eu tincidunt. Praesent libero eros, pellentesque ut est id, consectetur vestibulum nisi. Nunc eget arcu tortor. Quisque tempus erat eros, ac interdum ligula ullamcorper luctus. Praesent ultricies tristique magna, non tempor quam porttitor eget. Vestibulum volutpat vel turpis eget auctor. Vestibulum sagittis odio pulvinar tortor vestibulum, sed pharetra lacus mollis. Mauris sollicitudin sem mi, quis placerat turpis commodo quis. Nam non blandit justo. Morbi cursus metus orci, efficitur condimentum purus vehicula vel. Sed vel pulvinar risus, at posuere mauris. Suspendisse a enim quis arcu porttitor finibus. Sed eu turpis iaculis, gravida quam non, hendrerit ipsum. Integer id commodo eros, sit amet tempus velit. Aliquam velit tortor, faucibus eu elit ut, volutpat pulvinar nisi.
</p>
<p>
Quisque aliquam quam at orci tempor, sit amet suscipit mauris congue. Aenean id orci venenatis, iaculis nisi non, dictum mi. Duis a purus sed dui iaculis pharetra nec eu nunc. Ut tincidunt imperdiet felis, maximus dapibus sem congue ac. Nullam eget risus iaculis, blandit urna vel, dignissim tellus. Curabitur viverra, nisi eu blandit cursus, ante lacus maximus lacus, eget auctor ante ante id nibh. Vivamus interdum, ex ac placerat laoreet, tortor nisl efficitur elit, eu elementum felis ex ut magna. Vivamus tempor neque nec sodales consectetur. Suspendisse finibus tempor metus, varius euismod nulla. Cras maximus metus a viverra interdum. Duis sagittis mollis volutpat. Nulla lacinia ultricies scelerisque. Sed elementum sem eu suscipit pretium. Suspendisse potenti. Maecenas ut sollicitudin quam. Maecenas congue vehicula maximus.
</p>
<p>
Sed dictum aliquam nibh vel facilisis. Donec nec erat ut justo pretium hendrerit at a ex. Aliquam sollicitudin nulla sed consectetur venenatis. Mauris facilisis nisl purus, sit amet tristique ligula sollicitudin sit amet. Donec non erat lorem. Praesent posuere ultricies fermentum. Donec rhoncus aliquet metus sed porttitor. Mauris semper nibh suscipit volutpat gravida. Morbi vulputate nulla eget convallis aliquet. Quisque velit dolor, finibus sed porttitor sit amet, dictum ac metus. Ut ultricies porttitor orci vel iaculis. In quis odio ornare, scelerisque lacus quis, auctor eros.
</p>
<p>
Duis elementum, mauris eu facilisis porta, eros sem fermentum ex, in laoreet velit mauris sit amet massa. In nec ex euismod, ullamcorper magna quis, rutrum quam. Sed volutpat vel nisl quis placerat. Suspendisse auctor enim eu tempor congue. Quisque condimentum, ligula ut suscipit blandit, elit leo condimentum ante, auctor porttitor ante libero eu erat. Mauris et purus pulvinar, tristique leo eu, fermentum mauris. Suspendisse mollis vel odio a gravida. In euismod gravida massa. Donec in sem nunc. Etiam rutrum quis ex sed vestibulum. Nam aliquet tristique mi vel suscipit. Fusce et nisl et odio vulputate dignissim eget sed nisl.
</p>
<p>
Integer non malesuada sapien, at tincidunt diam. Fusce id metus metus. In volutpat sem vel risus euismod vulputate. Pellentesque tincidunt ante nisi, id feugiat enim finibus a. Mauris scelerisque vestibulum nunc, scelerisque egestas mauris aliquet auctor. Nunc vel nulla molestie, tempor lacus sed, interdum sapien. Nam luctus quis tellus quis elementum. Donec lorem enim, semper consectetur massa quis, convallis vulputate lectus. Suspendisse ultricies ultricies orci, at molestie neque bibendum nec. Nullam hendrerit eget arcu vel laoreet. Praesent vestibulum leo sit amet libero venenatis, sit amet finibus lorem fermentum. Nullam quis tellus pulvinar, ultrices tellus nec, aliquet ante. Nam eu libero id orci volutpat egestas.
</p>
</div>
I have been trying to, but does not seem to be working.
::selection {
background-color: #ffb7b7;
animation-name: example;
animation-duration: 4s;
}
::-moz-selection {
background-color: #ffb7b7;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
MDN lists background-color as animatable, but selection being a pseudo-selector might mess things up.
I could bring in a JavaScript animation library but not sure which.
What am I doing wrong? Is it possible in pure CSS (Chrome and FF are the main targets), if not than what JS workaround should I use?
According to MDN docs on ::selection, it allows only a small subset of CSS properties:
color
background-color
cursor
caret-color
outline
text-decoration
text-emphasis-color
text-shadow
So… it just ignores your animation-name and animation-duration.
I think there's a good reason for that, i sure am glad there are no websites with psychedelic text selection effects.
Using JS, you can get text selection position, place a temporary element below it (using position: absolute or fixed, and negative z-index) and animate it's background.
A quick-n-dirty example (ineffective and doesn't handle multiline selections properly):
"use strict";
function updateFakeSelection() {
// remove the previous fake-selection element:
document.querySelectorAll(".fake-selection").forEach(function (e) {
return e.parentNode.removeChild(e);
});
// get text selection position:
var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
// create a new element:
var div = document.createElement("div");
div.classList.add("fake-selection");
// position it:
div.style.left = rect.left + "px";
div.style.top = rect.top - 1 + "px";
div.style.width = rect.width + "px";
div.style.height = rect.height + 2 + "px";
// (these '-1' and '+2' are there just to give it a bit of extra height)
// …and finally place it to the document:
document.body.appendChild(div);
}
// execute the function when the text selection is changed or window is scrolled:
document.addEventListener("selectionchange", updateFakeSelection);
window.addEventListener("scroll", updateFakeSelection);
::selection {
background-color: transparent;
}
::-moz-selection {
background-color: transparent;
}
.fake-selection {
position: fixed;
animation: colorchange 1.5s infinite alternate;
z-index: -1;
}
#keyframes colorchange {
0% {
background-color: hotpink;
}
50% {
background-color: crimson;
}
100% {
background-color: sandybrown;
}
}
<p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p>
<p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p>
<p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p>
<p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p>
<p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p>
<p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p>
If you decide to use something similar, just changing the element size would be more effective than destroying and creating it after each selection change.
Please don't be evil. :)
Yes, background-color is animatable but here the problem:
We just can use these properties within the selector ::selection in css:
color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color
text-shadow
Yes I know it's sad but... that's what we have
By the way, you can know more about it going to this link
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aselection