Timeline: getTarget about chap-links-library HOT 4 CLOSED

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);
// ...

from chap-links-library.

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.

from chap-links-library.

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).

from chap-links-library.

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

from chap-links-library.