The math needs some reviewing

  • ghudson

    (@ghudson)


    6 years, 4 months ago

    I chose this plugin because of it’s clean look, and the colors kinda matched our site colors anyways. I handed it off to our media team and moved along. I came back to check on it, and saw they had added 49 posts with dates ranging from 1941 to 2017. “Alright”, I thought, “that sounds about right.” So I got to check out the page and what I find baffles me. The wrapper div for the list of events, div.events, had a fixed width of 1,665,780px. The difference between the two dates in 1941 was 60px, and the difference between 1941 and 1942 was a whopping 22,000px. Compounded with this issue is the constant logging of undefined index notices coming from this plugin that if filling our debug log.
    As hilarious as this is, without better documentation of use, and without a better algorithm or finding the difference, I can in no way recommend this plugin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author sehgal.sunny

    (@sehgalsunny)

    6 years, 4 months ago

    Hi @ghudson,

    Cool 🙂

    Sorry for inconvenience.

    Can you please try below code to resolve your issue.

    <script type=”application/javascript”>
jQuery(document).ready(function($){
var total_event = $(‘.cd-horizontal-timeline .timeline .events-wrapper .events ol li’).length;
for(var i=1; i<= total_event; i++){
$(‘.cd-horizontal-timeline .timeline .events-wrapper .events ol li:nth-child(‘+i+’) a’).css(‘left’,”+i*100+’px’);
}
});
</script>
    Thread Starter ghudson

    (@ghudson)

    6 years, 3 months ago

    @sehgalsunny My apologies for the late response. your snippet provided above did nothing to help the situation, and even if it had, it would have made all events an even 100px apart, instead of the variable spacing shown in your demo pictures. I’ve come up with a fix myself. See below

    /metabox.php
    lines 66 – 69

    
// Stop debug.log from filling to the brim with undefined index notices.
if(isset($_POST['_inline_edit'])){
    if (wp_verify_nonce($_POST['_inline_edit'], 'inlineeditnonce')) // KT - protect from custom fields clears while quick edit
    return;
}

    js/history.js
    lines 21 – 24

    
//assign a left postion to the single events along the timeline
var totWidth = setDatePosition(timelineComponents, eventsMinDistance);
//assign a width to the timeline
var timelineTotWidth = setTimelineWidth(timelineComponents, totWidth);

    lines 130 – 143

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

    lines 145 – 153

    
function setTimelineWidth(timelineComponents, width) {
    var divWidth = $('.cd-horizontal-timeline').css('width').replace(/[a-z]/ig, "");
    var totWidth = Math.max.apply(0, [width, divWidth]);
    timelineComponents['eventsWrapper'].css('width', totWidth+'px');
    updateFilling(timelineComponents['timelineEvents'].eq(0), timelineComponents['fillingLine'], totWidth);

    return totWidth;
}

    As you can see, I corrected the setDatePosition function to now create a fair distance between points, and return the last element’s final position plus the minimum width. From there I compare there total width returned from setDatePosition to the width of the parent div, and pick the maximum of the two for final width of the timeline.
    Maybe this only works for large time frames, maybe not. Either way, I hope you learn from this, and I’d recommend you review your math next time to put out an update.

    • This reply was modified 6 years, 3 months ago by ghudson. Reason: formatting and added another part I fixed, metabox.php
    • This reply was modified 6 years, 3 months ago by ghudson. Reason: More formatting
    • This reply was modified 6 years, 3 months ago by ghudson.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘The math needs some reviewing’ is closed to new replies.