1

I am trying to embed a timeline on a web site and I have the following problem: The TimelineJS doesn't seem to work when the containing div is nested in another div. To avoid this problem I have created an iframe and put the entire timeline into another .html file which works fine for displaying the timeline. Now, I want to filter in and out some timeline content based on category selection made by the user. If the external html containing the timeline calls timeline.js to load the content, and the category selection event handling is done in a index.js file called by the index.html (which contains the iframe and other elements) how can I call the reload function in timeline.js if the events are being handled in the index.js? In other words, how can my index.js know anything about timeline.js, call a method defined in that file and still have the changes applied to the content of the timeline.html?

I am pretty new to javascript and I seem to miss quite a bit of information required to solve the problem.

mobearette
  • 377
  • 10
  • 26

1 Answers1

0

I had the same issue and didn't find a solution.

I finally tried another approach :

1°) Put the timeline directive (my project uses AngularJS) into a view 'views/timeline.html'

<div id="my-timeline" timeline-js data="timelineData" height="height"></div>

2°) Include this view in the main view

<div ng-include="url"></div>

3°) Reload the include each time you need in the controller, and change the url to 'forget' the old data

var newUrl = function() {
    $scope.url = null;
    var ran = Math.random();
    $scope.url = 'views/timeline.html?r='+ran;
};

I'm aware it's far to be perfect in terms of memory, but it's all I found

Gullfaxi171
  • 213
  • 2
  • 15