This is a web app. When a link is clicked from the navigation list on the left its page content is displayed in the pane on the right. The pane is positioned absolutely and can be scrolled up and down.
The problem is when a page is scrolled down and a different page is then selected. The new page is displayed but the scroll position does not revert back/reset. I don't understand why?
Fiddle: http://jsfiddle.net/cEWyU/
I've never seen this issue before. My attempted solution was to use named anchors but that didn't work. I read to use scrollTop and tried implementing that but had no luck. I want to stick with pure JavaScript.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
/* Pane configuration */
.left.col { width: 250px; }
.right.col { left: 250px; right: 0; }
.body.row { top: 0px; bottom: 0px; }
/* Generic pane rules */
body { margin: 0; -webkit-text-size-adjust: 100%; }
.page { left: 0; right: 0; top: 0; bottom: 0; }
.row, .col, .page { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fill, .pane { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100% }
.pane { display: none; }
.body, .pane { background: #ddd }
.right.col { border-left: 1px solid black; }
.right.col .body { padding: 0 1em; }
.listview { padding: 0; margin: 0; font-weight: bold; color: #444; }
.listview li { list-style-type: none; background: #eee; padding: 1em; border-top: 1px solid #aaa; border-bottom: 1px solid #fff; cursor: pointer; }
</style>
</head>
<body>
<div class="left col">
<div class="body row scroll-y">
<ul class="listview">
<li id="linkPage1">Example Page 1</li>
<li id="linkPage2">Example Page 2</li>
<li id="linkPage3">Example Page 3</li>
</ul>
</div>
</div>
<div class="right col">
<div class="body row scroll-y">
<div id="page1">
<h1>Example Page 1</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
</div>
<div id="page2">
<h1>Example Page 2</h1>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
</div>
<div id="page3">
<h1>Example Page 3</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
</div>
</div>
</div>
<script>
var pages = [page1, page2, page3];
// Displays page and hides all other pages
function goToPage(pageID) {
// Display page
for (var i = 0; i < pages.length; i++) {
if (pageID == pages[i].id) {
// Show page
pages[i].style.display = "block";
} else {
// Hide page
pages[i].style.display = "none";
}
}
}
linkPage1.onclick = function () {
goToPage("page1");
};
linkPage2.onclick = function () {
goToPage("page2");
};
linkPage3.onclick = function () {
goToPage("page3");
};
goToPage("page1");
</script>
</body>
</html>
You need to add scrollTop = 0 the div that scrolls when changing the content.
so the updated goToPage function looks like this:
function goToPage(pageID) {
document.querySelector('.right .body.row').scrollTop = 0;
// Display page
for (var i = 0; i < pages.length; i++) {
if (pageID == pages[i].id) {
// Show page
pages[i].style.display = "block";
} else {
// Hide page
pages[i].style.display = "none";
}
}
}
Code fixed here.
Related
I am trying to create a layout with a sidebar container and a content container where both of them are overflowing and when you scroll the page it scrolls both of the containers simultaneously. The sidebar should snap to the top/bottom of the screen when you scroll. Its a bit hard to explain but its implemented on this page perfectly:
https://www.kiwi.com/sv/sok/results/lulea-sverige/stockholm-sverige
What is the best way to implement this? I am trying to create states for the sidebar top | middle | bottom where middle is relative and top and bottom are fixed. Trying to use intersection API & the scroll event to detect which state we're in. But I'm not sure using scroll event is optimal because of performance.
Here is my attempt at implementing it:
https://codesandbox.io/s/vue-2-playground-forked-wsm9gd?file=/src/components/SidebarAndContent.vue
Its not working great and I would love some input on the best way to do this. Thanks!
this suppose to solve you problem if i get it correctly`
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<div class="main">
<h2>Sidebar</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
`
I solved it here:
https://codesandbox.io/s/vue-2-playground-forked-pkh2hr?file=/src/components/SidebarAndContent.vue
SidebarAndContent.vue:
<template>
<div>
<div id="sidebar" :class="sideBarFixed ? 'fixed' : ''" :style="[{ top: `${sideBarTop}px` }]">
<h1>Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget tellus non tortor laoreet euismod. Nunc mattis
fermentum aliquet. Donec elementum sagittis suscipit. Morbi vitae quam est. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Proin at tellus vitae nisl aliquet eleifend eget
vehicula tortor. In tristique volutpat ante, at rhoncus felis scelerisque eu. Sed eros dolor, ultrices vitae
tincidunt ac, dignissim in tellus. Nulla blandit cursus eros, non tincidunt velit sollicitudin mollis. Phasellus
tellus velit, faucibus vel faucibus ut, luctus at mauris. Nunc in lacinia nibh.</p>
<p>Proin a ipsum quis leo mattis molestie. Pellentesque nunc dui, dictum ut semper et, vestibulum ut diam.
Suspendisse volutpat suscipit mi, quis lacinia elit egestas a. Vestibulum id rhoncus massa. Nunc sed elit eu
mauris vulputate ultricies. Proin pulvinar ipsum ut nisl ullamcorper dictum. Donec sit amet dolor ipsum.
Pellentesque facilisis, metus dignissim porttitor mollis, nunc metus convallis felis, vel dictum urna justo sit
amet diam. Aenean pellentesque scelerisque nunc quis condimentum. Cras sed mauris at magna cursus tristique.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget tellus non tortor laoreet euismod. Nunc mattis
fermentum aliquet. Donec elementum sagittis suscipit. Morbi vitae quam est. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Proin at tellus vitae nisl aliquet eleifend eget
vehicula tortor. In tristique volutpat ante, at rhoncus felis scelerisque eu. Sed eros dolor, ultrices vitae
tincidunt ac, dignissim in tellus. Nulla blandit cursus eros, non tincidunt velit sollicitudin mollis. Phasellus
tellus velit, faucibus vel faucibus ut, luctus at mauris. Nunc in lacinia nibh.</p>
<p>Proin a ipsum quis leo mattis molestie. Pellentesque nunc dui, dictum ut semper et, vestibulum ut diam.
Suspendisse volutpat suscipit mi, quis lacinia elit egestas a. Vestibulum id rhoncus massa. Nunc sed elit eu
mauris vulputate ultricies. Proin pulvinar ipsum ut nisl ullamcorper dictum. Donec sit amet dolor ipsum.
Pellentesque facilisis, metus dignissim porttitor mollis, nunc metus convallis felis, vel dictum urna justo sit
amet diam. Aenean pellentesque scelerisque nunc quis condimentum. Cras sed mauris at magna cursus tristique.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec su scipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
test: "hej",
window: null,
lastScrollTop: null,
wasScrollingDown: true,
sidebar: null,
initialSidebarTop: 0,
sideBarFixed: false,
sideBarTop: 0,
};
},
methods: {
handleScroll() {
const windowHeight = window.innerHeight;
const sidebar = document.querySelector('#sidebar');
const sidebarHeight = sidebar.offsetHeight;
var doc = document.documentElement;
var scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var scrollBottom = scrollTop + windowHeight;
var sidebarTop = scrollTop + this.sideBarTop;
var sidebarBottom = sidebarTop + sidebarHeight;
var heightDelta = Math.abs(windowHeight - sidebarHeight);
var scrollDelta = this.lastScrollTop - scrollTop;
var isScrollingDown = (scrollTop > this.lastScrollTop);
var isWindowLarger = (windowHeight > sidebarHeight);
if ((isWindowLarger && scrollTop > this.initialSidebarTop) || (!isWindowLarger && scrollTop > this.initialSidebarTop + heightDelta)) {
this.sideBarFixed = true;
} else if (!isScrollingDown && scrollTop <= this.initialSidebarTop) {
this.sideBarFixed = false;
}
var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);
if (dragBottomDown) {
if (isWindowLarger) {
this.sideBarTop = 0
} else {
this.sideBarTop = (-heightDelta)
}
} else if (dragTopUp) {
this.sideBarTop = 0
} else if (this.sideBarFixed) {
var currentTop = parseInt(this.sideBarTop, 10);
var minTop = -heightDelta;
var scrolledTop = currentTop + scrollDelta;
var isPageAtBottom = (scrollTop + windowHeight >= document.body.offsetHeight);
var newTop = (isPageAtBottom) ? minTop : scrolledTop;
this.sideBarTop = newTop;
}
this.lastScrollTop = scrollTop;
this.wasScrollingDown = isScrollingDown;
},
},
mounted() {
this.lastScrollTop = window.scrollY;
this.wasScrollingDown = true;
const sidebar = document.querySelector('#sidebar');
if (sidebar) {
this.initialSidebarTop = sidebar.offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
background-color: blue;
}
#content {
padding-right: 200px;
background: green;
}
#sidebar {
width: 180px;
padding: 10px;
background: red;
float: left;
}
.fixed {
position: fixed;
}
</style>
I am trying to hover over a button and trigger a page scroll slowly. Not scroll to ID but slowly scroll the page on hover and to stop scrolling when Not hovered.
I’m not sure to understand your request, maybe you need something like that :
let elem = document.querySelector('#myElem');
let interval;
let maxScrollHeight = elem.scrollHeight - elem.clientHeight;
elem.addEventListener('mouseenter', function() {
interval = setInterval(function() {
elem.scroll(0, elem.scrollTop += 10);
// This part of code is for replay
if (elem.scrollTop >= maxScrollHeight) {
elem.scroll(0, 1);
}
}, 100);
});
elem.addEventListener('mouseleave', function() {
clearInterval(interval);
});
p {
max-height: 100px;
max-width: 100px;
overflow: scroll;
}
<p id="myElem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
A simple solution could be the use of a timer function with setTimeout() Method, using window.scroll function with behavior:'smooth' in the object argument.
var scrollStep=10,
scrollTimer=null
function scrollSlowly(yDisplacement){
if(scrollTimer!=null)clearTimeout(scrollTimer);
scrollTimer = setTimeout(function(){
window.scroll({
top:window.scrollY+yDisplacement,
left:0,
behavior: 'smooth'
})
scrollSlowly(yDisplacement)
}, 100);
}
document.getElementById('up').addEventListener('mouseenter',function(evt){
scrollSlowly(-scrollStep)
})
document.getElementById('up').addEventListener('mouseleave',function(evt){
if(scrollTimer!=null)clearTimeout(scrollTimer);
})
document.getElementById('down').addEventListener('mouseenter',function(evt){
scrollSlowly(scrollStep)
})
document.getElementById('down').addEventListener('mouseleave',function(evt){
if(scrollTimer!=null)clearTimeout(scrollTimer);
})
.toolbar{
position:fixed;
top:0.5em;
left:0.5em;
}
body{
padding:2em;
}
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a est sit amet nisi tempus feugiat at quis felis. Aenean sit amet pretium lectus, non faucibus tortor. Suspendisse potenti. Aenean posuere lorem in ultricies malesuada. Cras vulputate tincidunt augue, in vulputate lacus iaculis id. Vestibulum et neque sed quam vestibulum laoreet in eget nunc. Suspendisse potenti.
</p>
<p>
Suspendisse molestie pretium suscipit. Morbi vitae dictum neque. Nullam a purus eu tortor iaculis eleifend nec eget augue. Maecenas bibendum neque vitae felis tincidunt laoreet. Nunc faucibus ligula sed tellus luctus porttitor sed a leo. Vivamus feugiat bibendum neque in consectetur. Integer dignissim tristique augue sed fermentum. Curabitur id feugiat tortor.
</p>
<p>
Sed ligula massa, sollicitudin ac feugiat non, elementum in augue. Pellentesque vel nibh at erat lobortis volutpat. Nunc ex leo, pretium ut egestas sit amet, scelerisque eleifend dolor. Proin dictum, odio non semper viverra, leo leo cursus nunc, ac varius neque diam vitae metus. Quisque id mi convallis, lobortis massa eget, posuere dolor. Aliquam magna dolor, malesuada id ullamcorper vel, rutrum non orci. Fusce rutrum placerat risus, eget molestie massa malesuada et. Duis rhoncus vestibulum turpis. Nullam gravida id est at posuere. Sed vel cursus tortor, quis rutrum leo. Nulla id nibh quis tellus fringilla mattis quis vel lorem. Sed accumsan magna nunc, ut tempus leo venenatis in. Mauris semper tortor a viverra tempus.
Sed nec orci quis risus pellentesque ultricies sed in mi. Nam et mauris eros. Quisque in rhoncus justo, ac mattis nulla. Sed eget nibh nibh. Aenean nisl sapien, congue a purus posuere, pretium egestas sapien. Pellentesque tempus orci ut placerat luctus. Sed tincidunt, urna vel ornare fermentum, ligula mauris pulvinar tortor, ac convallis libero nibh convallis tortor.
</p>
<p>
Donec eget odio elit. Praesent viverra nisi magna, quis rhoncus enim pellentesque sit amet. Pellentesque sodales blandit mauris ac laoreet. Morbi pharetra pellentesque ex eu sodales. Morbi id tempus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec tincidunt ex. Duis commodo nibh vel tincidunt aliquam. Etiam vel risus sed sem placerat auctor. Nulla porta sapien lorem, et molestie massa interdum ac.
</p>
<div class='toolbar'>
<button id='up'>Up</button><button id='down'>down</button>
</div>
</body>
I have a bootstrap collapse panel. In there I have placed toggle link bottom of the content so it will go down and up when click that link.
The problem
I have a long list of content. I need to move users to top when they click toggle. But in here, when I expand the menu and click collapse, it will go all the way to bottom of the page. Instead of I need to move users to the top of the page. I tried to set offset top but no luck.
Any idea?
My Jquery
$('html,body').animate({
scrollTop: $(".collapsed").offset().top
},500);
jsfiddle
if I correctly understood, you need to scroll top when collapse area is hidden, try to use this. The collapse has hide.bs.collapse event that fires immediately when the hide method has been called, default interval for the collapse is 350ms, as you won't see the end of your site, scroll interval should be less than the default.
Sorry for my bad english...
Update
I re-read all comments, your problem is that you try to scroll to toggle button instead collapse area, you scroll to the button when area not closed and it is on the bottom, just scroll to panel-collapse....
$(document).ready(function() {
$('.panel-collapse').on('hide.bs.collapse show.bs.collapse', function(e) {
$('html, body').animate({
scrollTop: $(e.target).offset().top - 20
}, 150);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
</div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a po</p>
</div>
<!-- dib -->
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
<br><br><br><br><br><br><br><br>
<!-- roew -->
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
</div>
You can achieve the scrolling by attaching an event-listener to the toggle-element and then checking the classes of the pannel-collapse element.
$('#accordion .panel-heading a').on('click', function (event) {
let panelCollapse = $(this).closest('.panel').find('.panel-collapse');
if (!panelCollapse.hasClass('collapse')) {
$('html, body').animate({
scrollTop: panelCollapse.offset().top
}, 500);
}
});
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0
col-9'>
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0 col-3'
style='overflow-y: scroll'>
</div>
</div>
</body>
I want everything to remain responsive as it is now (where video_container is responsively in proper ratio and both video_container and chat_container are same height). but I don't want chat_container to expand further below in height when chats fill up the space. Instead I want it to scroll. How can it be done ?
I did set overflow-y: scroll to id chat_container in <style></style> because somehow style attribute disappears when added directly to the element(???) but that does nothing.
In the head I have (serving locally from downloaded copy) :
<link rel='stylesheet' href='bootstrap.min.css'>
<script src='jquery-3.3.1.slim.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='popper.min.js'></script>
You can do this by creating your own video-chat-row class. Note that by using the embed-responsive-16by9 class, you cannot expect the row and col-x classes to work normally. You got to create your own overrides.
.video-chat-row {
display: flex;
width: 100%;
position: relative;
}
#video_container {
flex: 0 0 75%;
background-color: black;
}
#chat_container {
position: absolute;
width: 25%;
left: 75%;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0' >
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0'>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
<p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
</div>
</div>
</body>
I'm trying to automaticaly break line a div content each, let's say, 50 characters. For that I have this script but it doesn't seems to work.
https://jsfiddle.net/3sj2644z/4/
function breakline(e) {
var $this = $(this);
var length = $this.html().length;
if(length % 50 == 0) {
$this.val($this.html() + "\n");
}
Any advice ?
You can do it with long_string.replace(/(.{50})/g, "$1<br>");
var long_string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel vestibulum orci. Vestibulum pulvinar sapien nec massa molestie volutpat. Duis iaculis arcu placerat odio tempor, vel venenatis nisi congue. Sed fermentum felis sed nulla mollis, at rhoncus velit condimentum. Phasellus luctus lorem justo, cursus tempus tortor laoreet quis. Pellentesque odio nibh, interdum vel ultrices sit amet, vestibulum vitae libero. Aenean vel porta quam. Morbi tincidunt diam vulputate, varius mi vel, interdum justo. Maecenas justo neque, mollis in ante ac, suscipit rhoncus sem.Vivamus vestibulum sapien mauris, quis mollis nunc auctor a. Phasellus rutrum turpis et rutrum semper. Aliquam tincidunt, orci quis convallis rutrum, lectus sapien vulputate dolor, in fermentum sem nisi et nisl. In consectetur purus risus, vitae tempor ante fermentum a. Integer ut accumsan nibh. Donec sagittis justo quam, sollicitudin vehicula leo dapibus vel. Maecenas a augue non mauris blandit accumsan. Vivamus semper fermentum nulla, quis laoreet velit egestas sit amet. Mauris ut euismod risus. Donec sit amet cursus sapien. Cras molestie arcu aliquet ipsum posuere volutpat vel id erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean justo libero, sagittis ut facilisis vel, hendrerit non dolor. Fusce egestas elit nec mauris aliquet elementum sodales in lacus. Aenean posuere, mauris quis pellentesque tristique, tellus eros vestibulum leo, in pretium arcu tellus vitae enim. Sed feugiat, ante eu molestie sodales, nunc tortor accumsan ligula, eget feugiat elit velit sed risus. Nulla feugiat libero imperdiet dictum commodo. Vivamus sit amet neque libero. Curabitur interdum nibh at purus pretium, id ornare magna aliquet. Vivamus accumsan varius laoreet. Suspendisse non ante in felis laoreet interdum sit amet eget velit. Proin cursus vulputate semper. Donec id nunc tortor. Vestibulum vulputate turpis eu dui mollis, in pretium lorem tempus.";
document.getElementById('container').innerHTML = long_string.replace(/(.{50})/g, "$1<br>");
<div id="container"></div>
What You are doing there is adding a break line only in case when the whole text has 50 characters.
What You should do is:
- split string every 50 characters if it is longer than 50 characters
- and join them with '\n'
The below code will split your string into lines of 50 characters:
lines = str.match(/.{50}/g);
Now, You can join them with:
lines.join('<br>');
Or You can use a one liner:
str.replace(/(.{50})/g, "$1<br>");
I've created an answer similar to your approach. Since the value of textg is getting the value of the textarea when length % 50 equals 0 I had a line break to the textarea. I also added white-space pre-line which
will break lines where they break in code, but extra white space is still stripped.
Learn more about whitespace here.
I have stripped all javascript from your html and put it all in one function breakline().
function breakline(e) {
var $this = $(this); // store text area element
var $textg = $('#textg'); // store div element
var length = $this[0].value.length; // get length of text within textarea
$textg[0].textContent = $this[0].value; // set text content of div to text of textarea
if(length % 50 === 0) { // test if text in textarea is divisble by 50 with a remainder of 0
$this[0].value += '\n'; // add line break to textarea
}
}
$('#text-g').on('input', breakline); // changed from keyup to input since keyup will call breakline only when a key is released
#textg {
white-space: pre-line;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea id="text-g" name="text-g" maxlength="300" placeholder="Message de copropriétée"></textarea>
</form>
<div id='textg' class='textg'></div>
I tried to tackle this myself by manually creating an array, but I have to concede the other answers using:
match() and join(); and
regex and replace()
are less verbose and more elegant.
var chars = 50;
var withBreaks = document.getElementsByClassName('with-breaks')[0];
var withBreaksText = withBreaks.textContent;
var withBreaksTextLength = withBreaksText.length;
var withBreaksArray = [];
var j = 0;
for (var i = chars; i < (withBreaksText.length + chars); i = i + chars) {
withBreaksArray[j] = withBreaksText.substring(0,(chars + 1));
withBreaksText = withBreaksText.substring(chars + 1);
j++;
}
withBreaks.textContent = '';
for (var i = 0; i < withBreaksArray.length; i++) {
withBreaks.innerHTML += withBreaksArray[i] + '<br />';
}
<p class="with-breaks">Lorem ipsum dolor sit amet, ut alia vidit splendide qui, sit modo consetetur no. Duo eu affert vocibus argumentum. Ut mei delenit molestiae. Eum agam albucius appetere ad, eum ex debitis omnesque singulis, eu vidit concludaturque ius. Ea mei dicat partiendo, mazim aliquando sea eu, quot clita salutatus no vim. Cibo complectitur ea sed, ad prima veritus nec. Facer verear periculis eu quo, in per molestie honestatis. Quem quas persecuti cu nec. Ei tation corpora his. Amet iriure ex has, aliquam sanctus vim eu. Deserunt gubergren has cu. Dico nominavi dissentias ea his, vel te stet verear repudiare, duo quis scripta aliquam ut. Qui menandri platonem ne, eu eum abhorreant scribentur, usu etiam euismod lobortis et. His vivendo propriae ad. An nam congue suscipit consectetuer, mea te eleifend tractatos signiferumque. Nominavi sapientem salutatus no nec. Ad nisl sint ipsum his. Lorem aperiam repudiare no nec. Melius discere mea ei. Quas modus contentiones ex vim. Hinc lorem torquatos eu vim, brute intellegam ne nec, quo ne aeterno fuisset principes. Sea et eripuit gubergren, eu impetus aliquid definitiones nec, te alii wisi nam. Est indoctum qualisque eu, tantas splendide reprehendunt an pri. Sea perpetua dissentiunt definitionem at. Stet harum sit ad.</p>