squarechip / timeline Goto Github PK

isElementInViewport is never true if element is bigger than viewport.

This problem is especially acute when viewing a vertical timeline in a mobile device on landscape. You can also reproduce this problem on a desktop browser by lowering the height of the window to less than the height of the item.

I think one way to solve this problem is by having a timeline item show up when the top of the item reaches a certain percentage of the page, as an additional trigger.

Hi,

I created an org-mode plugin for this library here (https://github.com/jjuliano/org-simple-timeline).

Thanks for your library,
~ Joel

Someone with challenge?

If i place timeline div inside <div class="modal-body"> of Bootstrap 3 Modal and set mode to horizontal - it's not showing any content. If I leave default options - vertical timeline shows just fine.

Can you please address this issue. I really love this simple timeline plugin and I need to use it in Bootstrap Modals.

Hi
in mobile browser when you come in or out of timeline section timeline reloading and cause one or couple flashing , how fix this?

I am building a website with box-sizing as suggested here: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/, I believe this is also whats used in many css frameworks.

This changed the box-sizing property of before and after pseudo elements in timeline from content to border-box. Its' an easy fix on my end, but I believe adopting inheritance for box-sizing and doing so also for pseudo elements is good in the long run for timeline.

Setting the box-sizing property of all elements and pseudo elements by inheritance within timeline to border-box will solve two problems:

• Drop in support for box-sizing: inherent users, without breaking anyone else.
• Allow any box-sizing property to be easily used for user contents inside timeline.

Hello,

I'm trying to use the plugin and was follow the instructions, then I got this error when try to use the plugin in horizontal mode.

Uncaught TypeError: Cannot read property 'offsetLeft' of undefined
    at c (timeline.js:291)
    at r (timeline.js:329)
    at timeline.js:391
    at Array.forEach (<anonymous>)
    at s (timeline.js:381)
    at timeline (timeline.js:403)
    at HTMLDocument.<anonymous> (controle-jornada:25)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at Function.ready (jquery.js:2)

Hello,

i just tried to you this plugin to display multiple timeline in 1 modal, if i only display timelines it works, but when i put those timeline in Accordion to make UI more user friendly, only first timeline is properly displayed rest are not. The HTML elements are still there and can be found with inspector but they are not displayed correctly.

Any idea how to fix this or what might be the problem?

Thank you.

Hello,

im having quite some trouble using your repo.
I try to use this together with webpack and Vue.js.
A few things would make my life (and others) easier.

First: Your package.json references an index.js which simply does not exsist. So its difficult to import you repo with a package manager.

Second: If you could implement an index.js and make it export a module (MDN Doku) it would be possible to use this repo with ease.

I'll try to find time and implement this myself to close this Issue.

Can you make drag gesture feature to move item please? It will be great for mobile phone user experience

Hey, i found a problem. If i put multiple timelines in bootstrap accordion only 1 timeline get displayed.

If multiple timelines are added in modal directly it works but when i add them into accordion only first one gets displayed rest dont load.

Any idea why?

Thank you.

Consider that, i have a horizontal timeline that can shows 3 items and if i add more item, the scroll buttons will appear.
If i add 1 or 2 item (lesser that visible area for timeline) this error will raise:

Timeline: The 'startIndex' setting must be between 0 and -1 for this timeline. The value of -1 has been used instead. timeline.min.js:7:8548
TypeError: e.items[o] is undefined timeline.min.js:7:2067

I used this code to initialize:
$('.timeline').timeline({ mode: 'horizontal' });

and to add items:

<div class="timeline" data-start-index="0">
                    <div class="timeline__wrap">
                        <div class="timeline__items">
                              <div class="timeline__item">
                                <div class="timeline__content">
                                    <p>item 1</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <p>item 2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Good morning, I am using this plugin for a somewhat particular timeline. The timeline will only appear in mobile version.

I wanted to ask if it was possible to make the elements one on the left and one on the right as in the desktop version.

I send an example screen of how it should result in finished work

Uncaught TypeError: Cannot read property 'offsetLeft' of undefined
at c (timeline.min.js:7)
at a (timeline.min.js:7)
at timeline.min.js:7
at Array.forEach ()
at r (timeline.min.js:7)
This error only appears in a horizontal timeline. I need some expert advice. Thank you.

Hello,

thank you for you great timeline!
I would like to have the view port starting from the middle of my timeline content.
So the navigation arrows will be both enabled just from beginning, not just the right one.
Is that possible?

Thank you & Best regards

Hello,

I have checked this slider but my requirement is slider will slider automatically. so it will be great to add by you so the plugin is very helpfull to use for me and most of the other users as well.

i wanted to make a right to left timeline so i picked your plugin . i tried but i think its not an rtl friend yet? thanks bro

Hi,

I am using the horizontal time line and in that I tried to set the forceVerticalWidth to value 800 but when the viewport reduces to less than 800 the vertical timeline isn't forced. It works only at 600.

While scrolling there are white parts on either the top or bottom of the page depending on the scroll direction.

When having the timeline in RTL mode, I noticed that the first item gets cut off in the timeline. If you click the button to go left and then back right, it has no issue. It only happens on page load.

It seems to me like the issue is in position in timelinePosition(). I noticed that on page load, the position value is 1599, but if you click left and then back right, the position value is 1572. How do we get, in my case, the position value to be 1572 on page load?

I want to use the script to visualize the process of an approval. But with less than 3 elements the script has problems displaying the timeline. Nothing is displayed.
Update: Happens only in horizontal mode

Hi, I'm using the horizontal timeline with a mysql database feeding the events into a php template . If I set the visible items to 6 and there are only 4 events so far, the timeline doesn't show. Could there be a fix for this where the visible items is a maximum and not a minimum number?
Thanks,
Mike

How to solve this issue please...every single row are in the same sizes now.

Here is my database:
iframe_video | varchar(200) | utf8_general_ci |   | Yes | NULL |

Here is my code to php:

<div class="panel-body timeline-body">
                <div class="timeline">
                <div class="timeline__wrap">
                <div class="timeline__items">
                   <?php 
                   foreach($result as $row)
                   {
                   ?>
    <div class="timeline__item">
    <div class="timeline__content">

                    <h2><?php echo $row["year"]; ?></h2>					 
                    <p><?php echo $row["comment"];?></p>
                    <p><a href="<?php echo $row["website"];?>"><?php echo $row["Site_Description"];?> 
                           </a></p>							 
                    <div class="resp-container">
                    <iframe class="resp-iframe" src="<?php echo $row["iframe_video"];?>" frameborder="0" 
                   sandbox="allow-same-origin allow-scripts" allowfullscreen="allowfullscreen"></iframe>
                    </div>
					 						 							 
        </div>
        </div>					   	 				   
                   <?php
                   }
                   ?>
                   </div>
                   </div>
                   </div>
</div>

Here is the link: https://donpramis.com/timeline/