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>
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 this content:
<div class="newscontent">
<p class="article-lead">
Lorem ipsum dolor sit amet, in laoreet fermentum, ac turpis quam, libero in
tincidunt orci at, nec sociosqu, accumsan sed eget pretium libero deserunt
suscipit.
</p>
Lectus lobortis aenean odio posuere tellus non, tincidunt urna nec rhoncus
wisi, turpis eros duis lorem dui sagittis, convallis arcu vestibulum non ad
non.<br /><br />
<br /><br />Lacinia aliquet, adipiscing egestas, quae consectetuer vel, nulla
mattis aenean quam risus commodo. Egestas ipsum nunc vitae amet. Proin
molestie, in rhoncus, in pellentesque vitae aliquam quis suscipit lorem, eu
metus quis adipiscing tempus ante. Donec non morbi parturient. Libero nam
pretium ipsum adipiscing risus cras.<br /><br />
<br /><br />Ultrices elit nec mauris, ante consequat, nec sapien mi pharetra.
Quam proin, non sem tortor, dis odio et. Justo lectus quis, tincidunt praesent
fermentum eu, quis risus, tempor at eros id nunc eget urna, at sem pulvinar
ullamcorper accumsan.<br /><br />Etiam maecenas leo eget, aliquet faucibus mi
lectus erat rhoncus turpis. Velit tristique ante. Morbi et ipsum at dolor
nunc, tristique sed gravida in eu molestie viverra.
</div>
And i want to remove multiple multiple <br><br/> to one <br><br/> between two paragraphs.
var ta = document.getElementById('b');
ta.innerHTML = ta.replace("<br><br/><br><br/>", "<br><br/>");
<div class="newscontent">
<p class="article-lead">Lorem ipsum dolor sit amet, in laoreet fermentum, ac turpis quam, libero in tincidunt orci at, nec sociosqu, accumsan sed eget pretium libero deserunt suscipit.</p>
Lectus lobortis aenean odio posuere tellus non, tincidunt urna nec rhoncus wisi, turpis eros duis lorem dui sagittis, convallis arcu vestibulum non ad non.<br/><br/> <br/><br/>Lacinia aliquet, adipiscing egestas, quae consectetuer vel, nulla mattis aenean quam risus commodo. Egestas ipsum nunc vitae amet. Proin molestie, in rhoncus, in pellentesque vitae aliquam quis suscipit lorem, eu metus quis adipiscing tempus ante. Donec non morbi parturient. Libero nam pretium ipsum adipiscing risus cras.<br/><br/>
<br/><br/>Ultrices elit nec mauris, ante consequat, nec sapien mi pharetra. Quam proin, non sem tortor, dis odio et. Justo lectus quis, tincidunt praesent fermentum eu, quis risus, tempor at eros id nunc eget urna, at sem pulvinar ullamcorper accumsan.<br/><br/>Etiam maecenas leo eget, aliquet faucibus mi lectus erat rhoncus turpis. Velit tristique ante. Morbi et ipsum at dolor nunc, tristique sed gravida in eu molestie viverra.
</div>
Okay your problem is you are not taking the element in the right way, and also, you cant make a replace of an HTML element, you have to make replace of a string, so first change replace for an '.innerHTML.replace', and then change your replaces words. Here the correction ;)
var ta = document.getElementsByClassName('newscontent')[0];
console.log(ta.innerHTML);
ta.innerHTML = ta.innerHTML.replace(/<br><br>/gi, "<br>");
console.log(ta.innerHTML);
A regular expression will sort this right out for you.
To match explicitly a series of 4 <br />s (in varying formats), you want a regex like this:
/(<br[^\/>]*\/?>\s*){4}/gi
This works like so:
<br matches the start of our tag
[^>\/]* matches zero or more characters other than > or /
\/? optionally matches a /
> matches the end of our tag
\s* matches zero or more whitespace characters.
(...){4} matches exactly 4 instances of whatever's between ( and )
So, used in your code, it'll look something like this:
ta.innerHTML = ta.innerHTML.replace(/(<br[^\/>]*\/?>\s*){4}/gi, '<br /><br />');
Naturally, if you wanted to, instead, replace any 2 <br />s with a single one, I'm sure you can figure out what to change!
I am trying to make a button that when clicked points to a specific section of a different page.
For example a user is on his profile page and clicks on "change personal information" button. He/She should be redirected to the settings page and the browser should scroll down (or land) where the "Change your Personal Information" section is (at the bottom of that page for example).
I use something similar in which it scrolls down to a section of the same page by using this js lines:
function goToByScroll(id){
// Removing "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
which animates down to the section.
Can something like that be done? If so, tips to the right direction would be really appreciated.
Simply place this code in the document ready event handler.
You can get the hash value from the window object:
$(document).ready(function(){
var id = window.location.hash.replace('link', '');
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
As advised above you may scroll to id extracted from window.location, or you can simply red href-attribute of you <a> element.
$('.scroll-trigger').click(function(e) {
e.preventDefault();
var $that = $(this);
var target = $that.attr('href');
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow');
});
#aboutRabbits {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Go to Rabbits
<div id="content">
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
<div id="aboutRabbits">
<p>Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are eight different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbits (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, an endangered species on Amami Ōshima, Japan). There are many other species of rabbit, and these, along with pikas and hares, make up the order Lagomorpha. The male is called a buck and the female is a doe; a young rabbit is a kitten or kit.</p>
</div>
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
</div>
Step 1. Redirect to 'settings' page with div id in 'url'
Step 2. User url and get the div id from window.url using split().
Step 3. Use below function.
$(document).ready(function(){
var DivId = window.Url.split('#');
$('html,body').animate({
scrollTop: $("#"+DivID).offset().top},
'slow');
});
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.