I'm trying to create a div which opens up on the center of the page and also blurs out everything behind the div. It should not blur the content of the div.
Most answers on this questions are the suggestion of using a background image.
The background should not be an image but whatever is behind at the moment the div is opened. Is there no attribute which blurs underlying content or an if statement I can use?
What you are looking for is to wrap the page contents with all else except your modal, and adding the class .blur from my attached code.
The modal should not be a child of the blurrable content therefore, when you open modal and add blur, you achieve the desired effect
.blur {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
padding: 40px;
background: rgba(0,0,0,0.4);
filter: blur(5px);
}
.myModal {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 150px;
padding: 40px;
transform: translate(-50%, -50%);
background: beige;
}
<body>
<div class="blur">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor congue enim a mattis. Etiam cursus a nisi quis feugiat. Duis pellentesque pharetra neque, at euismod augue bibendum vel. Mauris ornare mi placerat sapien facilisis dictum. Nam varius metus quis ultrices ultrices. Quisque gravida rhoncus turpis in viverra. Etiam sit amet orci malesuada magna vehicula interdum. Sed tellus ante, facilisis vel purus vitae, sodales mollis justo. Nullam vel libero sed diam luctus auctor ut ultricies tortor. Fusce porttitor volutpat venenatis. Curabitur a blandit erat. Duis mattis ornare nisl. Donec vestibulum quam sed consequat mollis. In eget aliquet metus. Sed imperdiet eros sit amet ullamcorper malesuada.
</p><p>
Fusce euismod sem a erat molestie, non mattis lorem dapibus. Donec tincidunt odio nec eleifend accumsan. Vestibulum quis justo sit amet lacus vehicula finibus nec in massa. Quisque ut luctus lacus. Proin eu elit laoreet, egestas neque at, tempus magna. Sed ac felis lacinia, luctus est at, iaculis mauris. Donec sit amet luctus lectus, nec cursus felis. Pellentesque pretium augue dui, tempor convallis dui placerat id. Donec vitae ex erat. Suspendisse non tincidunt ante. Vestibulum a risus vitae tortor vulputate placerat. Pellentesque pharetra bibendum lacus, in euismod dolor tempus eget. Donec imperdiet nisi sit amet mauris scelerisque laoreet. Pellentesque aliquet venenatis interdum. Aenean in augue diam.
</p><p>
Nullam tempus nec arcu vitae rutrum. Vivamus ipsum felis, finibus sit amet mauris ac, tempus dictum mi. Integer sollicitudin sollicitudin interdum. Nam semper sit amet felis eu viverra. Proin condimentum ante risus, at hendrerit urna elementum ac. Curabitur elementum, erat et sodales lobortis, dui tellus molestie urna, a molestie elit lorem at arcu. Ut nulla dui, vulputate ac ipsum sit amet, dignissim fringilla velit. Donec dignissim pretium dignissim. Nulla pulvinar faucibus velit. Ut commodo maximus velit, a hendrerit leo eleifend eget. Donec sed vestibulum diam, quis rhoncus tellus. Nunc nec congue orci, non semper nibh. Vivamus nec lorem lorem. Donec interdum egestas magna, non imperdiet nibh placerat ut.
</p><p>
Donec lacinia pretium imperdiet. Sed elementum pulvinar maximus. Nullam tempor mattis dapibus. Maecenas vitae erat lobortis, luctus est vel, finibus enim. Pellentesque varius feugiat volutpat. Ut sit amet consectetur elit, at mollis leo. Aenean et commodo libero. Curabitur ac elit lorem. Cras eget quam pretium, porta nisi at, sollicitudin est. Donec in mi vitae urna dignissim hendrerit. Mauris euismod nibh et risus blandit blandit. Suspendisse vitae varius nisi. Vestibulum sem lorem, dictum in ultricies ac, tincidunt eu ex. Fusce sed iaculis mi. Sed eu enim convallis, interdum est eu, mattis risus.
</p><p>
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</p>
</div>
<div class="myModal">
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</div>
</body>
Or can also be seen on CodePen https://codepen.io/ClayC90/pen/KexqLG
Although the Modal solution offered is better, here's a simplified solution, using jquery toggleClass function.
$('#first').click(function(){
$('#first').toggleClass("open");
$('#second').toggleClass("open");
})
body{
position:relative;
height:500px;
width:500px;
z-index: -2;
}
#first{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:blue;
filter: blur(6px);
z-index:-1;
}
#second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
}
#first.open{
filter: blur(0px);
}
#second.open{
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div class="open" id="first"></div>
<div class="open" id="second">
Not blurred
</div>
</body>
Related
I am trying to make an element(social links) 'fixed' inside of a container div(blog post) that varies in height and doesn't continue past the container. So relative to the container div, not the window itself. If the Footer/Header are 500px in height, the social links span can overflow the blog container div. I would like it to snap to the top or bottom of the container div, only scrolling within.
example: https://jsfiddle.net/j8ayod1v/6/
<header></header>
<div class="blog-container">
<span class="social-links"></span>
</div>
<footer></footer>
You could try setting the position as sticky or absolute on the element you want to remain "fixed" within the grey container depending on the behavior you're looking for.
I added both below:
header {
background: red;
height: 100px;
}
footer {
background: red;
height: 300px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
top: 0;
}
.sticky {
position: -webkit-sticky;
position: sticky;
float: left;
}
.absolute {
position: absolute;
right: 0;
}
<header>
</header>
<article>
<span class="sticky">Fixed (sticky)</span>
<span class="absolute">Fixed (absolute)</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>
Is this what you need?
header {
background: red;
height: 500px;
}
footer {
background: red;
height: 500px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
position: sticky;
top:0;
}
<header>
</header>
<article>
<span>Fixed</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>
I've trying to place a modal overlay over a scrollable parent div with fixed width and height but I'm having trouble getting this to work. Here is the CSS that I'm using:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
overflow-y: scroll;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
}
.modal {
width: 200px;
height: 100px;
background: white;
}
I have the following jsfiddle which illustrates the issue:
https://jsfiddle.net/8wgpt0d7/
You can see from the fiddle as you scroll towards the bottom the modal overlay no longer covers the background content and I want to get the modal to cover the content but I'm not sure how.
Any tips or help would be much appreciated!
Try this:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
overflow-y: scroll;
background: rgba(0,0,0,0.55);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right:0;
width:100%;
}
.modal {
position: absolute; /* effectively fixed */
top: 50px;
left: 20px;
right:20px;
bottom:0;
background-color: #FFF;
height: 100vh;
max-height:100px;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>
I have a less than sophisticated but very dynamic answer? https://jsfiddle.net/f2k7z4u0/
JQUERY
if($('.overlay').prop('display') != 'none'){
var $parentHeight = $('.parent')[0].scrollHeight;
$('.overlay').css('height', $parentHeight);
}
UPDATED CSS (only for .modal)
.modal {
width: 200px;
height: 100px;
background: white;
position: absolute;
top: 40px;
}
var scrollMaxValue = $('.child').prop('scrollHeight');
var currentPosition = 0;
$('.overlay').mousewheel(function(e,d) {
e.preventDefault();
if ((d > 0) && (currentPosition > 100)){
currentPosition = currentPosition - (10 * 10)
}
else if((d < 0) &&(currentPosition < scrollMaxValue)){
currentPosition = currentPosition + (10 * 10)
}
$('.child').scrollTop(currentPosition);
});
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child{
width:100%;
height:100%;
overflow-y: auto;
}
.overlay{
position: absolute;
width:333px;
height:100%;
top:0;
left:0;
background: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
left:20%;
top:25%;
margin:0 auto;
width: 200px;
height: 100px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>
So I'm working on a footer for a site that has a button which expands the footer to show/hide some more information (so regular footer on the bottom, expanded section above that). I'm just using a basic slideToggle now, but the problem is this scrolls the screen away from the bottom position (where it was when the toggle is clicked) so it gives the appearance of it sliding down rather than up. Is there a way to force the scroll position to stick to the bottom so the content is sliding in and everything is visible?
Thanks in advance everyone, this has been driving me nuts and I'm feeling kind of stuck!
Some more specifics -
HTML:
<div>
<p>Random Content</p>
<footer>
<div class="expand-me">
<p>Extra Info Here</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
CSS:
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
JS:
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle();
});
https://codepen.io/anon/pen/gvmzwB
i have done this by forcing window to scroll to bottom of the page.
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('#mydiv').height();
if($(this).is(':visible')){
$(document).scrollTop($(document).height()-$('.expand-me').height());
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
or like this one
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('.expand').height();
if($('.expand-me').is(':visible')){
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nula tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
I have two elements, one positioned on the left and one on the right in absolute. I would like the right element, When it will disappear ((Exit the window), that it remains fixed (without using position: fixed).
I would like the value "top" to update but I can not do it and I can not find anything on the internet.
div.container{
position: relative;
}
article{
width: 50%;
margin-top: 50px;
}
aside{
position: absolute;
right: 0;
top: 0;
color: white;
height: 400px;
width: 300px;
background: blue;
}
<div class="container">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dolor elementum, mollis ipsum eget, fermentum odio. Nunc pretium, dui ut posuere tristique, lacus lacus vestibulum dui, eu finibus dui mi quis felis. Sed nibh odio, ultrices vel dui eget, eleifend efficitur leo. Suspendisse dui metus, maximus quis lacus in, condimentum viverra mauris. Nunc finibus dui felis, sed egestas purus posuere et. Aliquam erat volutpat. Quisque luctus, erat vitae fermentum sodales, nisi diam congue augue, nec ultrices magna eros non mi. Nam semper sollicitudin quam, sit amet porta purus tristique vitae. Suspendisse suscipit, ipsum vel mattis pretium, urna erat imperdiet metus, at dictum est metus quis nisl. Duis rhoncus leo sed erat pulvinar, sit amet auctor est placerat. Duis tincidunt velit dolor, quis luctus felis venenatis quis. Sed odio urna, malesuada in mauris sit amet, lobortis hendrerit turpis. In fringilla metus diam, ut malesuada augue elementum ut. Donec id pharetra elit. Maecenas maximus vitae magna nec gravida. Morbi ac pellentesque mi.
Sed tristique fermentum metus in finibus. Sed commodo ultricies justo eu gravida. Nulla facilisi. Vestibulum mattis tortor sem, quis egestas augue tempus at. Curabitur molestie ut dui ac pretium. Donec vehicula enim ut quam ullamcorper sollicitudin. Donec pretium tristique sapien, id maximus nulla fermentum nec. Sed aliquet consectetur nisi, ut finibus erat vestibulum sit amet. Ut suscipit condimentum nisi.
Aenean eleifend tempus aliquam. Maecenas a fringilla arcu. Nunc leo mi, venenatis sit amet libero luctus, vulputate luctus erat. Fusce ex felis, auctor consequat imperdiet quis, finibus vel est. Morbi vitae pretium felis, id vulputate justo. Phasellus nunc enim, vestibulum ac velit in, finibus tincidunt diam. Cras posuere in metus quis volutpat. Cras posuere metus vitae turpis placerat laoreet. Quisque dignissim quam ut nisl euismod viverra. Aenean sed augue sed lectus congue accumsan. Quisque vel pellentesque enim, ut tincidunt tortor. Vestibulum vel ex nec velit facilisis posuere eget a elit. Phasellus non vulputate turpis, vel venenatis odio.
</p>
</article>
<aside>
My Aside
</aside>
</div>
FIDDLE
Thank you very much !
use position: fixed instead of absolute
aside{
position: fixed;
right: 0;
top: 0;
color: white;
height: 400px;
width: 300px;
background: blue;
}
https://jsfiddle.net/puxf496d/1/
I'm not sure I understand your question. You want your aside to stand in place when scrolling, right? I don't know why you want to do it like that, but you can use Javascript to increment the top property of your aside.
An example using JQuery.
$(window).scroll(function(){
var top = $(document).scrollTop();
$('.container aside').css('top',top);
});
I am trying to set vertical scroll bar to the div2 to replace the default browser vertical scroll bar.
.div1 {
height: 200px;
}
.div2 {
overflow-y: auto;
height: 500px;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
With the above style, document is left with blank space at the bottom since height of div2 is not exactly occupying the entire document height. How do I fix that?
The steps to achieve what you want are:
Set both html's and body's margin and padding to 0.
Set the header's height to the fixed height you want: in your case, 200px.
Set the .main's height to 100% of the viewport less the header height: calc(100vh - 200px).
Set the .main's overflow-y to auto.
Create a section into the .main, and set the margin you want to show your content (optional).
And then, we're done! Take a look at the example below (if you want to test it in a better way, click on the Full Page button, and then play with your window's resizing etc):
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
}
header {
height: 120px;
background-color: blue;
}
div.main {
height: calc(100vh - 120px);
background-color: red;
overflow-y: auto;
}
div.main > section {
margin: 10px;
}
div.main > div > p {
text-align: justify;
}
<header>
</header>
<div class="main">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim sit amet diam bibendum, ut rhoncus est molestie. Ut vulputate egestas mauris, eget ultricies tellus aliquet nec. Mauris nec neque et lorem volutpat feugiat eget sit amet
erat. Nullam luctus ultricies augue ut cursus. Mauris pulvinar velit at venenatis semper. Quisque non dolor ante. Nulla tempus id turpis et placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum justo elit, rhoncus vitae
massa non, condimentum ornare quam. Duis sit amet orci a risus mollis gravida et quis augue. Donec sed felis ante. Vestibulum rutrum non dolor quis finibus. Vestibulum ultricies leo eget mi elementum, vel vestibulum felis maximus. Donec congue lorem
vel ante mattis, eu luctus magna finibus. Donec sit amet dui quam.
</p>
<p>
In ullamcorper, nibh eget venenatis imperdiet, augue ante porttitor mauris, nec scelerisque tortor nisi eu arcu. Phasellus libero ligula, eleifend a lobortis in, cursus in tellus. Morbi volutpat, sem a dignissim venenatis, velit nulla vehicula sem, ut
fermentum augue eros sit amet nisi. Vivamus eget ex id turpis scelerisque lobortis sed sed arcu. Nulla facilisi. Curabitur hendrerit iaculis justo, at iaculis est facilisis sit amet. Donec sem tellus, posuere et metus id, consectetur vehicula sapien.
Ut eros quam, tempor vitae quam sed, efficitur faucibus sapien. Mauris varius velit orci, sit amet fermentum neque auctor ac. Nullam pretium sed urna et pellentesque.
</p>
<p>
Nunc id odio ligula. Sed ut dolor vitae sem fringilla condimentum. Sed venenatis lacus a magna egestas, nec volutpat quam ullamcorper. Maecenas volutpat eu magna nec ultrices. In egestas, risus id porta condimentum, odio urna ultricies mi, ut elementum
magna tortor quis eros. Sed a hendrerit felis. Curabitur id sem consectetur, luctus velit in, sollicitudin elit. Proin ac commodo tortor. Proin imperdiet id massa at sollicitudin. Pellentesque enim arcu, venenatis ut dictum et, ornare at tortor.
Donec et urna nec metus rhoncus auctor. Nunc id nisi nec sem condimentum vehicula a in arcu.
</p>
<p>
Proin eleifend sem massa, at auctor eros porta congue. Aliquam nec aliquet justo, at cursus ipsum. Cras justo leo, varius vel accumsan eget, sagittis sit amet lorem. Donec pulvinar ante ut efficitur eleifend. Duis tincidunt metus non nunc accumsan, vel
accumsan velit rhoncus. Nunc arcu magna, sollicitudin non urna in, pellentesque dignissim eros. Nam placerat sodales rutrum. Sed quis placerat leo. Nunc porttitor nisi nunc, in feugiat dolor accumsan nec. Aliquam gravida diam ac tempor sodales.
Ut in sapien gravida odio molestie vehicula sed vel nulla. Integer sed ipsum semper, auctor massa eget, viverra justo. Nullam mattis suscipit lorem vel mattis. Morbi non aliquet nunc. In hac habitasse platea dictumst.
</p>
<p>
Pellentesque dapibus sapien quis congue porta. Maecenas faucibus ex nisi, in varius risus imperdiet ac. Aliquam tristique egestas ligula, sed vestibulum lacus mollis vel. Nunc non ante ut quam placerat suscipit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In a viverra augue, a dignissim justo. Aliquam volutpat nibh ut tellus interdum suscipit. Praesent mi sem, mollis in libero vel, pretium accumsan ex. Nullam gravida diam quis semper faucibus. Nullam cursus felis dolor, sed egestas
ex lobortis et. Vivamus at maximus felis, vel posuere purus. Quisque pellentesque risus nec posuere suscipit. Aliquam eleifend tempus ante, vel vehicula nunc facilisis quis. Mauris lacinia, felis at ultrices luctus, lacus nisl molestie neque, et
varius urna velit at massa. Nulla facilisi.
</p>
</section>
</div>
I'm not absolutely sure what you're trying to do but try adding this to your css and see if it fixes it.
html, body { height: 100%; }
Try this. The border on div1 and div2 is just to show the height of the div. Feel free to remove it ;)
#container {
height: 100%;
position: absolute;
}
.div1 {
height: 200px;
position: relative;
border: 2px solid yellow;
}
.div2 {
overflow-y: auto;
position: relative;
height: 100%;
border: 2px solid red;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>