Truncate paragraph after second line Javascript

Truncate paragraph after second line Javascript - javascript

I have a p tag with multi line text,
I want to truncate the para and delete all the texts after second line
here is how my code looks
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat
</p>
Note: I don't understand how can I do this, or is this can be done?

maybe this page will help you a little bit : http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
https://codepen.io/natonischuk/pen/QbGWBa
use css :
<style>
.block {
overflow: hidden;
line-height: 1.2em;
max-height: 2.4em;
}
</style>
<p class="block">.....</p>
ratio of (max-height / line-height) is number of line that will be shown (not truncated)

Related

Floating element relative to another element with static start position

It's hard to explain using words, better look at example i made.
https://jsfiddle.net/yoz6pkh0/
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="filter">FILTER</div>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum ...</p>
...
<p>Lorem ipsum ...</p>
</div>
I have the navbar that i hide on scrolling page down and show on scrolling up.
I need to make an element (lets call it FILTER) that on page load is located in hero-section but become sticky to navbar when scrolling to FILTER position or below and vice versa when scrolling up.
I solved the problem in my way but i wonder if any better solution exists? Is it necessary to clone FILTER element?

I think there is a better solution than cloning the element, you can use this code:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.container {
margin: 0px 200px;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav {
background-color: blue;
color: white;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0px;
transition: top 0.5s;
}
.filter {
background-color: red;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
li {
padding: 15px;
}
.main {
padding: 50px 200px;
}
.hero {
padding: 150px 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: bisque;
height: 250px;
}
JS:
let filter = document.getElementsByClassName("filter")[0];
let fixed = false;
let filterTop = filter.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function() {
if (filter.getBoundingClientRect().top <= 50 && !fixed) {
filter.style.position = 'fixed';
filter.style.top = '50px';
fixed = true;
} else if (window.scrollY <= filterTop - 50 && fixed) {
filter.style.position = 'static';
filter.style.top = '';
fixed = false;
}
});
What I've done here is removing the clone (and the styles related to it ) and making the position of the filter fixed or static according to the scroll.

How to vertically slide off layers of an image off as the user scrolls down?

If anyone remembers the Apple product page for the cylindrical Mac Pro, the site had a feature that had each layer of the Mac Pro slide off as you continue to scroll down.
I have been looking everywhere for possible indication as to how to code this dynamic page, but I have been unsuccessful.

You can create the animation with CSS class and #keyframes rule, then add the class to your element once it reaches the scroll threshold you set in the conditional within a scroll event listener. Below is not an exact replica of Apples animation, however it will illustrate how one could achieve this with vanilla JS and CSS animations tween.
I further explain how I have done this in the code below...
// get the selector nodes we wish to animate
const images = document.querySelectorAll('#main img');
// create a function and pass in the selector node and the top
// fold position (how far off the top fold you wish to slideOut) as a param
const slideOut = (images, foldPos) => {
// run each element in the nodeList through a loop
images.forEach((el) => {
// add a scroll eventlistener on the window
window.addEventListener('scroll', () => {
// define each elements position using the forEach loop
// el.getBoundingClientRect and get the top position
let elPos = el.getBoundingClientRect().top;
// get the unique ID that was set in the elements we wish to animate
// we'll use this to get the element selector using its ID
let elId = el.id;
// conditional that checks the top position in
// relation to the top fold of page, this will pass
// as a parameter in the main function slideOut()
if (elPos < foldPos) {
// lets target the id selector of the animated element
// that has reached the set threshhold
let slideEl = document.getElementById(el.id);
// lets add our class to the element so the CSS can
// do its animation using an #keyframes rule
// * see the css code `.slideoff` and its `#keyframes` `slideoff` rule
slideEl.className = 'slideoff';
// optional, remove element from display using a timeOut()
// set to work in conjuntion with the CSS animation duration
setTimeout(() => slideEl.style.display = 'none', 500)
}
})
})
}
// call function and pass in the paramter (nodeList, topFoldThreshold)
slideOut(images, 125)
#main {
position: relative;
}
p {
max-width: 50%;
}
#main img {
width: 50%;
height: 50%;
}
.slideoff {
position: relative;
animation: slideoff 1s ease-in-out;
left: 50;
opacity: 0;
height: 50%;
width: 50%;
}
#keyframes slideoff {
0% {
opacity: 1;
top: 0;
left: 0;
}
50% {
opacity: 0;
top: 500px;
}
100% {
left: 10000px;
}
}
SCROLL DOWN
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id
ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec interdum elit. Praesent eu dui mi. Vestibulum facilisis elit in mi convallis, eget consectetur arcu vehicula. Pellentesque ultricies elit tellus, non ultrices erat volutpat at.
Ut dui dolor, tempor nec porta at, aliquet eget urna. Etiam congue vestibulum ante. In et diam sapien. Suspendisse mattis eros eget ex convallis, nec tempor risus lobortis. Quisque ullamcorper libero arcu, quis ultrices magna aliquet non. Donec et ornare
eros. Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis
quis lobortis ut, placerat eget metus.
</p>
<div id="main">
<img id="first" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Background.jpg">
<p>Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam
id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="second" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Backgrounds.jpg">
<p>Ut vel mi facilisis, mattis diam sit amet, consectetur elit. Nam mollis vestibulum enim, posuere blandit sem. Quisque euismod odio est, vel maximus metus efficitur quis. Morbi ac dignissim massa, in egestas ex. Proin efficitur feugiat libero nec ornare.
Duis vel sapien molestie, efficitur lacus et, ullamcorper tortor. Vestibulum sodales viverra porta. Aenean tincidunt velit nisi, non tempus odio vulputate ut. Praesent accumsan urna et turpis pharetra, vitae consequat diam tempor. Vestibulum sed odio
sem.
</p>
<img id="third" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Images.jpg">
<p>Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="fourth" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Picture.jpg">
<p>Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis quis lobortis
ut, placerat eget metus. Vestibulum neque ante, lobortis id accumsan a, pellentesque quis nisl. Quisque ac ante ut arcu faucibus molestie sit amet ac dui. Fusce elit nisi, ullamcorper eu eros eget, tempus suscipit purus. Aenean sed nibh urna. Vestibulum
vehicula dapibus ante at viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed purus urna, condimentum sed dictum quis, blandit vel tellus. Sed pretium elit eros, sed congue lectus dictum in. In auctor diam sit amet augue congue
blandit. Vivamus ut enim in mauris venenatis vulputate. Nulla felis tellus, vestibulum at hendrerit auctor, porta a purus. Aenean ac ante vitae turpis rutrum hendrerit eget nec ante. Phasellus bibendum egestas nisi, ac aliquet mi sollicitudin ac.
Sed bibendum quam et mi bibendum ultricies. Pellentesque nec ante viverra, dictum turpis ac, sollicitudin dolor. Vestibulum ut interdum neque. Cras aliquet porta dui, sit amet luctus mauris egestas et. Aliquam quis imperdiet sapien, sollicitudin facilisis diam. Fusce at commodo sapien. Nam at erat nisl. Sed placerat risus vel consequat congue. Nam ultricies ultricies suscipit. Nunc ultrices, dui ut blandit porta, lorem sem dapibus diam, vitae porta tellus nisi ac nibh. Cras pulvinar laoreet dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
</div>

