Looking to implement automatic scrolling in a div. I have a list of elements within a fixed height div, and now I want the div to scroll automatically when I press the down key after highlighting the 3rd li element (i.e Compt0005). Can anyone help me solve this?
Demo:- Check it out here
This block of code demonstrates how to manipulate the scrollTop property of a div element using the .getBoundingClientRect() method.
$(function () {
var liPosition = 0;
var items = $("#ulSearch li");
var divSearchContent = $("#divSearchContent");
divSearchContent.hide();
$("#txtSearch").keydown(function (e) {
if (e.keyCode == 13) { // check for enter key press
$("#txtSearch").val(items.eq(liPosition).text());
divSearchContent.hide();
return;
}
if (e.keyCode != 38 && e.keyCode != 40) { // check for up and down arrow keys
return;
}
divSearchContent.show();
items.eq(liPosition).css("background-color", "");
if (e.keyCode == 40 && liPosition < items.length - 1) { // handle down arrow key
liPosition++;
}
if (e.keyCode == 38 && liPosition > 0) { // handle up arrow key
liPosition--;
}
items.eq(liPosition).css("background-color", "red");
var b1 = divSearchContent[0].getBoundingClientRect();
var b2 = items.eq(liPosition)[0].getBoundingClientRect();
if (b1.top > b2.top) {
divSearchContent.scrollTop(divSearchContent.scrollTop() - b1.top + b2.top);
}
else if (b1.bottom < b2.bottom) {
divSearchContent.scrollTop(divSearchContent.scrollTop() - b1.bottom + b2.bottom);
}
});
});
modify each instance of
$("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")
to
$("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")[0].scrollIntoView();
One of the challenges I am facing is in a view that allows users to add items to a table. Using a simple HTML form and jQuery, new rows are dynamically added to the table. I am seeking a way to efficiently pass the added rows from the view to the controll ...
I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...
Are there any reported issues with npm on Ubuntu 18.04? Or are there known solutions to the 100:1 error? I am currently enrolled in a course and it's crucial for me to be able to execute code using npm test. Despite multiple attempts at deleting and ...
Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...
I am struggling with detecting when the value of an input field changes after it has been set by clicking a button. I have tried various events but can't seem to find the right one. <!DOCTYPE html> <html> <head> <script src=" ...
Currently, I am facing a challenge in validating the password field to allow characters, numbers, and special characters. It is essential that the password consists of exactly 8 characters. Despite searching online for a solution, I have been unsuccessful ...
I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...
I'm encountering a puzzling issue while attempting to create a pie chart in Flot using data from PHP. The chart seems to be rendering incorrectly, and I'm struggling to identify the cause. Below is my PHP code (used for testing): echo json_enc ...
Hello, I am trying to display a "Loading..." text or spinner image while waiting for the dynamic ajax content to load. Due to the large amount of data that needs to be fetched, it takes approximately 2-3 seconds for the content to fully load. Below is my ...
My current challenge involves retrieving URL parameters successfully and using them to decide which iframe src to populate. Additionally, I need to autofill the form created via the form src with other parameters. However, I am faced with two main issues. ...
I'm currently working with Next.js 13 & Strapi, and my goal is to create a Menu component utilizing the getStaticProps function. To achieve this, I've implemented a Layout component within the _app.js file, and nested a Menu component inside the ...
I am seeking to extract the desired output from the provided input: Input Configuration: var inputParams = { 'inputDetails' :[ { 'field' : 'specificationName', 'value' : 'strong'}, { ...
I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...
While working in PHP, I have encountered a situation where I needed to call a PHP function using AJAX: <button onclick="loop()">Do It</button> function loop() { $.get("ajax.php", { action: "true" }, function(result) { $("in ...
Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...
I am encountering a problem with my Ionic application that features multiple Angular controllers. Specifically, I have a LoginCtrl and RegisterCtrl controller set up. The issue arises when I try to trigger a modal with a slider from the RegisterCtrl by usi ...
Using jQuery, I am extracting various text nodes (p) and headers from a source and storing them into arrays: var textnode = $(source).children("p:not(:has(img))").map(function () { return $(this).outerHTML(); }).get(); var headerone = $(source).child ...
I need to optimize the startup performance of my app by delaying the loading of a series of HTML files that are being included into my main controller. These files are not needed for at least 4 seconds while one specific HTML file processes. How can I de ...
Recently, I encountered an issue with an ajax call that retrieves a date from the database. The date is stored as a double in the database and then converted to a string. I used Date.parse to change it into a date object and used strftime to format it. How ...
Despite changing the type from module to common, I am still unable to get require() to work. As a newcomer to this, there may be something I'm overlooking that I can't quite pinpoint. I attempted const express = require('express'); but ...