Support » Plugin: Timeline History » Timeline width

  • Resolved giuliamemole

    (@giuliamemole)


    I have inserted the timelin on this page, but the bar does not occupy the full width of the page, and the years 2012 and 2016 should be much closer to the end of the bar on the right.
    What can I do?

    The page I need help with: [log in to see the link]

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

    (@sehgalsunny)

    Please input date uniquely for every post.

    Plugin Author sehgal.sunny

    (@sehgalsunny)

    Hi @giuliamemole,

    Use below code in your footer.php.

    <script>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>
    • This reply was modified 2 years, 8 months ago by sehgal.sunny.
    Thread Starter giuliamemole

    (@giuliamemole)

    Hi @sehgalsunny I insert the code, but it doesn’t work very well. As you can see at http://umbrapakaging.e21.it/azienda/ the timeline it is not long enough.

    Plugin Author sehgal.sunny

    (@sehgalsunny)

    Hi @giuliamemole,

    Replace above code with this:

    <script>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*160+'px');
    }
    });</script>
    Thread Starter giuliamemole

    (@giuliamemole)

    Hi @sehgalsunny I also tried this code but it does not work well, ad you can see at http://umbrapakaging.e21.it/azienda/.
    It’s also possible to hide prev e next buttons?
    Thanks!

    Plugin Author sehgal.sunny

    (@sehgalsunny)

    Add this css

    ul.cd-timeline-navigation {
        display: none;
    }

    By this both prev and next button would be hide.

    Thread Starter giuliamemole

    (@giuliamemole)

    Hi, I insert the php code and the css code, but the line is still too short.

    Plugin Author sehgal.sunny

    (@sehgalsunny)

    Hi @giuliamemole,

    Put This CSS it will work:

    section.cd-horizontal-timeline.loaded .events {
        width: 100% !important;
    }
    • This reply was modified 2 years, 7 months ago by sehgal.sunny.

    I also have a problem with the width of the timeline. the width is fixed at the moment with div class="events" style="width: 17220px;"> I already have the workaround in the css with width: 100%! important; but that seems to be ignored. I also have the problem that I can press after the last entry even further to the right and the bar is not properly colored. Is there a solution for this? my used code befor </body>: `<script>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*160+’px’);
    }
    });</script>`

    https://1drv.ms/f/s!ArZsNBBIhcNfjTiiz3zjuleyNbBR

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Timeline width’ is closed to new replies.