I want to be able to scroll the parent div, but have some kind of box in the center that shows the currently visible content relative to the scroll. theres probably a fancy term for it but it espaces me.
i saw a website that does something similar to this : https://www.heetch.com/ with the div that contains the phone being scrolled, only the content in the phone screen is being moved.
but im trying to do that without js, maybe with css perspectives ?
body
{
margin: 0;
}
.parent
{
width: 100vw;
height : 100vh;
background-color : "red";
display : grid;
justify-content: center;
justify-items: center;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
}
.screen
{
border: solid 1px black;
width: 500px;
height: 300px;
position: sticky;
top: 50%;
transform: translateY(-50%);
z-index: 10;
box-shadow: 0px 0px 0px 2000px white;
}
.text
{
z-index: 4;
position: sticky;
width: 500px;
height: 300px;
}
<html>
<body>
<div class="page">
<div class="parent">
<div style="margin-top: 500px;"></div>
<div class="screen"></div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt fugit rerum nostrum eius! Optio, alias obcaecati minus laborum, officia quas eius quisquam a, voluptates ratione porro labore rem sapiente adipisci velit. Nobis reprehenderit, eligendi accusantium provident asperiores rem maiores inventore rerum, impedit deleniti at minus commodi esse natus voluptas cupiditate, neque dolorem libero labore repudiandae sint eius blanditiis. Consectetur repudiandae accusantium ipsum at voluptatum eum. Repellat voluptate quo porro modi repellendus, dicta nam! Eligendi dolor porro officiis blanditiis dolore facilis eveniet dolorum, inventore aspernatur cumque nemo? Velit dolore, autem minus culpa aperiam deserunt dolorum quis sit vel at porro nostrum!</div>
<div style="margin-bottom: 500px;"></div>
</div>
</div>
</body>
</html>
update 1 :
after some tinkering around i figured out what they were doing, basicaly it is to have a box centered, have it have a z index superior to the text, and then somehow hide anything outside its border but without using overflow hidden, in my case im using box shadow.
its doing what i wanted, but i somehow dont feel like this hack im doing is the right thing to do.
Related
How can I make the green background to cover all the .section class?
I have this structure:
section // one section will have one container
->container // one container can have multiple elements
->elements // the background class set here should override the section
relation everywhere and I would like to define a "background" element that covers the whole section.
Note:
I am getting the data like(section/container/elements) this and it is not going to change.
There is possible to have multiple sections each with it's own background.
.section {
width: 100%;
background-color: yellow;
}
.container {
height: 300px;
padding: 30px;
margin: 100px;
background-color: red;
}
.background {
width: 100%;
height: 100%;
}
.red {
background: red;
}
.green {
background: green;
}
<div class="section">
<div class="container">
<div class="background green" />
<div>
some content
</div>
</div>
</div>
Link to jsfiddle
you Should style give tag section
background-color: green;
You could set the position of .section to relative, and set the position of .green to absolute.
Now the position, width & height will use .section as reference.
Then you could set these properties freely.
here is the code:
.section{
position: relative;
}
.green {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
and then you may have to adjust their z-index
.green {
z-index: -1;
}
.section {
z-index: 0;
}
absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. MDN
One approach, with explanatory comments in the code, is as below:
/* simple reset to ensure no browser-default padding/margin exists,
and forces all element-size calculations to include border-width
and padding inside the defined width: */
*,::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.section {
/* all values here are purely aesthetic, adjust to your own
requirements: */
border: 2px solid #000;
height: 80vmin;
width: 80vmin;
margin-block: 1em;
margin-inline: auto;
}
.container {
/* here we use grid layout on the .container element(s): */
display: grid;
/* we specify one grid-column and one grid-row, each of which
take 100% of the available space: */
grid-template-columns: 1fr;
grid-template-rows: 1fr;
/* sizing the grid to be 100% of the parent's width/height: */
width: 100%;
height: 100%;
}
/* all <div> elements that are children of the .container: */
.container > div {
/* are placed in the first grid-column and first grid-row: */
grid-column: 1;
grid-row: 1;
/* specifying a max-height and max-width of 100% to address
potential overflow; obviusly adjust to your requirements: */
max-height: 100%;
max-width: 100%;
}
/* styling the element that will hold the contents (so far as your
demo shows): */
.container > div:last-child {
/* hiding overflow on x-axis: */
overflow-x: hidden;
/* allowing scrolling on the y-axis to see
overflowing content: */
overflow-y: scroll;
/* defining some white-space between the element edges and contents
within: */
padding: 0.5em;
}
.blue {
background-color: hsl(180 65% 81% / 0.5);
}
.green {
background-color: hsl(120 93% 79% / 0.5);
}
.yellow {
background-color: hsl(60 100% 50% / 0.5);
}
<div class="section">
<div class="container">
<div class="background blue" />
<div>
Some very short content
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background green" />
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat corporis hic sunt nam perferendis assumenda asperiores nobis quae consequatur aut ut quidem id, optio consequuntur ipsa labore consectetur nihil incidunt.</p>
<p>Minima quibusdam hic culpa, ea porro vitae asperiores! Vitae odit, delectus nesciunt asperiores maxime. Voluptatum velit repellendus in. Impedit laudantium asperiores nostrum neque laboriosam eius libero fugiat itaque inventore nulla?</p>
<p>Laboriosam quod, facilis ratione quas consequatur quis quisquam vel eius velit eveniet, excepturi voluptatem ea dicta quam eaque praesentium sequi illum, optio animi! Libero minima iste, maiores temporibus reiciendis repellendus.</p>
<p>Blanditiis reiciendis eveniet perspiciatis excepturi, nulla eum, rem atque. Perspiciatis quae sed autem officiis error, earum officia, nulla quod, velit deleniti pariatur. Obcaecati inventore, in adipisci eveniet, expedita a quaerat.</p>
<p>Quaerat labore vitae iure expedita eaque nostrum distinctio et, atque velit quisquam corporis animi, aut voluptatem itaque odio ipsum. Iusto asperiores eius at quos totam voluptatum, ratione voluptate cum quas.</p>
<p>Sed minima aliquid voluptatum minus dolores, iusto, ducimus doloribus! Aliquam quae, atque! Iusto nobis alias magnam minima, impedit iste illo iure illum doloremque debitis! Ipsa assumenda soluta fugiat ut esse.</p>
<p>Sint voluptatum suscipit laborum, aliquid eveniet odit blanditiis corporis voluptatibus, rem consectetur quam quidem saepe, doloremque, sit nihil rerum voluptas deleniti a expedita quo quod beatae modi. Incidunt, aliquid. Ea.</p>
<p>Minus, dicta sed maiores amet necessitatibus eaque magnam asperiores, aperiam, qui earum numquam sequi eius provident officiis. Illum fuga earum architecto nesciunt ut beatae mollitia quod sunt nulla. Ipsum, modi?</p>
<p>Eligendi, officiis maxime cupiditate consectetur voluptates est ullam odio, porro sint cum suscipit rerum nisi quibusdam non enim repudiandae facere fugiat repellendus possimus, sequi excepturi culpa iusto. Velit, sunt deleniti!</p>
<p>Ipsa deserunt dolorum molestias reiciendis. Ad dolorum eius suscipit, sapiente laboriosam dolor sequi, accusamus id consequuntur modi aliquid, architecto fuga illum non voluptatum quod. Molestiae deserunt maxime suscipit tenetur, tempora.</p>
<p>Id non fugit in vitae. Fuga voluptates sapiente, impedit atque, quasi, consequatur autem sunt dignissimos unde nam quam! Officiis quos, distinctio facilis illum explicabo incidunt quia pariatur minima, enim at.</p>
<p>Commodi consectetur repellendus ad assumenda eius voluptatibus tempora dolor et possimus quaerat aperiam nesciunt qui optio, sapiente ab libero iste, recusandae, suscipit obcaecati accusamus perferendis minus molestias. Nisi, inventore, explicabo?</p>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background yellow" />
<div>
Some very short content
</div>
</div>
</div>
JS Fiddle demo.
References:
box-sizing.
CSS Pseudo-elements.
display.
grid-column.
grid-row.
grid-template-columns.
grid-template-rows.
hsl().
:last-child.
margin.
margin-inline.
margin-block.
max-height.
max-width.
overflow.
overflow-x.
overflow-y.
padding.
vmin.
width.
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
I have a container with lots of content and hence I have set overflow: auto; to make it scrolling.
I also need a button in the bottom-right corner of this container at a fixed position (similar to a FAB button in Material Design).
The button is nicely placed in the bottom-right of the container. Unfortunately when I scroll the content, the button moves with it. My understanding of absolute positioning is that it will position the element relative to its parent (with position: relative;). So why is this button moving? What's the right way to fix it to the parent?
The expected behavior is that the button stays in the bottom-right corner regardless of the scroll position. For an example, see this page and search for the phrase "Animation of toolbar off-screen during scrolling".
Note that I am looking to make this work with absolute positioning, not fixed positioning. The button should be in bottom-right corner of its container, not matter how deeply the container is nested in the browser window.
* {
box-sizing: border-box;
}
.container {
position: relative;
overflow: auto;
height: 256px;
width: 256px;
margin-right: 16px;
border: solid 1px red;
padding: 4px;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
background-color: blue;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
<Button class="fab">
Ok
</Button>
</div>
Please see my JSFiddle here
There are many ways of achieving this, but I would prefer wrapping the .container with a .container-parent of the same height and width, and position: relative. This gives you a non-scrolling element to position the .fab button against.
<div class="container-parent">
<div class="container">
Lorem ipsum dolor sit amet...
</div>
<Button class="fab">
Ok
</Button>
</div>
With CSS:
.container-parent {
position: relative;
height: 256px;
width: 256px;
}
.fab {
position: absolute;
bottom: 20px;
right: 20px;
}
Here's the fiddle: http://jsfiddle.net/t702Lknz/4/
Alternatively, you could use your original markup, with .fab having a fixed position. The CSS would be like:
.fab {
position: fixed;
top: 225px;
left: 190px;
}
Here's the fiddle for that: http://jsfiddle.net/t702Lknz/3/
You can do this by adding a wrapper div for the text. The wrapper div will its width and height set to 100% and overflow set to auto, so it will have the scroll box and your FAB can be positioned within the outer div like so:
* {
box-sizing: border-box;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
float: left;
margin-right: 16px;
}
.text-wrapper {
overflow: auto;
height: 100%;
width: 100%
}
<div class="container">
<div class="text-wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
<Button class="fab">
Ok
</Button>
</div>
I finally figured out how to do this. Since only the text should scroll, it should be inside its own scrolling container. This makes the button latch on to its parent without being affected by the scrolling. Here's the final code.
* { box-sizing: border-box; }
.container {
/* keep the add button in a fixed location relative to this container */
position: relative;
display: flex;
flexDirection: column;
height: 200px;
width: 200px;
margin-right: 16px;
border: solid 1px red;
padding: 4px;
}
.text-container {
/* ensure that only the text scrolls, not the button */
flex: 1;
overflow: auto;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
background-color: blue;
}
<div class="container">
<div class="text-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
<Button class="fab">
Ok
</Button>
</div>
How can I make a div to stay on the middle of the page when scrolling?
I have something like this so far: https://jsfiddle.net/7wqk9fp0/2/
#D1{
width: 500px;
position: fixed;
margin: auto;
top: 50%;
left: 0;
background-color: red;
bottom: 0;
right: 0;
}
The problem is that if the content of the div is bigger than the height of the container it won't be visible on the page. Also, how to make the height to match the content size?
Try this: https://jsfiddle.net/7wqk9fp0/5/
I use modern flex properties.
iOS doesn't support it yet, so for better compatibility you can extend #overlay to:
#overlay {
/* iOS */
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
position: fixed;
align-items: center;
justify-content: center;
display: flex;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
You can achieve this by using a helper container
HTML
<div id="helper-container">
<div id="centered-element">
<div class="content">
The content goes here...
</div>
</div>
</div>
CSS
#helper-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
display: table;
text-align: center;
}
#centered-element {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#centered-element .content {
display: inline-block;
width: 300px;
max-height: 400px;
background: gray;
overflow-y: scroll;
}
JSFiddle: http://jsfiddle.net/LeoAref/sjn3deLw/
I use a little trick that involves inline-block elements in a container.
It's basicly a container that spans 100% of the pages height with a :before psuedo element that also has 100% height, vertical-align: middle and display: inline-block as essential properties.
After setting up the psuedo element all you have to do is create children within that you want to center horizontally or vertically.
These children need to be display: inline-block and vertical-align: middle atleast and their positioning has to not break the flow ofcourse ;)
It's a pretty neat solution and boils down to the same one as #leoAref except this technique doesn't use tables and the nesting level is reduced by 1 thanks to the psuedo element.
Fiddle here
The downsides to this technique is that the containing element must have a height that equals 100% of the page height otherwise the :before element will not span 100% height and the effect won't work. Setting properties as min-height or max-height aren't specific enough and won't work for the child either.
This means that every parent of the container needs to have a height of 100% defined for this to work.
HTML
<div class="container">
<div class="centered">
<p>This is my content</p>
<p>This is more content</p>
</div>
<div class="centered">
<p>This is my content</p>
<p>This is more content</p>
<p>This is my content</p>
<p>This is more content</p>
<p>This is even more content</p>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.container:before {
position: relative;
height: 100%;
vertical-align: middle;
width: 0;
display: inline-block;
font-size: 0;
content: " ";
}
.centered {
box-sizing: border-box; /*not required*/
min-width: 40%;
min-height: 30px;
padding: 10px;
display: inline-block;
vertical-align: middle;
background: #ccc;
}
This is probably not what OP wanted but this question comes up first in google when you search for "sicky div in the middle" so someone might find it useful.
I wanted to have "sticky" div in the middle of another div so when user scrolls page then it's still visible. The classic use case is showing loading animation that tells that some part of page is getting data. For example you might have big long list of items, user click button to get more data and you want to have sticky loader on this list that is always visible, when the list is visible.
You can simply set the top property to 50% and it should stick element in the middle of nearest scrolling container (it's often just browser window).
position: sticky;
top: 50%;
You can also use calc to center the element exactly if you know the element size.
position: sticky;
width: 60px;
height: 60px;
border: solid black;
top: calc(50% - 30px);
Here are some examples:
document
.getElementById("showLoaderOverlay")
.addEventListener("click", function() {
document
.getElementsByClassName("second-example__div1-inside-overlay")[0]
.classList.remove("hidden");
});
document
.getElementById("hideLoaderOverlay")
.addEventListener("click", function() {
document
.getElementsByClassName("second-example__div1-inside-overlay")[0]
.classList.add("hidden");
});
.div1 {
width: 200px;
height: 500px;
background-color: yellow;
}
.div2 {
width: 200px;
height: 800px;
background-color: orange;
}
.div2inside {
background-color: red;
position: sticky;
top: 50%;
}
.div3 {
width: 200px;
height: 1000px;
background-color: pink;
}
.second-example__div1 {
position: relative;
z-index: 0;
}
.second-example__div1 {
background-color: rebeccapurple;
width: 500px;
}
.second-example__div1-inside-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
}
.second-example__div1-inside-loader {
position: sticky;
width: 100px;
height: 100px;
border: solid black;
top: calc(50% - 50px);
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
<html>
<div class="div1">div1</div>
<div class="div2">
div2
<div class="div2inside">
inside div 2
<br> sticky in the middle of page
</div>
</div>
<div class="div3">div3</div>
<h2>Other example</h2>
<button id="showLoaderOverlay">Click me and scroll</button>
<div class="second-example__div1">
<div class="second-example__div1-inside-overlay hidden">
<div class="second-example__div1-inside-loader">
loading...
</div>
</div>
<ul>
<li> very</li>
<li> big</li>
<li> list</li>
<li> of</li>
<li> some</li>
<li> items</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quod.</li>
<li>Unde sed similique in laudantium doloribus obcaecati maxime debitis maiores?</li>
<li>Nisi architecto laborum ab et ducimus non nemo tempore minima.</li>
<li>Provident doloremque recusandae consectetur excepturi minus magnam corporis nemo dolorem!</li>
<li>Suscipit facilis aliquam dignissimos vel nesciunt vitae, temporibus recusandae ipsam!</li>
<li>Iste corporis ipsam in iure fuga beatae rerum expedita explicabo.</li>
<li>Pariatur tenetur ducimus maiores, excepturi est cumque accusantium vel quia!</li>
<li>Alias dolorem illum quisquam nihil quaerat quasi exercitationem, tenetur repudiandae!</li>
<li>Nemo omnis enim officia incidunt consequuntur. Nesciunt illo fuga quidem?</li>
<li>Sint fuga voluptates impedit omnis eius iusto, est assumenda at.</li>
<li>Maiores explicabo velit facere repellat quae eveniet commodi similique aliquid!</li>
<li>Provident saepe nostrum sit accusantium aspernatur eaque labore, asperiores ab!</li>
<li>Veniam, quo similique accusantium cumque quasi sed officia minus ratione?</li>
<li>Cupiditate ratione tempore magni quisquam a dolore eius aliquam itaque!</li>
<li>Quam tenetur, nisi repellendus a harum sed molestias eius mollitia?</li>
<li>Accusamus ipsum porro nobis natus quod delectus blanditiis cumque totam?</li>
<li>Deleniti quia commodi porro reprehenderit voluptates cumque. Amet, minus modi.</li>
<li>Facere beatae totam ut eaque aliquid laborum, tempora quo natus?</li>
<li>Cumque architecto rem illo non itaque dolorum dolorem sint magnam?</li>
<li>Necessitatibus dicta beatae ducimus ex dolores odio molestiae porro laboriosam.</li>
<li>Alias illum iusto praesentium vitae recusandae quo, magnam error cum.</li>
<li>Facilis, aliquam maiores soluta asperiores maxime aperiam distinctio alias assumenda?</li>
<li>Fugit autem, corporis quasi cum cumque eos sequi molestiae quibusdam.</li>
<li>Quisquam eveniet reiciendis cumque odio deleniti iusto nihil ratione soluta.</li>
<li>Dignissimos recusandae quasi ipsa? Sint tempora ea delectus ullam suscipit.</li>
<li>Repudiandae dignissimos similique quos, quaerat necessitatibus minus magnam quo commodi?</li>
<li>Molestiae rem nemo itaque obcaecati eveniet cupiditate fugit consequuntur quibusdam.</li>
<li>Aperiam iusto, labore asperiores dolores perferendis fugiat veritatis corrupti quis!</li>
<li>Maiores numquam doloribus animi veritatis molestias nam voluptates fugiat voluptatibus.</li>
<li>Fuga culpa minus nulla ex totam maxime voluptatem, perferendis labore.</li>
<li>Dolore omnis in ipsa laboriosam dicta obcaecati fugit unde. Necessitatibus.</li>
<li>Soluta voluptatem voluptas ullam cum ipsum repudiandae cupiditate debitis aliquam?</li>
<li>Tempora molestias vitae adipisci id, nam voluptatibus neque perspiciatis repudiandae!</li>
<li>Quasi iste dolorum expedita eos eaque soluta dicta ipsam quidem!</li>
<li>Repudiandae delectus minus quas odit est nisi iusto quo atque?</li>
<li>Voluptatibus eius expedita asperiores suscipit a rerum quis odio culpa.</li>
<li>Consectetur dolores doloribus, tempora dolorem nemo voluptatibus! Amet, expedita nulla.</li>
<li>Rem non aperiam porro eveniet, ex saepe voluptate molestiae. Ea!</li>
<li>Impedit, veniam quasi beatae quaerat cupiditate hic soluta. Odio, nam!</li>
<li>Ut non obcaecati voluptate rerum culpa aperiam! Obcaecati, voluptatibus accusamus.</li>
</ul>
</div>
<button id="hideLoaderOverlay">Hide loader</button>
<div class="div3">div3</div>
<html>
I have a block with visible text and hidden. After hidden text became visible, main block will change size. What is the proper way to animate this re-sizing? Is it possible to use pure css solution for this?
.wrapper{
padding: 10px}
.common{
border: 1px solid #ccc;
width: 300px;
margin: 0 auto;
padding: 10px;
-moz-transition: max-height 2s;
}
p.foo{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="common">
<button onclick="$('p.foo').toggle()">Click me</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
</div>
</div>
size of block part with hidden text is always the same and can be known
size of block part with visible is unknown
you can't animate with display: none; to display: block; but you can animate a height value if you know the new height target value already - you can set the hidden element to 0 with overflow: hidden; so nothing of the hidden element will be seen before the click element and if you prefer to make the animate with CSS3 so you can use a new class for the new height value and use the .toggleClass() JQuery function.
i recommend you not to use it as an inline...
HTML & JQuery:
<button onclick="$('p.foo').toggleClass('show')">Click me</button>
CSS:
p.foo
{
height: 0;
overflow: hidden;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
p.foo.show
{
height: 144px;
}
fiddle: http://jsfiddle.net/coyxhprp/