Comments (4)
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.
Related Issues (20)
- chap links timeline customisation HOT 3
- Start and group after double click HOT 7
- Timeline - Wrong item top position with empty group HOT 3
- Network - How can I fire an event on node/link selection HOT 1
- Timeline - Set custom time with click HOT 2
- Can't scroll vertically when on mobile HOT 1
- (timeline) fix top and group axis left to scroll down with touch - Question HOT 12
- zoomin and zoomout feature not working in chaps link library timeline slider HOT 1
- On executing draw/redraw the slider not rendering after first time calling the draw method of chaps link library timeline. HOT 1
- 1 month offset in timeline HOT 2
- Destroy method for timeline
- Drag and Drop from external events
- Time limit
- Input textbox not working.
- Timeline "isSelected" and "unselectItem" don't work with clusters
- Can't load graphs while running GWT projects, but it runs with JS version
- graph3d.js enhancements HOT 1
- Stacking not always working
- B.C. Dates possible?
- Keep -dump output pristine
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chap-links-library.