jQuery Scrollbar on window resize not working

I am using jquery scrollbar plugin for my website. Everything is working good. But when I resize window in mozilla and make scroll div and resize again its looks uneven scrollbar.
How to make the custom scrollbar will be visible if the browser resize also.
script I have tried:
$('.scroll-lmenu').scrollbar({
autoUpdate :true,
autoScrollSize: true
});
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>

Mozilla does have some extensions for manipulating the scroll-bars but they are all recommended not to be used.
-moz-scrollbars-none They recommend using overflow:hidden in place of this.
-moz-scrollbars-horizontal Similar to overflow-x
-moz-scrollbars-vertical Similar to overflow-y
-moz-hidden-unscrollable Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.
Mozilla Developer Docs on 'Overflow'
Further details about Mozilla
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute: scrollbars
Type: nsIDOMBarProp
Description: The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only
Last but not least, padding is like magic.
As has been previously mentioned in some other answers, here is an illustration which is sufficiently self-explanatory

That was you body's scroll bar disable the body's overflow-y.
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
body{
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>
Use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead.
Link To developer.mozilla.org

You can add max-height:100vh and remove body margin margin:0
$(document).ready(function() {
$('.scrollbar-inner').scrollbar();
});
body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet" />
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>

body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: overflow-x ;
}

