I'm looking to create a scrollable div similar to the one shown on the page linked below for a large secondary navbar. This navbar will expand to the bottom of the page after the title and primary navbar. So when I scroll down the page, the title and navbar will move up, and this div will have a height of 100vh.
https://developers.facebook.com/docs/graph-api/reference/user/likes
Does anyone have a simple code snippet to achieve this?
To make the scroll bar appear when the content overflows, specify the height and width of the div and set the overflow property to auto.
<div style="height:200px; width:200px;overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit faucibus molestie. Nullam ultricies massa posuere blandit cursus. Nulla risus sem, dictum a tellus vitae, tempor vulputate ipsum. Fusce tincidunt finibus eros vitae egestas. Quisque hendrerit ultricies velit vitae pellentesque. Fusce gravida sagittis ipsum facilisis dictum. Aenean varius, felis ut pretium scelerisque, dolor sem euismod velit, quis facilisis lectus metus in felis. Pellentesque nisl turpis, pretium a velit in, iaculis ultricies neque. Proin ullamcorper gravida posuere.Duis sagittis augue sed malesuada convallis. Duis iaculis mattis lorem sed rutrum. Aenean eget erat quam. Praesent finibus eleifend arcu eget venenatis. Aliquam rutrum ex sem, vel tempus enim ultricies in. Fusce a risus ornare mi rutrum fringilla a in est. Nullam tristique vel arcu eu dapibus. Donec sit amet pulvinar quam.Integer consectetur feugiat ultricies. In eget nisl ac sem sollicitudin condimentum. Curabitur varius sed ligula eu porttitor. In semper id nisi sed ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc in convallis lorem, nec malesuada augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec neque eros, venenatis vitae lorem eget, malesuada mollis lorem. Mauris maximus neque felis, ac facilisis nulla efficitur et. Nulla interdum, nulla ultrices condimentum aliquet, massa erat varius augue, et congue lectus mi sed sapien. Aliquam scelerisque, dui eget molestie condimentum, ex elit sagittis est, vel cursus magna urna vitae arcu. Nam volutpat diam id diam ultrices pretium. Maecenas efficitur orci risus, vitae pharetra enim posuere eget.</p>
</div>
Here is a simple demonstration using jQuery, feel free to customize it to fit your needs.
var step = 250;
var scrolling = false;
// Set up event listeners for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
})
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
})
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}#content {
overflow:auto;
height: 100vh; /*adjust as needed*/
background: #e6e6e6;
width:160px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>
<div id="wrapper">
<div id="content">
<ul>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
<li>Insert your content here</li>
</ul>
</div>
</div>Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...
I have a good understanding of utilizing HTML5 localStorage with methods like localStorage.getItem/setItem. However, I am currently trying to figure out the implementation for a dynamic page. Let me explain the scenario: On my dynamic page (myPage.jsp), ...
When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...
Working with a complex legacy multi-frame webpage that needs to be compatible with IE-11 and responsive to hotkey events has brought up some challenges. It appears I can't simply declare a JavaScript method in the parent page. Rather, it seems that e ...
I stumbled upon this interesting code snippet here: http://jsfiddle.net/7hqyq/ Being a novice in the realm of jQuery, I am curious to learn how one can modify the background color of the selected square (including the first square on page load) and implem ...
I'm looking to develop a unique web interface where users can divide a "timeline" into multiple segments. Start|-----------------------------|End ^flag one ^flag two Users should be able to add customizable flags and adjust their position ...
Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...
I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...
How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...
I'm facing an issue with react-bootstrap mapping in my component whereby I encounter the following error: Cannot destructure property 'Title' of 'fac' as it is undefined. It seems like there's an error when trying to de ...
My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...
I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...
I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...
Currently, I am working with nextjs and I am trying to set a background Image for a specific div using next/image. Most of the sources I found only explain how to implement full screen background images with next/image, not for a single div. I stumbled upo ...
I successfully implemented a script that extracts site meta keywords and writes them into the DOM. javascript:(function metaKeywords() { metaCollection = document.getElementsByTagName('meta'); for (i=0;i<metaCollection.length;i++) { nameAttri ...
I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...
So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...
Is there a way to create a JavaScript function that can specifically extract hidden text from an element? Are there any existing libraries with this capability, and if so, how efficient are they? In order for an element to be considered visible ac ...
Seeking Help to Create Herringbone Pattern Filled with Images on Canvas I am a beginner in canvas 2d drawing and need assistance with drawing mixed tiles in a cross pattern (Herringbone). var canvas = this.__canvas = new fabric.Canvas('canvas' ...
Trying to figure out how to integrate this design: https://i.sstatic.net/r70a4.png The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content ...