I am writing JQuery script to determine when an element of fixed height is filled by content equalling greater height, at which point I want it to create a new identical element for all of the overflowing content to flow into. I want it to do this automatically on repeat.
I have this down for the most part, but am experiencing a problem because of the "for each" loop I'm running on the child elements.
While the script effectively creates a new page once the first page has overflowed, and it successfully moves the overflowing content into the new page, it does this for each new child thereafter irregardless of the fact that the content height should be reset. The way I see it, I need to prompt the creation of the new page in the loop to transfer the current child element over into it. I tried escaping the loop with a "return false;" which breaks the entire script.
HTML:
<div id="page-container">
<div class="page">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla ipsum vitae neque fermentum, a sagittis magna lacinia. Nullam eget nibh nulla. Vivamus tellus lectus, ullamcorper sit amet diam eget, placerat gravida enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce condimentum risus sed nunc feugiat maximus. Sed tincidunt nisi velit, et hendrerit dolor suscipit eu. Aenean dui nulla, tempus eu posuere congue, iaculis eu sapien. Phasellus volutpat nisi dui, a malesuada justo posuere vitae. Sed dolor turpis, porta a libero sed, rutrum elementum augue. Proin diam nibh, gravida eget velit nec, tempor consectetur felis.</p>
<p>Aliquam interdum accumsan nisl eget ullamcorper. Morbi id ornare dui. Aliquam euismod efficitur magna ut vestibulum. Sed pellentesque metus vitae quam feugiat, eu ultricies ipsum tristique. Ut in diam quis nulla aliquam dictum. Aenean sapien leo, rutrum quis posuere quis, convallis sit amet nisi. Aenean ac pellentesque metus. Phasellus luctus sapien at massa interdum lacinia. Suspendisse lacus eros, luctus pellentesque diam a, tempor semper nunc. Vestibulum accumsan nec felis vitae finibus. In viverra aliquet est, eu semper tellus. Etiam interdum dignissim euismod. Curabitur iaculis tellus at semper suscipit. Quisque sed risus neque.</p>
<p>Phasellus tincidunt diam id finibus tempor. Pellentesque vel ultrices neque. Suspendisse potenti. Pellentesque eget gravida sapien. Pellentesque malesuada bibendum viverra. Phasellus at ante nec turpis placerat placerat. Pellentesque sed nisl ut eros finibus faucibus. Duis dignissim ut sapien eget faucibus. Mauris sem risus, consequat scelerisque dui quis, consectetur vestibulum nisi. Morbi nisl nisl, lobortis vel risus rhoncus, accumsan scelerisque nisi.</p>
<p>Maecenas odio arcu, aliquet in accumsan id, blandit vitae tortor. Nunc nec aliquet nisl. Nullam tempus turpis dolor, quis vestibulum tortor mollis vel. Sed sed ultrices ex. Curabitur accumsan arcu nec elit molestie tristique in quis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam varius sapien gravida finibus euismod. Mauris semper consectetur massa, ut sagittis arcu. Mauris suscipit lectus id dolor semper lacinia.</p>
<p>Nunc a arcu diam. Fusce at mauris molestie, tempor nulla sed, mollis odio. Cras commodo nibh a felis aliquet tempor. Donec vitae nisi ut leo tincidunt auctor. Nam eleifend non odio quis rutrum. Curabitur scelerisque orci vel felis accumsan finibus. Vivamus ut hendrerit diam, in blandit metus. Vestibulum mollis odio arcu, ac elementum leo iaculis sit amet. Vestibulum mollis mattis nunc molestie pulvinar. Etiam ante nibh, ullamcorper nec turpis id, pretium euismod nisi. Aliquam scelerisque, metus ac laoreet iaculis, nulla mauris tristique ligula, sed sagittis risus massa quis lectus. Maecenas nec nisl ullamcorper, vehicula dui et, hendrerit risus. Quisque volutpat urna imperdiet lobortis molestie. Quisque at dapibus quam. Etiam neque mi, bibendum sit amet facilisis a, ullamcorper a enim.</p>
<p>Cras quam massa, facilisis ut elementum vel, maximus ut augue. In sem odio, blandit eu urna eget, sollicitudin convallis eros. Praesent eget lorem nec lorem faucibus euismod. Phasellus ullamcorper tristique velit sed facilisis. Etiam et lectus fringilla, tristique urna sit amet, sagittis lacus. Phasellus at erat malesuada, imperdiet nunc vel, tempor mi. Vestibulum vulputate felis sed lectus fermentum dignissim. Quisque dictum posuere tincidunt. In sit amet ante sodales, iaculis ipsum sit amet, dignissim ex. In nec turpis leo. Donec iaculis pulvinar neque nec maximus.</p>
<p>Cras auctor posuere dolor. Quisque venenatis risus sit amet lacus viverra, vitae placerat sem scelerisque. Curabitur id pellentesque lacus. In mi eros, tincidunt nec est id, auctor elementum felis. Aenean varius elementum aliquam. Fusce vehicula ipsum eget enim tincidunt, id maximus felis condimentum. Suspendisse at dignissim enim, vitae viverra sem.</p>
<p>Vivamus vitae mi id mauris varius pretium. Mauris eu nibh nec eros varius placerat. Mauris ut nulla consectetur, egestas ante id, congue leo. Vestibulum sit amet ipsum ligula. Suspendisse sed dui sed ante tempor volutpat. Duis placerat, augue non sagittis ultrices, nibh arcu fringilla dolor, eu vestibulum mi lectus et quam. Sed euismod eget neque ut venenatis. Cras metus sem, malesuada id tristique vitae, aliquet et felis. Vivamus sed elementum tortor, eget cursus mi. Suspendisse dui est, feugiat vulputate velit ac, consectetur viverra mi. Aenean porttitor turpis leo, a convallis lacus tincidunt at. Pellentesque quam nulla, dictum id sem maximus, aliquet maximus lorem.</p>
<p>Mauris ut porttitor purus, a sagittis purus. Cras at mauris nec est aliquam malesuada ut at diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales vestibulum dui vitae eleifend. Proin a lacus id lacus pulvinar aliquet. Donec vel eros sem. Fusce pharetra tincidunt odio ac malesuada. Aliquam pellentesque purus non rhoncus fermentum. Integer ultrices id neque id congue. Quisque mollis non velit quis tincidunt. Pellentesque semper commodo massa, vitae dapibus leo feugiat vel. Duis sit amet dignissim nibh.</p>
<p>Curabitur vitae pharetra mi. Nullam id ligula sed orci cursus suscipit a ut erat. In non fermentum neque. Aenean quis luctus tellus, sit amet accumsan leo. Aenean vel libero rhoncus, cursus nisl non, maximus lorem. Aliquam facilisis leo leo. Maecenas semper nunc arcu, eu blandit ante posuere sed. Phasellus dapibus purus lacus, interdum dapibus est tristique vel. Mauris luctus est a orci ultricies, vel gravida diam porta. Donec fermentum vestibulum bibendum. Quisque pretium maximus sollicitudin. Praesent mollis neque nisl. Praesent dignissim porttitor commodo. Donec non sapien fringilla, iaculis ante sed, consectetur quam. Maecenas condimentum lorem leo, at varius nisi malesuada sit amet. Sed vehicula magna leo, id accumsan ex ultricies eget.</p>
</div>
</div>
CSS:
/* Fonts */
/** Garamond Cormorant (regular, italic, bold and bold italic) **/
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i');
/* General / boilerplate styles */
/** Page **/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 6.25%; }
body { margin: 0; }
/** Typography **/
body { font-family: 'Cormorant Garamond', serif; font-size: 16em /* 16px */; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
h1 { font-size: 4em; } h2 { font-size: 3.5em; } h3 { font-size: 3em; }
h4 { font-size: 2.5em; } h5 { font-size: 2em; } h6 { font-size: 1.5em; }
p { font-size: 1em; line-height: 1.5; }
.paragraph { text-indent: 2em; }
.center { text-align: center; }
.justify { text-align: justify; }
blockquote { margin: 1rem 4em 1rem 4em; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
html[lang="fr"] q { quotes: "\00ab" "\00bb"; }
cite { font-style: normal; }
cite:before { content: "\0020\2014\0020"; }
/** Media **/
figure { margin: 1em; text-align: center; }
#media (min-width: 750px) {
.inline-left { float: left; margin: 1em 1em 1em 0; }
.inline-right { float: right; margin: 1em 0 1em 1em; }
}
figure img { display: inline; max-width: 100%; margin: 0.5em 0; }
.greyscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.sepia { -webkit-filter: grayscale(100%); filter: sepia(100%); }
/* Thematic styles */
body {
padding: 1em;
background: url(https://images.freecreatives.com/wp-content/uploads/2016/02/Download-High-Quality-Wood-Background-Wallpaper-for-Your-Desktop.jpg);
background-repeat: repeat;
}
.page {
width: 600px;
height: 800px;
margin: 0 auto;
margin-bottom: 1em;
padding: 2em;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
background: #F8ECC2;
color: #0c0d0d;
overflow: hidden;
}
JQUERY:
// On document load...
$(document).ready(function() {
// For each page...
$('.page').each(function () {
// Get page height
var pageHeight = $(this).height();
// Initialize content height
var contentHeight = 0;
// For each element of the page...
$(this).children().each(function () {
// Add element height to overall content height
contentHeight += $(this).outerHeight();
// When the content height becomes greater than the page height...
if (contentHeight > pageHeight) {
// Append a new '.page' to the '#page-container'
$(this).parent().after('<div class="page"></div>');
// Append the current, overflowing element to the next page
$(this).appendTo($(this).parent().next($('.page')));
}
});
});
});
If any of this is unclear, the Codepen should clear it up nicely.
https://codepen.io/christophercostello/pen/yXPBaN
Whenever you are in a loop, return false to exit it
Your code is correct, there is no code to execute when returning false, so nothing happens.
$.each(array, function(idx, value){
if(condition){
return true; // this will go to the next iteration
}else {
return false; // this will exit the loop
}
});
If you are in a for loop, make the condition false or break.
for(i = 0; i < arr.length; i++){
if(condition){
break;
}else {
// do stuff
}
}
Related
My website has an onscroll fixed header at the top, but whenever I try to scroll it glitches out. When you try to scroll, it cuts off the top part of the text and seems to lurch into place. I'm trying to make it looks seamless, like this demo
Here's the code for my website. If I've missed anything let me know.
body {
margin: 0;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("menuBar");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
Use the CSS built-in position: sticky
body {
margin: 0;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar">MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>
I'd like to have on my HTML page a slider with an image as a handle.
On the internet, I found something for this purpose that simply says to change the CSS background property: background: url('image.png');... but this didn't work for me.
this is my slider setting:
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer;
}
So, do you know how to have an image as a handle? Thanks in advance,
Greg
body {
overflow-y: scroll;
}
body::-webkit-scrollbar {
background: black;
}
body::-webkit-scrollbar-thumb {
background: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg') no-repeat;
background-size: 50px 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in accumsan lectus, id lacinia ante. In consectetur, arcu in tempus tempor, ipsum nulla porta ipsum, id pulvinar felis ante at dolor. Nam hendrerit egestas tellus quis dignissim. Praesent dictum felis eu pulvinar dictum. Quisque non venenatis magna. Donec molestie quis massa sit amet lobortis. Nulla a dictum augue. Sed vestibulum venenatis libero, quis tincidunt turpis ultricies vitae. Ut eget suscipit magna. Praesent rutrum egestas odio, sit amet elementum eros vestibulum nec. Vestibulum id viverra odio.
Mauris lobortis tincidunt ipsum, non pulvinar massa molestie ut. Mauris pulvinar nibh in elit eleifend, eu tempor erat fringilla. Suspendisse aliquam congue metus vitae aliquam. Etiam finibus erat eget tellus volutpat bibendum. Pellentesque iaculis leo et tellus rhoncus commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris volutpat metus eu eros convallis hendrerit. Cras vitae rutrum quam. Vestibulum vitae consequat ex, non luctus nisi. Nam sollicitudin est vitae sapien finibus bibendum.
Phasellus consequat laoreet odio a placerat. Ut sagittis eget lorem non interdum. Fusce ligula purus, rhoncus quis sagittis vitae, bibendum in diam. Aenean fringilla rutrum nisl. In at dictum mi. Praesent tortor arcu, imperdiet nec finibus non, dignissim sit amet sapien. Praesent placerat, metus nec ultrices luctus, dui erat mattis velit, vel mollis nibh lorem non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur luctus nisl leo, ut efficitur purus tincidunt ultricies. Nullam pretium velit non ante tempus, vel fringilla augue porttitor. Morbi iaculis risus at tincidunt vehicula. Phasellus nec quam a magna faucibus porta. Etiam mollis ultrices sem vitae imperdiet. Morbi posuere nulla efficitur, suscipit ante ut, ullamcorper lectus.
Proin sit amet nisi at lacus viverra tristique. Quisque nec lacus quis lorem mollis mollis fringilla et ante. Morbi aliquam suscipit finibus. Nullam in odio congue, consequat eros eget, pellentesque mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse cursus nulla vel cursus consequat. Nunc porta rhoncus pellentesque. In blandit dui a vehicula molestie. Aliquam efficitur, risus id laoreet vehicula, purus orci aliquet massa, ut eleifend neque arcu vitae nibh. Duis posuere at metus at pulvinar. Phasellus venenatis eu leo nec scelerisque. Phasellus maximus non sem quis viverra. Aliquam scelerisque nunc ac massa ullamcorper, at euismod nisi iaculis. Maecenas interdum sed enim eget ultrices. Curabitur eget rutrum mi.
Aenean facilisis imperdiet elit, sit amet iaculis sem ornare eu. Fusce quis congue lorem, non cursus odio. Duis sodales elementum tellus sed volutpat. Mauris tincidunt massa et condimentum ultrices. Nulla blandit rhoncus elementum. Phasellus tincidunt turpis quam, imperdiet tincidunt eros gravida sit amet. Morbi in condimentum metus, in condimentum nulla. Aenean ac turpis mollis, rhoncus augue a, aliquet enim. Curabitur commodo tincidunt tellus id maximus. Cras dolor neque, gravida et dolor id, scelerisque laoreet diam. Donec rhoncus egestas est a pretium. Vivamus cursus congue felis, at auctor diam pharetra in. Suspendisse nec laoreet nunc. Morbi ut elementum ante.
</h3>
</body>
</html>
First thing I noticed that you got wrong in your code is that you first have to assign ::-webkit-scrollbar so you would be able to design all inner element of an scrollbar after.
NOTE: This will only work on Chrome/Safari because it's -webkit-.
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>
The code i got from this website: click here
But i would like to set this nav code at the bottom instead of the top. I also would like it to stick to the bottom of the mobile screen rather than it disappearing after scrolling. Thank you for all the help if you can offer it to me.
I have looked everywhere and this code is perfect. I don't know much about sticking the nav to the bottom or even this code. Its a little complected but i can understand most of it.
Please if you could provide a snippet or if in case you post the code please provide a little more detail on how to place it because i'll be completely lost if you since a small part of the code with no extra help of where it came from. If could if not thats fine i'll figure it out.
(function() {
'use strict';
var nav = document.querySelector('.fixed-nav');
if(!nav) return true;
var navHeight = 0,
navTop = 0,
scrollCurr = 0,
scrollPrev = 0,
scrollDiff = 0;
window.addEventListener('scroll', function() {
navHeight = nav.offsetHeight;
scrollCurr = window.pageYOffset;
scrollDiff = scrollPrev - scrollCurr;
navTop = parseInt(window.getComputedStyle(nav).getPropertyValue('top')) + scrollDiff;
// Scroll to top: fix navbar to top
if(scrollCurr <= 0)
nav.style.top = '0px';
// Scroll up: show navbar
else if(scrollDiff > 0)
nav.style.top = (navTop > 0 ? 0 : navTop) + 'px';
// Scroll down: hide navbar
else if(scrollDiff < 0) {
nav.style.top = (Math.abs(navTop) > navHeight ? - navHeight : navTop) + 'px';
}
// Note last scroll position
scrollPrev = scrollCurr;
});
}());
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
white-space: nowrap;
height: 50px;
box-sizing: border-box;
padding: 10px;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16),0px 3px 6px rgba(0,0,0,0.23);
}
.fixed-nav ul, .fixed-nav li {
display:inline;
}
.fixed-nav a {
text-decoration: none;
text-transform: uppercase;
padding: 17px 10px;
color: #333;
font-family: arial;
}
.fixed-nav a:hover {
background-color: #000;
color: #eee;
}
.fixed-nav ul {
padding:0;
}
.fixed-nav img {
vertical-align: middle;
}
main {margin-top:55px;}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<nav class="fixed-nav">
<img src="mf-logo.svg" height="30" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
<main>
<!-- Some dummy content so we can see the fixed navbar staying fixed when we scroll -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum dapibus erat eget sodales. Quisque at maximus tellus. Duis tristique mi magna, ut efficitur lectus porttitor non. Ut bibendum diam turpis, eget vehicula urna dignissim in. Vestibulum eget massa neque. Nulla facilisi. Pellentesque faucibus rutrum eros ut vestibulum. Proin ut nisl malesuada eros auctor viverra non et nibh. Phasellus a felis molestie, fermentum nunc ut, tincidunt felis. Nam quis fermentum velit. Fusce condimentum vehicula porttitor. Aliquam sagittis faucibus urna ac lacinia. Praesent id porta dolor. Donec a pulvinar dui, quis malesuada risus. Cras semper venenatis augue.</p>
<p>Nam molestie eget nulla sit amet hendrerit. Morbi vulputate commodo est, in elementum turpis luctus at. Integer velit urna, tincidunt in aliquam eget, pulvinar in odio. In pharetra sapien mauris, ac sagittis leo venenatis eget. Integer laoreet turpis ac sollicitudin placerat. Curabitur non aliquet massa. Morbi non volutpat enim. Etiam non placerat arcu. In non tellus tempus, consectetur leo ultrices, tincidunt eros. Cras euismod volutpat erat, eget rutrum orci vestibulum sit amet. Mauris eu dui purus. Aliquam condimentum varius nibh, eget consequat nibh commodo non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vestibulum risus purus, a accumsan massa semper sed. Fusce sit amet est suscipit, consectetur ex sit amet, congue sem.</p>
<p>Etiam blandit magna felis, ac iaculis purus auctor eget. Morbi eleifend, mi a fringilla cursus, dolor erat placerat magna, consectetur imperdiet turpis felis in ante. In ut velit ut eros venenatis consectetur in sed justo. Phasellus posuere, nulla sit amet iaculis cursus, enim mi tincidunt tellus, id auctor eros velit id massa. Suspendisse rutrum vel magna at gravida. Nulla commodo hendrerit lorem, sit amet volutpat massa tristique nec. In accumsan diam ac risus luctus varius. Etiam aliquet, quam eu efficitur eleifend, mi lacus tincidunt neque, at egestas lacus felis quis purus. Aenean lobortis nisi a finibus eleifend. Suspendisse euismod, sapien at viverra aliquam, mauris tortor blandit tortor, fringilla tempor eros urna vitae ligula. Aliquam erat volutpat.</p>
<p>Donec vulputate ex ut risus ullamcorper molestie. Proin interdum, augue ut gravida placerat, quam ipsum maximus neque, pretium semper tellus eros vitae leo. Donec eu eleifend metus. In et urna lacinia urna vulputate faucibus ullamcorper vel erat. Duis vehicula aliquet libero, non convallis erat hendrerit et. Proin ornare pretium pulvinar. Suspendisse potenti. Vestibulum varius magna id lectus finibus mattis. Quisque nulla eros, elementum a dictum quis, tempor et libero. Aenean sollicitudin tellus elit, at lobortis ex tempor ut. Maecenas ac tincidunt enim, vitae tempor nibh. Maecenas malesuada egestas orci, facilisis malesuada metus bibendum a. Aliquam erat volutpat.</p>
<p>Fusce tempor eu quam non rutrum. Donec at nibh erat. Integer congue nisl a aliquet porttitor. Aliquam luctus rutrum metus vitae iaculis. Maecenas rhoncus feugiat massa vel commodo. Aliquam dignissim consectetur lacinia. Quisque finibus nibh nec est lobortis hendrerit. Vivamus ut ex id metus pellentesque lacinia non id ligula. Maecenas non tortor lobortis, fringilla velit sed, lobortis leo. </p>
</main>
I see this sample:
link
If you do come down ... you see the sidebar on the right becomes fixed after a certain size ... you actually get down to almost everything.
How it was made an event the example?
With JQuery?
This is the link to my site
I tried to do something similar but incomplete
CODE JS:
$(window).scroll(function() {
var height = $(window).scrollTop();
console.log(height);
if(height > 700) {
//alert("test");
//after a certain size should be fixed ... what code should be here?
}
});
Did you have any idea as an example?
Can you help me solve this problem please?
Thanks in advance!
Here the example of not smooth scrolling of div.
(function($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 20;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 0);
});
})(jQuery);
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.group:after { content: ""; display: table; clear: both; }
body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }
.wrapper { width: 100%; max-width: 700px; padding: 3%; }
.content, .sidebar { float: left; }
.content { width: 68%; margin-right: 5%; }
.sidebar { width: 27%; }
.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
<div class="wrapper group">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod arcu ut diam maximus auctor. Sed malesuada maximus tellus, dignissim volutpat urna hendrerit at. Cras nisi turpis, mattis vitae ornare ut, bibendum et massa. Nulla at tellus a arcu luctus ultrices ac non felis. Maecenas euismod efficitur ipsum vel vestibulum. Nam imperdiet ipsum nunc, sit amet varius felis maximus quis. Etiam efficitur, mauris placerat luctus facilisis, ligula sem pellentesque nunc, ac viverra tellus velit sit amet purus. Proin a nunc id quam tempor blandit vitae id orci. Cras lectus turpis, varius nec elementum venenatis, suscipit ut nisl.</p>
<p>Nulla condimentum est in leo mollis, sit amet varius erat pulvinar. Donec posuere turpis non est ultrices lobortis. Donec commodo aliquam sodales. Ut id finibus velit. Aenean tempus eget nulla at condimentum. Ut a arcu quis dui ultricies efficitur. Vestibulum suscipit diam ullamcorper velit tempor, in ullamcorper odio sollicitudin. Vestibulum congue nisl nibh, ut elementum quam tristique non. Nulla in sollicitudin dolor. Morbi ac justo nulla. Suspendisse massa neque, vestibulum id dolor non, congue rhoncus nibh.</p>
<p>Phasellus porta tellus vel ipsum vehicula, nec fermentum lectus porta. Aenean viverra magna eu risus lacinia malesuada. Sed molestie auctor pharetra. Aliquam erat volutpat. Vestibulum in mi a orci tincidunt pellentesque. Sed et lectus eros. Nam imperdiet neque eu dolor gravida, interdum pellentesque justo rhoncus. Morbi tincidunt, ex nec pellentesque pulvinar, dui nulla tempor ipsum, sed consequat est tortor at neque. Suspendisse sed consequat urna. Nullam luctus, sem convallis volutpat mollis, sapien odio finibus elit, vitae fringilla enim leo sed velit. Vivamus fringilla ante laoreet blandit porta. Sed condimentum ut erat nec dignissim.</p>
<p>Morbi ac scelerisque metus. Donec rhoncus diam urna, nec aliquet ex mollis ut. Sed a arcu ac risus semper pellentesque ut non nibh. Phasellus eu ullamcorper sem. Maecenas at tortor faucibus, consequat risus sed, egestas sapien. Suspendisse tortor lacus, congue sed velit vel, dictum sagittis eros. Proin eu nisl viverra, mattis velit vitae, tempor turpis. Ut sodales lacus in iaculis faucibus. Integer non metus non nulla malesuada rutrum ac non ipsum. Vivamus quam diam, suscipit sed velit vel, tincidunt imperdiet urna. Praesent dapibus augue a dignissim lacinia. Nullam pharetra volutpat ligula, quis aliquet mauris pharetra nec. Etiam finibus, neque in laoreet vehicula, lorem justo feugiat velit, ac accumsan neque lacus non tellus. Aliquam quis sagittis massa, a bibendum enim.</p>
<p>Morbi vel elementum libero, vitae viverra est. Pellentesque sollicitudin neque at ligula suscipit, vel faucibus mauris consequat. Donec quis pharetra nulla, at tristique lacus. Nunc vel magna ultricies, hendrerit purus et, rhoncus dolor. Aliquam erat volutpat. Phasellus auctor malesuada augue, a iaculis sem mattis quis. Nulla facilisi.</p>
</div>
<div class="sidebar">
<div class="box">
First box
</div>
<div class="box">
Second box
</div>
<div class="box follow-scroll">
Third box (follows screen)
</div>
</div>
</div>