Slide effect on appearing and disappearing of accordion content

Slide effect on appearing and disappearing of accordion content - javascript

I created this very simple accordion. Everything works pretty well except when I am testing it on mobile. When there is a change in which content is visible there is this 'awkward jump' between the different elements. Also for some reason when I try to add the jQuery slideDown method it doesn't work so everything is jumping from section to section and it just feels awkward. Here is the code:
$(".container-out").click(function(){
$(".container-content").removeClass("active").eq($(this).index()).addClass("active");
});
.container-content {
display: none;
}
.active {
display: block;
}
h2 {
padding: 20px;
background: black;
color: white;
}
<div class="container-out">
<div class="container-link">
<h2>ONE</h2>
</div>
<div class="container-content active">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<div class="container-out">
<div class="container-link">
<h2>TWO</h2>
</div>
<div class="container-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<div class="container-out">
<div class="container-link">
<h2>THREE</h2>
</div>
<div class="container-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
Any suggestions are greatly appreciated!

Working example based on your code with slideDown.
$(".container-link").click(function(){
var $targetPanel = $(this).nextAll('.container-content');
if(!$targetPanel.hasClass('active')){
$('.container-content.active').removeClass('active').slideUp();
$targetPanel.addClass('active').slideDown();
}
});
.container-content {
display: none;
}
.active {
}
h2 {
padding: 20px;
background: black;
color: white;
}
<div class="container-out">
<div class="container-link">
<h2>ONE</h2>
</div>
<div class="container-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<div class="container-out">
<div class="container-link">
<h2>TWO</h2>
</div>
<div class="container-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<div class="container-out">
<div class="container-link">
<h2>THREE</h2>
</div>
<div class="container-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>

Related

onpointermove called with +/- values when trying to simulate scrolling

I'm trying to scroll using pointer events. I realize this isn't the proper way to do scrolling. I'm creating a game with a 'variable' scrolling experience.
The code 'scrolls' but it's very wobbly and jerky. The console.log shows something curious: scrollBy() is called with a -6 (for example) and then immediately called again with a 6. It appears that calling scrollBy() causes onpointermove to be called again?
I'm guessing I'm making a noob mistake, triggering a duplicate event.
I'm willing to try a very different approach. I assumed using pointer-events was the right way to do this as it should work with both mouse and finger events.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Guesture</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#target {
touch-action: pan-x;
}
</style>
</head>
<script>
var lastY;
var thisY;
function down_handler(event) {
lastY = Math.trunc(event.offsetY);
console.log("down_handler " + lastY);
}
function move_handler(event) {
thisY = Math.trunc(event.offsetY);
deltaY = lastY - thisY;
console.log("move_handler " + deltaY);
window.scrollBy(0, deltaY);
lastY = thisY;
}
function init() {
var el=document.getElementById("target");
el.onpointerdown = down_handler;
el.onpointermove = move_handler;
}
</script>
<body onload="init();">
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.</p>
<p>Parturient montes nascetur ridiculus mus mauris. Aliquam faucibus purus in massa tempor nec. A arcu cursus vitae congue mauris rhoncus aenean vel elit. In arcu cursus euismod quis viverra. Dolor sit amet consectetur adipiscing elit. Enim nec dui nunc mattis enim ut tellus elementum. In aliquam sem fringilla ut. Eget arcu dictum varius duis at consectetur lorem. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Blandit massa enim nec dui. Justo eget magna fermentum iaculis eu non diam phasellus. Phasellus vestibulum lorem sed risus ultricies tristique.</p>
<p>Odio facilisis mauris sit amet massa vitae. Feugiat in ante metus dictum. Commodo viverra maecenas accumsan lacus. Tristique risus nec feugiat in fermentum posuere. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Adipiscing bibendum est ultricies integer. Dignissim suspendisse in est ante in. Aenean pharetra magna ac placerat vestibulum. Netus et malesuada fames ac turpis egestas sed tempus. Egestas sed tempus urna et pharetra pharetra massa massa. Dictum non consectetur a erat nam. A iaculis at erat pellentesque adipiscing commodo. Odio aenean sed adipiscing diam donec adipiscing. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Tortor pretium viverra suspendisse potenti. Risus ultricies tristique nulla aliquet. </p>
</div>
</body>
</html>

Original Answer
Your issue stems from this little piece right here: event.offsetY
In short it should be event.clientY
As for why this works:
offsetX and offsetY are relative to the parent container - which shifts from being a tag to being <body> or any other tag.
clientX and clientY are relative to the viewport - i.e. the top left corner of your screen
For more info here is a good explanation of pageX/Y, screenX/Y, and clientX/Y: Stackoverflow answer
Edit
#ScottJenson also asked:
I'm confused as to why move_handler() would be called with a deltaY
of -10 followed by 10 (when using offsetY).
Answer:
try making the text boxes bigger like so:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.

