Mobile devices have a fixed distance and center alignment on the horizontal timeline

Question

Mobile devices have a fixed distance and center alignment on the horizontal timeline

I am attempting to create a horizontal timeline similar to this example: https://codepen.io/ritz078/pen/LGRWjE

The issue I am facing is that I do not have specific dates (DD/MM/YYYY) but only ranges such as 1998-2002 or single years like 2009. This has caused a problem that I am struggling to resolve, resulting in the display issue shown here:

https://i.sstatic.net/4C7xN.png

My objectives are as follows:

Establish a fixed distance between timeline elements
Create functionality that works solely with years
For devices less than 768px wide, ensure only one element is displayed and centered

I have managed to find a solution for objective 3., however, I am facing challenges with the other requirements:

if ($(window).width() < 768 {
    eventsMinDistance = $('.cd-horizontal-timeline .events-wrapper').width(/2;)
}

(timelines.length > 0) && initTimeline(timelines);

$(window).resize(function(){
    if ($(window).width() < 768 {
    eventsMinDistance = $('.cd-horizontal-timeline .events-wrapper').width(/2;)
    } else{
        eventsMinDistance = 155;
    }
}

If anyone knows how to address these issues, I would greatly appreciate your assistance. I have been struggling for hours without success. Thank you for your help!

javascript jquery css timeline

Answer 1

Answer №1

Your code initially had a syntax issue, but I fixed it and made some additional adjustments to achieve the desired fixed width between each date. Debugging and understanding the developer's intention made this process quite straightforward. See below for the updated code:

jQuery(document).ready(function($){
    var timelines = $('.cd-horizontal-timeline'),
        eventsRelativeDistance = false;
    if ($(window).width() < 768) {
        eventsMinDistance = Number($('.cd-horizontal-timeline .events-wrapper').width())/2;
    } else {
        var eventsMinDistance = 100;
    }
    
    (timelines.length > 0) && initTimeline(timelines);
    
    $(window).resize( function(){
        if ($(window).width() < 768) {
            eventsMinDistance = Number($('.cd-horizontal-timeline .events-wrapper').width())/2;
        } else {
            eventsMinDistance = 100;
        }
    });
    
    // Rest of the code continues...
});

Answer 2

Your code initially had a syntax issue, but I fixed it and made some additional adjustments to achieve the desired fixed width between each date. Debugging and understanding the developer's intention made this process quite straightforward. See below for the updated code:

jQuery(document).ready(function($){
    var timelines = $('.cd-horizontal-timeline'),
        eventsRelativeDistance = false;
    if ($(window).width() < 768) {
        eventsMinDistance = Number($('.cd-horizontal-timeline .events-wrapper').width())/2;
    } else {
        var eventsMinDistance = 100;
    }
    
    (timelines.length > 0) && initTimeline(timelines);
    
    $(window).resize( function(){
        if ($(window).width() < 768) {
            eventsMinDistance = Number($('.cd-horizontal-timeline .events-wrapper').width())/2;
        } else {
            eventsMinDistance = 100;
        }
    });
    
    // Rest of the code continues...
});

Answer 3

Answer №2

Have you had any success resolving this issue? I am facing a similar problem where adjusting the default distance between dates is causing the timeline layout to break. The article explains the calculations for determining the distances between dates in detail.

The main.js file defines a minimum distance between consecutive dates using the eventsMinDistance variable, which is initially set to 60 pixels. The differences between each date are calculated based on the data-date attribute assigned to them. The minimum difference serves as a reference point for setting the distances between dates along the timeline.

For instance, if the smallest difference found is 5 days, then the distance between two dates separated by a 5-day interval will be 60 pixels, while the distance between dates separated by 10 days will be 120 pixels.

source:: www.codyhouse.org

The code snippet below specifies the minimum distance:

var timelines = $('.cd-horizontal-timeline'),
    eventsMinDistance = 60;

(timelines.length > 0) && initTimeline(timelines);

Changing the min distance value from 60 to 1 disrupts the application because the distances become too small. The function setDatePosition calculates the positioning of dates based on the specified minimum distance and will break if modified.

function setDatePosition(timelineComponents, min) {
    for (i = 0; i < timelineComponents['timelineDates'].length; i++) {
        var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),
            distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 2;
        timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');
    }
}

It seems that the tutorial serves as a good reference but customization may require rewriting the code from scratch to fit specific needs. It is crucial to understand the logic behind the calculations before making adjustments to avoid breaking the functionality of the timeline.

If you were able to find a solution, please share your insights. I have been experimenting with date manipulation to achieve equal spacing but encounter issues when adding multiple dates. This has led me to consider developing a custom solution tailored to my requirements.

Answer 4

Have you had any success resolving this issue? I am facing a similar problem where adjusting the default distance between dates is causing the timeline layout to break. The article explains the calculations for determining the distances between dates in detail.

The main.js file defines a minimum distance between consecutive dates using the eventsMinDistance variable, which is initially set to 60 pixels. The differences between each date are calculated based on the data-date attribute assigned to them. The minimum difference serves as a reference point for setting the distances between dates along the timeline.

For instance, if the smallest difference found is 5 days, then the distance between two dates separated by a 5-day interval will be 60 pixels, while the distance between dates separated by 10 days will be 120 pixels.

source:: www.codyhouse.org

The code snippet below specifies the minimum distance:

var timelines = $('.cd-horizontal-timeline'),
    eventsMinDistance = 60;

(timelines.length > 0) && initTimeline(timelines);

Changing the min distance value from 60 to 1 disrupts the application because the distances become too small. The function setDatePosition calculates the positioning of dates based on the specified minimum distance and will break if modified.

function setDatePosition(timelineComponents, min) {
    for (i = 0; i < timelineComponents['timelineDates'].length; i++) {
        var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),
            distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 2;
        timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');
    }
}

It seems that the tutorial serves as a good reference but customization may require rewriting the code from scratch to fit specific needs. It is crucial to understand the logic behind the calculations before making adjustments to avoid breaking the functionality of the timeline.

If you were able to find a solution, please share your insights. I have been experimenting with date manipulation to achieve equal spacing but encounter issues when adding multiple dates. This has led me to consider developing a custom solution tailored to my requirements.

Mobile devices have a fixed distance and center alignment on the horizontal timeline

Answer №1

Answer №2

Similar questions

Utilize the power of REACT JS to transform a specific segment within a paragraph into a hyperlink. Take advantage of the click event on that hyperlink to execute an API request prior to

Launching URLs from JSON data in the system browser - Apache Cordova

Styling CSS Based on Input from Child Siblings

Divide the width by half in a CSS grid layout with 3 columns

utilize images stored locally instead of fetching them from a URL path in a Vue.js project

How can we ensure that href/src values are "absolutized" when utilizing server rendering?

Leveraging various techniques within a single controller in AngularJS

What could be the reason for the loss of default browser focus on this accordion navigation?

What exactly occurs when a "variable is declared but its value is never read" situation arises?

Unable to navigate to partial view within MEAN application

Fade effects on hover with a changing background color

Creating a jQuery alert similar to Stack Overflow's and integrating it with server-side functionality

Unable to upload files using Jquery.form (3.51.0-2014.06.20) in IE9 within a Sharepoint application

Tips for modifying the color of selected text

Import a new JavaScript file and access a variable

Is there a way to continuously send out this ajax request?

TypeScript Redux actions not returning expected type

Issue: Compilation unsuccessful due to an error in the Babel loader module (./node_modules/babel-loader/lib/index.js). Syntax error

Sorting Angular components in reverse alphabetical order from A to Z

Different ways to determine if a given string exists within an Object