Looking for a responsive solution to automatically scroll a horizontal grid to a specific position when the page loads

Eight years ago, a user asked a similar question on this platform: DIV Horizontal scroll, how to onload to ID

The answer provided was:

document.getElementById('foo').scrollLeft = 500;​

However, I am currently working on a Bootstrap 4 website that is fully responsive. The issue I am facing is that the width of each card within the scrolling div varies depending on the device.

Is there a new method available that allows me to move or scroll to a specific 'n'th div on page load?

https://i.sstatic.net/eM9ec.png

Also, like the original poster mentioned, my scrolling div is positioned halfway down the page, making a simple anchor link unsuitable ;(

javascripthtmlcssresponsive-design

Answer №1

The initial step is to take into account the variability of the div's width, which will determine the scrolling speed.

 let elementWidth = $("div").width();
 document.getElementById('foo').scrollLeft = elementWidth;​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on accentuating the active menu item using PHP

Looking for a solution in the header.php file. How can I highlight the current page in a menu navigation included on every page of my website using only include("header.php")? Any help is much appreciated. Thank you <div class="form-inline" id="myDIV" ...

phphtmlcss

I am experiencing a lack of results when attempting to run db.find() in Mongodb

Recently I delved into the realm of MongoDB, deciding to create a basic application that simply showcases data stored in my database. Check out the code snippet below: var mongoose = require("mongoose"); mongoose.connect("mongodb://localhost ...

javascriptnode.jsmongodbexpressmongoose

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

javascriptjquerycssajaxzend-framework

Troubleshooting Images in a React Application Integrated with WordPress API

I am struggling to understand why this GET request is consistently returning a 404 error. I have thoroughly tested the URL using Postman and everything seems to be in working order for the title and excerpt, but the images are causing some issues. Does a ...

javascriptreactjswordpresswordpress-rest-api

Is there a way for the navbar to close automatically when I navigate to a new page?

Could you assist me with figuring out where and what to add in order to close the navbar when navigating to other pages? Currently, it only closes when I click on the close button itself. Below is the code for the navbar: import { useRef } from "rea ...

htmlcssreactjsnavigation

css - unable to achieve center alignment

Seeking help with adjusting the alignment of a centered div in this JSFiddle example. The goal is to have the text align vertically and horizontally within the div, but the current setup results in the top line being centered instead of the overall content ...

htmlcss

What is the proper procedure for configuring Babel and executing "npm run dev" in the terminal without encountering the "ERROR in ./src/js/index.js" message?

My goal is to include the babel/polyfill with the index.js files using webpack. After completing the setup, I tried running "npm run dev" in the command prompt but encountered an error. The initial line of the error message said "ERROR in ./src/js/index.js ...

javascriptnpmwebpackbabeljsbabel-polyfill

Experiencing difficulty inputting data into database using PDO

Attempting to save user input data to a database using PDO, I have created a form for users to input their information. However, when I submit the form, it redirects to proses_input.php and displays a blank page. I tried combining the code into one file, b ...

phphtmlpdo

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

javascripthtmlreactjscreate-react-app

HTML5: Initiating countdown

I have incorporated a template which features a CSS class called counter, designed to count up to a specified number with an incremental effect. Here is the code snippet: <div class="counter"><span id="emi" data-from="100" data-to="12835" data-r ...

javascriptjqueryhtmldom

Error: Unable to iterate through users due to a non-function error while attempting to retrieve the firestore document

I encountered an issue with my code, receiving the error message: TypeError: users.map is not a function. Can anyone help me identify what might be wrong? const [users, setUsers] = useState([]); const getData = async () => { try { const use ...

javascriptreactjsfirebasegoogle-cloud-firestore

Having trouble with the checkbox functionality. Attempting to dynamically toggle gridlines in a flot chart

First, I'll share the code and then provide an explanation. Below is a snippet of the relevant HTML: <div id='gridButton'> <form> <input type="checkbox" id="gridCheck" value="showGrid">Show Grid </form ...

javascriptjqueryhtmldomflot

Updating JSON data in real time using JavaScript by manipulating MySQL database entries

My database has a mysql structure consisting of the columns ID, NAME, and TYPE. The data is then converted into a JSON format as shown below: [ {id: "1", name: "Snatch", type: "crime"}, {id: "2", name: "Witches of Eastwick", type: "comedy"}, { ...

javascriptjsonobject-literal

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

Learn how to pass the rel attribute value from a clicked image to a method using Vue.js

I'm currently delving into vue.js and I've encountered a challenge. I want to pass the value of a rel attribute from an image to a method, but so far I have been unsuccessful. Here is the HTML code snippet: <template> <div> ...

javascriptjqueryhtmlvue.js

Oops! It appears that there is an error saying "Data.filter is not a function"

I've encountered an issue where I pass a prop from parent to child and then return it, resulting in a 'filter is not a function' error. Any assistance in identifying the cause of this error would be greatly appreciated. Here is the array th ...

javascriptreactjsjsx

Tips for updating an object variable dynamically in an Angular application

const person = { "name": "jacob", "age": 22 } I am looking to dynamically update it to: { "name": "jacob", "age": 22, "dob": number } ...

javascriptangularjs

What is the best way to delete a dynamically generated div element through JavaScript?

function addDiv { var content = document.getElementById('area1').value; var newDivElement = document.createElement("div"); newDivElement.id = "myNewDiv"; newDivElement.className = "newDivClass"; newDivElement.innerHTML = cont ...

javascripthtml

Ways to create a Google OAuth button with a personalized touch

I currently have a Google OAuth button that is implemented using the npm package @react-oauth/google. The button functionality is working fine, however, an issue arises when a user is already logged into their Google account in the browser and then views t ...

javascriptnode.jsreactjsnext.jsgoogle-oauth

Managing the invocation of a promise multiple times in AngularJS, and handling some specific exceptions

After previously asking a question on handling promises multiple times in AngularJS (AngularJS handle calling promise multiple times), I am facing a new challenge. This time, I need to retrieve a list of cities, but encounter an exception. Similar to how ...

javascriptangularjsajax