and put three or four boxes.
Changed clientY back to offsetY
If you try to scroll on the block itself you'll notice it's smooth but as soon as you cross the line from one box to another the value jumps by the height of the text box. The reason this happens is because the mouse pointer is calculated in reference of the top left corner of the individual tags. i.e. if you're 50px down from the tag you are hovering over that is the value of offsetY
clientY on the other hand always has the same reference point - the top left corner of the screen. So there are no points where one box has a wildly different value.

javascript - stop fixed element from scrolling after certain point without jquery

I know there are many solutions to stopping an element from scrolling after a certain point using JQuery, but I'd like to do it with vanilla Javascript.
Basically, this is an element that fixes once you scroll down to it and I want it to stop being fixed at the bottom of the page so that it doesn't go under the footer, if that makes sense.
Here is my current Javascript:
var fixmeTop = $('#childWidth').offset().top; //get initial position
$(window).scroll(function() {
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop - 100) { // fix once scroll to or past element
var elementAdd = document.getElementById("childWidth");
elementAdd.classList.add("afix");
} else {
var elementRemove = document.getElementById("childWidth");
elementRemove.classList.remove("afix");
}
});
The CSS which fixes the element:
.afix {
position:fixed;
z-index;9999;
top:100px;
}
I tried getting #childWidth's distance from the bottom of the page and then adding a CSS class with position:absolute; once scrolled within a certain distance from the bottom of the page but the element just disappeared once I scrolled down to near the bottom.

I believe you are looking for position: sticky. This would be a pure CSS solution; no JS necessary:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.HolyGrail-body {
display: flex;
flex: 1;
background-color: pink;
}
.HolyGrail-content {
flex: 1;
background-color: aqua;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
background-color: red;
}
.HolyGrail-nav {
/* put the nav on the left */
order: -1;
background-color: yellow;
}
header, footer { height: 100px; }
header { background-color: blue; }
footer { background-color: green; }
.nav-box-wrapper {
position: sticky;
top: 50px;
}
.nav-box {
background-color: magenta;
position: relative;
top: 100px;
}
<!-- https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ -->
<div class="HolyGrail">
<header>…</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
</main>
<nav class="HolyGrail-nav">
<div class="nav-box-wrapper">
<div class="nav-box">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
</ul>
</div>
</div>
</nav>
<aside class="HolyGrail-ads">…</aside>
</div>
<footer>…</footer>
</div>
Please excuse all the ugly lorem ipsum -- if you run this full screen you should be able to see it in action.
This was sort of quick slipshod together-- there might be better approaches, and you'd want to do plenty of browser testing. But the sticky position property would probably allow what you are describing without the need for any code outside your HTML and CSS.

Sliding text from under image

I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible).
I am not good in javascript at all. Now I have something like this:
.html
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
.js
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide();
} else{
$(this).next('.slidingDiv').show();
}
});
});
https://jsfiddle.net/Elfiszcze/49vd6d6k/2/
Could someone help me with this one?

When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
//hide all sliding divs
var arrayLikeOfSlidingDivs = $('.slidingDiv');
arrayLikeOfSlidingDivs.each(function(){
if ($(this).is(':visible')){
$(this).hide(500);
}
});
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide(500);
} else{
$(this).next('.slidingDiv').show(500);
}
});
});

Issue with absolute positioned element that to be shown inside a scrollable div

We are using a dropdown plugin, which is hiding original dropdown and painting an input text element below the original element. And the options are being painted from an unordered list(which are appended to body) with position as absolute.
This is working fine. But when the select/input element is painted inside an internal scrollable div and when we scroll the internal div, the position of list is not getting changed(It is not sticking to text box). But, when we scroll with external scrollbar, position of list is moving as expected(sticking to text box).
Please provide your inputs to solve this.
PFA sample HTML at
https://plnkr.co/edit/PsVIOrVeMILsfSBUAlfW?p=preview
#scrollable {
max-height:200px;
overflow:scroll;
}
input{
width:200px;
}
ul {
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:13px;
left:185px;
}
<div id="scrollable">
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br>ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, por.</p>
</div>
<ul><li>First</li><li>Second</li><li>Third</li></ul>

Add position:relative on the container
#scrollable{
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
body{
max-height:300px;
overflow:scroll;
}
#scrollable{
max-height:200px;
overflow:scroll;
position:relative;
}
input{
width:200px;
}
ul{
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:5px;
left:245px;
}
li{
list-style-type:none;
text-align:left;
}
</style>
</head>
<body>
<div id="scrollable">
<center>
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br> vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
<ul><li>First</li><li>Second</li><li>Third</li></ul>
</center>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel cLorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
ommodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
</p>
</body>
</html>

Scroll to specific section of another page

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');
});

Develop Reference

JavaScript is the programming language of the Web.