You can directly hide the scroll bar by
.scrollbar-inner > .scroll-element{ display:none;}

Try not Using
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
https://codepen.io/sheetalsinghwd/pen/povoYbv
like this

try adding the following to document ready
$(".scrollbar-inner").hover(function() {
$("body").css("overflowY", "hidden");
});
$(".scrollbar-inner").mouseleave(function() {
$("body").css("overflowY", "auto");
});

How to scroll to the correct div with fixed Navbar [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a Bootstrap affixed navbar, but when i try to scroll to a div, the navbar overlays the div text, so i can't read it.

Actually i can not know of your scenario from very little code provided. Anyways i have come up with related demo here. Have a look, see if it helps you.
Here in following we would scroll Down to Header Level 3 content having class scrollStop.
My Approach:
1) Finding position of Header Level 3 from top using offset().top
2) Finding outerHeight() of < header > having class header.
3) Now Top Position - Header Height helps us to get actual position to scroll by removing header's height.
4) Finally animate scroll to that position.
Working : Demo
$(".scroll").click(function()
{
var scrollPos = $(".scrollStop").offset();
scrollPos = scrollPos.top;
var headerHeight = $(".header").outerHeight();
var actualPos = scrollPos - headerHeight;
$("body,html").animate({'scrollTop': actualPos});
});
body
{
margin:0px;
}
.header
{
margin:0px;
display:block;
left:0px;
top:0px;
position:fixed;
width:100%;
height:50px;
background:rgba(180,30,30,0.7);
}
.container
{
margin:55px auto 0px auto;
background:#ccc;
width:90%;
padding:10px;
border-radius:10px;
}
.title h1
{
text-align:center;
}
.container > div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px auto;
border-radius:10px;
}
.scroll
{
position:fixed;
color:#fff;
text-align:center;
background:#34D2E3;
padding:10px;
border-radius:5px;
right:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<span class="scroll">Scroll Down<br> Click</span>
<div class="container">
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3 class="scrollStop">Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>

I found how to fix it using the ScrollTo plugin, I changed my code like so:
$("#a-politica-comercial").click(function() {
$('body').scrollTo($('#politica-comercial'), 800, {offset:-110});
});
I changed the offset to reduce some pixels in the final position, so now I have the div with the correct text!
Thanks anyways!

How to scroll to top of element with collapsible panels with Jquery

I have a series of divs that on click, toggle the state of a collapsible div (like an accordion widget). That is working fine, but I want to be able to scroll to the top of the trigger div (the div with class name 'panelTab') when the user clicks. The problem is that when the panels are hidden, they take up no space so jQuery doesn't automatically 'know' the size of the page, and isn't able to calculate to the top of the element automatically. So what happens is that on click it scrolls, but it 'overshoots' the top of the window and lands in the middle of the paragraph content. I'm stuck - anyone know a simple solution? Thanks in advance.
<div class="panelTab first holder">
<div class="text-block"> <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div> </div>
<div class="animatedPanel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM </h3><p class="sub- title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder"><div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
And the jQuery:
$('.animatedPanel').hide();
$('.panelTab').click(function() {
$('.panelTab').removeClass('active');
$(this).toggleClass('active');
var panel = $(this).next()
$('.animatedPanel').not(panel).slideUp();
panel.slideToggle({
direction: "up"
}, 100);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
});
http://jsfiddle.net/rmLo2n07/

try changing the style of the hidden element
position:absolute, display: block, visibility:hidden
then calculate it height and restore its old style

Develop Reference

JavaScript is the programming language of the Web.

Truncate paragraph after second line Javascript - javascript

Related

Floating element relative to another element with static start position

How to vertically slide off layers of an image off as the user scrolls down?

jQuery Scrollbar on window resize not working

How to scroll to the correct div with fixed Navbar [closed]

How to scroll to top of element with collapsible panels with Jquery

Categories

Resources