Timeline: getTarget

[Zolrag]

Hi,

I would like to get the css position of a selected item on the timeline. I have added a listener for the select event. It seems that the only function that I can use to obtain this position is the getTarget(event) function which returns the HTML object. However, I am not sure that I understand correctly getTarget(event). I tried the following approach without success:

 function select(){
  var sel = timeline.getSelection();

  if (sel.length) {
    if (sel[0].row != undefined) {
      var row = sel[0].row;
      var target = timeline.getTarget('click');
      ...
    }
  }
 }

Any idea on solving this problem?
Thank you in advance

[josdejong]

getTarget is a generic method, giving a cross browser solution for getting the target from a browser event. It is meant as a private method for use inside the Timeline. (there is currently no clear separation between private and public methods, but you will see that this method is not described in the docs).

The html elements of the Timeline itself are "hidden" from the outside. If you need the position of an item, you can enclose your own HTML element in the content of a Timeline item, and retrieve the position of this element. Something like this (JSON variant):

var data = [
    {
        'start': new Date(2012, 8, 25),
        'content': '<div id="item0">Item 0</div>'
    },
    {
        'start': new Date(2012, 8, 26),
        'content': '<div id="item1">Item 1</div>'
    },
    // ... more data
];

And inside your select event listener:

// ...
var row = sel[0].row;
var elem = $('#item' + row);
var offset = elem.offset();
console.log('item ' + row + ' selected, left:' + offset.left + ', top: ' + offset.top);
// ...

[Zolrag]

Thank you for your reply.

I found out that an HTML classname 'timeline-event-selected' is added to the element being selected which allowed me to find its position. I added a listener on 'rangechange' so that my new element can follow the one being selected but it does not work well when applying a drag event on the timeline. The position of my new element is updated only at the next drag event, so following one step behind. Scrolling works well though except when scrolling really fast my new element is somewhat left behind.

[josdejong]

Glad you have a solution. Anyway, alternatively, you could insert some HTML+JS+CSS in the Timeline events, and really attach your floating element to a Timeline event (not needing to adjust the position via event listeners using javascript).

[Zolrag]

Sounds good I'll have a look into that as soon as possible
Thanks again for your help :-)