Horizontally align the list items within a div that has overflow:auto

Currently, I am working on a timeline project and have the following code:

        $("#time-line-selector ul li a").click(function(event) {

            event.preventDefault();

            $("#time-line-selector ul li a").removeClass("active");

            $(this).addClass("active");

            var yearId = $(this).attr("data-id-selector");

            $("#time-line-container ul").animate({
                "margin-left": - ( (yearId - 1) * timeLineContentWidth)
            }, 1000);
        });
#time-line-selector{
    width: 100%;
    margin: 30px 0 0 0;
    overflow: auto;
}
#time-line-selector ul{
    margin: 0 auto;
    padding: 0;
}
#time-line-selector ul li{
    float: left;
    margin: 0;
    list-style: none;
    position: relative;
}
#time-line-selector ul li a{
    display: block;
    position: relative;
    background: #ffffff;
    margin: 8px 0 0 0;
    padding: 16px 10px 8px 10px;
    color: #aeaeae;
    font-size: 17px;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#time-line-selector ul li a:before{
   display: block;
   content: "";
   position: absolute;
   background: #e1e1e1;
   top: 0;
   left: 0;
   margin: 0px 0 0 0px;
   width: 100%;
   height: 1px;
   border-radius: 50%;
}
#time-line-selector ul li a:after{
    display: block;
    content: "";
    position: absolute;
    background: #aeaeae;
    top: 0;
    left: 50%;
    margin: -5px 0 0 -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
#time-line-selector ul li a:hover, #time-line-selector ul li a.active{
    background: #595959;
    color: #ffffff;
}
#time-line-selector ul li a:hover:after, #time-line-selector ul li a.active:after{
    background: #e62b28;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="time-line-selector">
            <ul style="width: 1054px;"><li class="time-line-selector"><a href="#" data-id-selector="1" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="2" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="3" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="4" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="5" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="6" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="7" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="8" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="9" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="10" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="11" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="12" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="13" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="14" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="15" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="16" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="17" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="18" data-year-selector="1996">1996</a></li></ul>
        </div>

I want to implement a feature where clicking on a specific date will scroll the page to centralize that date. Any suggestions on how to achieve this?

Fiddle: http://jsfiddle.net/vvtsvr3e/

javascriptjqueryhtmlcss

Answer №1

Consider incorporating the following line into your click event handler:

$("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);

Adjust your code to look like this:

$("#time-line-selector ul li a").click(function (event) {

    event.preventDefault();

    $("#time-line-selector ul li a").removeClass("active");

    $(this).addClass("active");

    var yearId = $(this).attr("data-id-selector");

    $("#time-line-container ul").animate({
        "margin-left": -((yearId - 1) * timeLineContentWidth)
    }, 1000);
    $("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);
});

Alternatively, you can avoid using data-id-selector with the following adjustment:

$("#time-line-selector").scrollLeft(($(this).parent().index(".time-line-selector") + 1 ) * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);

Check out a demo on JSFiddle

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

Confirm the date's validity and then proceed to compare it with

In my ASP.NET 4.0 project, I have developed a web user control for validating dates. The date format I am utilizing is dd-MMM-yyyy. This control consists of two textboxes, each accompanied by a calendar extender (an AJAX control), and I have also applied a ...

jqueryasp.net

Issue with connecting the 'Enter' key to the button - no success

My current setup involves using jQuery to link the Enter key to an HTML button through this code snippet: $("#console").keyup(function(event){ if(event.keyCode == 13) { $("#submit").click(); } }); HTML: <input autocomplete="off" type= ...

jqueryhtmlbuttononkeyup

Having trouble with my sorting algorithm - am I overlooking something obvious?

function Controller($scope) { var sortItems = [ { "text": "Second", "a": 2 }, { "text": "Fifth", "a": 5 }, { "text": "First", "a": 1 }, { "text": "Fourth", "a": 4 }, { "text": "Third", "a": 3 } ]; va ...

javascriptsortingangularjs

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Is there a way in jQuery to make all browsers act as if they have CSS3 capabilities? ...

javascriptjquerycss

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

I am struggling to align the brand and dropdown menu on the right with the content of my page. My goal is to have a single column for the content, taking up col-8 on larger devices and col-12 on smaller devices. I want the navbar and footer to always be 10 ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Is there a way to identify when the back button on an Android device is pressed while using a

I am currently working on a Progressive Web App with Vue.js. I am aware that Cordova has the capability to handle the back button on Android/iOS devices (not the browser's back button) which is good news. Does anyone know how I can detect this in Vue ...

javascriptandroidvue.jsbrowser

Issue with Firebase Real-time database failing to acknowledge authentication status

I am encountering difficulties when trying to access my real-time databases in Firebase with set rules. I have a total of 3 databases - 1 default and 2 additional ones. The rules for all three are the same: { "rules": { ".read": & ...

javascriptnode.jsfirebasefirebase-realtime-databaseelectron

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

Working with Angular 9 and ngx-toastr has presented me with an interesting challenge. I am tasked with creating custom toast styles that differ significantly from the default ones provided by toastr. Each toast in the set will have unique border colors, f ...

cssangularuser-interfaceangular9toastr

"Exploring ways to implement validation for multiple email addresses in a textarea using JQuery or JavaScript, while allowing the addresses to be separated by semicol

NOTE: Each email ID must be unique. An empty string value is allowed to be added. Email IDs should be separated by semicolons and commas. Basic validation of email IDs is necessary for entry. [![ $("#d-notification").focusout(function () { var ...

javascriptjqueryhtmlcss

Link specifically for the ADFS 2.0 single sign-on application

I've been conducting research on both Google and Stackoverflow but haven't been able to find a solution to my problem. Within my ADFS portal, there are 5 different services that can be selected. I'm trying to determine how I can generate a ...

javascriptsingle-sign-onadfs

Utilize React MaterialUI's ExpansionPanelSummary by incorporating a counter to a specific div id

I am in need of a feature that will automatically increment a counter in the div id every time the render function is invoked. The main goal is to ensure that each div has a unique identifier. Below is the current render function implementation - render ...

javascriptreactjsmaterial-ui

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

javascriptvue.jsbootstrap-5popper.js

The submission of the Ajax form is malfunctioning

My attempt to load the php code without refreshing the page is failing with my Ajax code. What could be causing the issue? I prefer not to use jquery or other frameworks. Do you think the problem lies in my javascript code? Should I resort to using jquery ...

javascriptphpajax

Arrange list items in a circular pattern

Is there a way to achieve the desired appearance for my navbar like this link? I have tried rotating the text, but the vertical text ends up too far from the horizontal. Any suggestions? .vertical { float:right; writing-mode:tb-rl;/*IE*/ w ...

htmlcssnavbar

What is the best way to pass a variable and its corresponding state-updating function as a prop in a React component?

Considering I have a variable defined as follows: const [APIKey, setAPIKey] = useState([]) Is it possible to group these together into a single variable and then pass it as a prop? const passAPI = {APIKey, setAPIKey} Here is my approach to passing it alo ...

javascriptreactjs

Progressing through a series of step-by-step Ajax requests

I am currently exploring ways to dynamically change the content of a div. Here is an example of an ajax request that I am working on: $.ajax({ url:'/foos', cache: false, type: 'get', }).done( function( foo_array ) { fo ...

javascriptajaxnode.jsmongodbjquery

What are the steps for implementing Ajax in Django templates?

Looking to implement Ajax within Django templates? urls.py from django.conf.urls import patterns, url urlpatterns = patterns('', url(r'^home/$', 'views.index'),) views.py from django.template import RequestContext fro ...

pythonhtmlajaxdjangodjango-templates

Utilizing AMD Modules and TypeScript to Load Bootstrap

I am attempting to incorporate Bootstrap into my project using RequireJS alongside typescript AMD modules. Currently, my requireJS configuration looks like this: require.config({ shim: { bootstrap: { deps: ["jquery"] } }, paths: { ...

jquerytwitter-bootstraprequirejstypescriptamd

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

javascriptcssreactjsmaterial-uistyling

Click the button to automatically insert the current time

Hello, I am new to scripting and seeking some guidance. I have a code that retrieves the current time and sends it to a MySQL database when a button is clicked. <form action="includes/data_input.inc.php" method="POST"> <!-- button - Start ...

javascriptphphtml