Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div.

Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well.

Your support on this matter would be highly valued.

.container {
  width: 414px ;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrolling a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  width:100px;
  border-weigth: 1px;
  border-color:white;
  border-style: solid;

 
}

div.scrollmenu a:hover {
  background-color: #777;  
}
<div class="container">
<div class="scrollmenu">
  <a href="">A</a>
  <a href="">B</a>
  <a href="">>!Middle!<</a>
  <a href="">D</a>
  <a href="">E</a>

</div>
</div>

javascripthtmlcss

Answer №1

Implementing JavaScript allows you to initiate the scroll bar from the center position.

    window.addEventListener('load', () => {
      let scrollElement = document.querySelector('.scrollmenu');
      scrollElement.scrollLeft =  (scrollElement.scrollWidth - 
      scrollElement.clientWidth ) / 2;
    });

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

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Troubles with retrieving API search results using Vue computed properties

I've recently developed an Anime Search App using Vue.js and the new script setup. I'm currently struggling to access the search results in order to display the number of titles found. The app is fetching data from an external API, but it's ...

javascriptvue.js

Send an ajax request to upload several images to the server

I am currently facing an issue with my web application that allows users to create posts with a maximum of 15 images. I have implemented AJAX requests to send all the data, including the images, in one request. However, I encountered this error: An error ...

javascriptc#jqueryasp.netajax

ASP.NET MVC - AjaxContext is a powerful feature provided by the

I recently attempted to delve into the AjaxContext utilized by ASP.NET-MVC in scenarios such as Ajax Actionlinks and their clientside functions like onSuccess and onComplete. However, I must admit that I found it quite confusing... Is there any documentati ...

javascriptasp.net-mvcajaxcontext

Using the TIMESTAMP data type in PostgreSQL and getting the most out of it

After saving a Luxon datetime value in a TIMESTAMP(3) type column in a postgres database, I encountered difficulty using it for various operations like converting time zones. Despite creating the object with the code snippet below: const { DateTime } = req ...

javascriptsqlnode.jspostgresqlluxon

Trouble connecting JavaScript to Node application for proper functionality

After setting up Node/Express/EJS, I am now trying to include js files, but my alert("working"); is not working as expected. Quite ironic, isn't it? The main objective is to load learnJs.js in the browser and trigger the alert so that I can confirm e ...

javascriptnode.jsexpressejs

The element is not positioned correctly due to the absolute positioning

This is my first attempt at creating a jQuery plugin and I have almost got it working correctly. You can view the example here. I've been struggling for days to position an element as desired. The goal is to display some text with an optional downwar ...

javascriptjquerycss

What is the best way to navigate to the bottom of a page when new data is added?

I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see ...

javascripthtmlcssfirebaseionic-framework

The HTML and body elements do not possess a width of 100% within the document

When viewing my portfolio site on smaller screens such as 425px and below, there is a white gap on the right side. This issue arises because the HTML and body elements do not inherit full width by default. Do you know why this happens and how I can resol ...

htmlcss

Typescript encountering onClick function error during the build process

My current challenge involves creating a submit function for a button in my application. However, when I attempt to build the project, I encounter a typing error that is perplexing me. Despite trying various methods, I am unable to decipher how to resolve ...

javascriptreactjstypescript

Is it possible to utilize a conditional statement in my EJS document to determine a directory path within my Node.js and Express application?

Just starting out with EJS and I'm trying to create a conditional statement. Basically, what I want is if I am on a specific directory path, then replace a link in my navigation bar. <% let url = window.document.URL; if(!url.includes(&a ...

javascriptnode.jsexpressejs

The event bus I'm using isn't functioning properly within the axios interceptor, yet it operates smoothly in all my Vue components

Currently, I am utilizing VueJs and mitt for the eventBus. The mitt is globally loaded and functioning correctly as shown below: main.js const emitter = mitt(); const app = createApp(App) app.config.globalProperties.emitter = emitter I am able to call t ...

javascriptvue.jsvuejs3

Can anyone provide guidance on creating a Jest test for an authenticated Express endpoint?

I have been working on a seemingly straightforward 4-file toy solution that I thought was simple. I am looking to write a Jest test for the '/bingo' route in bingo.js which requires authentication. Below are the four files that make up this setup ...

javascriptexpressunit-testingauthenticationjestjs

How can I make a POST request from one Express.js server to another Express.js server?

I am encountering an issue while trying to send a POST request from an ExpressJS server running on port 3000 to another server running on port 4000. Here is the code snippet I used: var post_options = { url: "http://172.28.49.9:4000/quizResponse", ti ...

javascriptnode.jsexpress

Transfer files with Ajax without the need for a form tag or submission

I'm trying to send images via AJAX without submitting a form. Normally, when submitting a form I can access the images using $_FILES['images']['tmp_name']; However, when trying to send files, I receive an object FileList in an arra ...

javascriptphpjqueryajaxajaxform

I am struggling to display an array of objects retrieved from the server in the UI using AngularJS

I am receiving an array of objects as a JSON from the server. When I try to access my service URI from HTML, I encounter the following array in my console: "angular.js:13920 Error: [$resource:badcfg] http://errors.angularjs.org/1.5.8/$resource/badcfg?p0= ...

javascriptangularjsjson

The data-ls attribute is currently not permitted on the svg element. Is there a way to fix this issue?

Upon running my site through the w3cvalidator tool, I encountered the following errors: "Attribute data-ls not allowed on svg element at this point" and "End tag svg did not match the name of the current open element (use)". Below is a snippet of the cod ...

htmlsvgw3cw3c-validationsvg-animate

Tips for Achieving Observable Synchronization

I've encountered a coding challenge that has led me to this code snippet: ngOnInit(): void { this.categories = this.categoryService.getCategories(); var example = this.categories.flatMap((categor) => categor.map((categories) = ...

javascriptangulartypescriptobservable

What could be the reason for Angular to merge the element at index 0 of an array into a subarray instead of doing

After setting up the Array in my oninit function, I encountered an issue where one part of the array was functioning as intended while the other returned an error. this.tests = [{ status: 0, testresults: [{ name: 'test ...

javascriptarraysangulartypescript

Updating previous values in reactjs to a new state

I have a div set up to render multiple times based on data retrieved from the database. The background color of the div corresponds to the ID received from the backend. My goal is to change the background color of the currently selected div and remove the ...

javascripthtmlcssreactjs