I implemented the setTimeOut function to achieve smooth scrolling.
Unfortunately, my function is not behaving as expected.
While it is functioning, the scrolling is not smooth enough.
I would greatly appreciate any assistance!
const handleScroll = () => {
const pageCards_div = document.getElementsByClassName('page-cards')
for (let i = 0; i < 235; i++) {
setTimeout(() => {
pageCards_div[0].scrollLeft += 1
}, 1000)
}
}
Your for loop triggers 235 calls to your animation function, each one following the previous immediately, beginning after a delay of 1 second.
If you prefer to move step by step with a 1-second pause between each step, you can implement it like this:
const handleScroll = () => {
const pageCards_div = document.getElementsByClassName('page-cards')
let func;
func = (remaining) => {
if (remaining == 0) {
return;
}
pageCards_div[0].scrollLeft += 1;
setTimeout(() => {
func(remaining - 1);
}, 1000);
};
func(235);
I have recently started incorporating AngularJS into my Rails application. However, I am facing an issue where my route providers with Angular are not functioning as expected. Instead of displaying my template, the Rails view is being displayed. routes.rb ...
I have an array and I want to display a random component inside it. Specifically, I want to include the FeedbackComponent before the last two objects in the array. This is how it should look like in a schematic representation: storyObject storyObject st ...
Hello, I'm an advanced beginner so I appreciate your patience:) I've had success removing checkboxes and styling their labels when the for="" attribute is present. However, I'm facing a challenge with a form where the labels wrap the input ...
Struggling with understanding the concepts of AngularJs. How can I create textfields and animations like the ones in this example using AngularJS? I've tried exploring directives, but it's not quite clicking for me. I've attempted to follow ...
const promise = require('promise'); const {Builder, By, Key, until} = require('selenium-webdriver'); const test = require('selenium-webdriver/testing'); const chai = require('chai'); const getUrl = require('./wd ...
I am currently working on a project using three.js and next.js, but I keep encountering this error: 'planeBufferGeometry is not part of the THREE namespace. Did you forget to extend? See: As a beginner in three.js, I'm unsure what exactly is ca ...
How can I incorporate an htmlcanvas as the webpage background and overlay Vuejs components on top of it? I know the answer must exist, but I'm not sure where to start looking. ...
Utilizing the express and ftp packages, I am attempting to fetch files from an FTP server and then display them to the client via HTTP GET requests. The initial request is successful, but upon trying to make another call, I encounter the following Excepti ...
Being new to PHP programming, I encountered an issue while trying inputting an HTML tag into a PHP file. This snippet generated an error: <?php $a = "Begin"; $b = 12; echo $b . " " . $a . " " . "This is a PHP file <br/>"; echo strlen($a); echo s ...
I am currently working on an Angular application that utilizes Chart.js to create dynamic charts in various views. Additionally, the application has the capability to export data to a PDF format using the PDFMake JavaScript library, which is a basic tool a ...
I am currently working on incorporating a form that is perfectly centered on the page, featuring standard login fields for both email and password inputs. Strangely enough, the label for the email input appears to be getting prefixed with an additional spa ...
Something that has caught my attention recently is the behavior of my website's AJAX implementation. When my site receives a response, it is inserted into div elements using the .innerHTML method. For example: $("#cont-btn") .click(function() { ...
I'm attempting to design a list item with controls on the left and right sides that slide in when the user begins editing the list, and slide out when they're finished. I've managed to create a working example, but I'm encountering an i ...
Recently, I've come across an issue with my contact form 7 plugin, which has been integrated into the front-page.php file using the code below: <div id="contact" class="pad-section"> <div class="container"> <h1>Contact Us</ ...
I have been trying to dynamically set the source of an iframe using a scope variable, but it keeps appearing blank. Here is what I attempted: <div ng-repeat="url in urls"> <div ng-click="testAlert(url.domain)"> <iframe ng-src="{{ url ...
Recently, I delved into the world of JavaScript, particularly Jquery. As I encountered the $(document).ready(function() {}); statement and added it to my code, I faced an issue when placing it within the header tag of my HTML. The script tag would display ...
I need to capitalize each value of the select options that come from a SQL database. However, the code provided only works on the first field... function capitalize(str){ var text = str.text().replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCas ...
Just starting out with NodeJS and ExpressJS. I'm looking to customize a for loop in order to iterate through data from NodeJS using an index, akin to a non-traditional for loop. Take a look at the code snippet below, extracted from NodeJS, where I re ...
Recently, I made some updates to my ajax code in order to implement asynchronous functionality. Everything was running smoothly before, but I decided to incorporate jQuery promises, which led me to "jQuerify" the code. Strangely enough, after this change, ...
I need to find the closest number in an array that is not higher than a specified number. Here's an example scenario: Let's say we have an array: [1, 3, 7, 15, 40, 55, 70, 80, 95] The variable for the number is: numberD1; If numberD1 is 8 ...