I have a "temporary" solution by modifing the loadData() function
function loadData(){
window.scrollTo(0,0);
var da = tl.getBand(1).getCenterVisibleDate();
loadData3(da);
}
But still see the scroll movement to the middle and after back to top
On Oct 5, 9:40 am, Belfo <[email protected]> wrote:
> Noone have the same problem?
>
> Just to clarify, the page go to the "vertical" center when scrolling.
> not the horizontal one.
>
> I can't put the example online as he use a local DB. But the JS code
> is :
>
> var tl;
> var eventSource = new Timeline.DefaultEventSource(0);
> var eventSource2 = new Timeline.DefaultEventSource(0);
> var listOfDate = new Array();
> var workHour = new Array();
>
> function isset (variable) {
> return (typeof variable != 'undefined');
> }
>
> function setDateAsLoaded(date){
> listOfDate[date]=true;
> }
>
> function isDateLoaded(date){
> return isset(listOfDate[date]);
> }
>
> function loadData3(timeline_date){
> var i=0;
> for (i=-2;i<=2;i++){
> var date = new Date(timeline_date);
> date.setDate(date.getDate()+i);
> var day = date.getDate();
> var month = date.getMonth();
> var year = date.getFullYear();
> var d = year+'-'+month+'-'+day;
> if(!isDateLoaded(d)){
>
> setDateAsLoaded(d);
> if(date.getDay()==0 || date.getDay()==6){
> var startDate = new Date(date);
> startDate.setHours(0);
> startDate.setMinutes(0);
> startDate.setSeconds(0);
> var endDate = new Date(date);
> endDate.setHours(23);
> endDate.setMinutes(59);
> endDate.setSeconds(59);
> var decorator = new
> Timeline.SpanHighlightDecorator({
> startDate: startDate ,
> endDate: endDate,
> cssClass: 'timeline-ether-weekends'
> });
> tl.getBand(1)._decorators.push(decorator);
> decorator.initialize(tl.getBand(1), tl);
> decorator.paint();
> }
> else{
> var startDate = new Date(date);
> startDate.setHours(8);
> startDate.setMinutes(0);
> startDate.setSeconds(0);
> var endDate = new Date(date);
> endDate.setHours(17);
> endDate.setMinutes(0);
> endDate.setSeconds(0);
> var tmp = new Array();
> //not working
> tmp['startTime']=startDate;
> tmp['endTime']=endDate;
> tmp['magnify']=10;
> tmp['unit']=Timeline.DateTime.HOUR;
> workHour.push(tmp);
> var decorator = new
> Timeline.SpanHighlightDecorator({
> startDate: startDate ,
> endDate: endDate,
> cssClass: 'timeline-ether-workhours'
> });
> tl.getBand(1)._decorators.push(decorator);
> decorator.initialize(tl.getBand(1), tl);
> }
>
> tl.loadJSON("test.php?d="+day+"&m="+month
> +"&y="+year, function(json, url) {
> eventSource.loadJSON(json, url);
> tl.layout();
> tl.paint();
> tl.finishedEventLoading();
> });
> }
> }
>
> }
> function onLoad() {
> var theme1 = Timeline.ClassicTheme.create();
> theme1.autoWidth = true;
> theme1.mouseWheel = "default";
> var bandInfos = [
> Timeline.createBandInfo({
> overview: true,
> width: "10%",
> intervalUnit: Timeline.DateTime.WEEK,
> eventSource: eventSource2,
> theme: theme1,
> intervalPixels: 50,
> timeZone: +2
> }),Timeline.createHotZoneBandInfo({
> width: 300,
> intervalUnit: Timeline.DateTime.DAY,
> eventSource: eventSource,
> zones: workHour,
> theme: theme1,
> intervalPixels: 900,
> timeZone: +2
> })
> ];
> bandInfos[0].syncWith = 1;
> bandInfos[0].highlight = true;
> tl = Timeline.create(document.getElementById("tl"),
> bandInfos);
>
> tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime
> (new
> Date()));
> tl.loadJSON("test.php", function(json, url) {
> eventSource2.loadJSON(json, url);
> tl.finishedEventLoading();
> });
> loadData();
> var topBand = tl.getBand(1);
>
> tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime
> (new
> Date()));
> topBand.addOnScrollListener( function(band) {
> if (band._timer !== false) {
> window.clearTimeout(band._timer);
> band._timer = false;
> }
> band._timer = window.setTimeout(loadData,1000);
> } );
> }
>
> function loadData(){
> var da = tl.getBand(1).getCenterVisibleDate();
> loadData3(da);
> }
>
> var resizeTimerID = null;
> function onResize() {
> if (resizeTimerID == null) {
> resizeTimerID = window.setTimeout(function() {
> resizeTimerID = null;
> tl.layout();
> }, 500);
> }
> }
>
> <div id="tl" style=" border: 1px solid #aaa; height:200px; "> </
> div>
>
> Up to 500 evets on a single day (all beetween 8 and 16 ).
>
> On Sep 27, 10:28 am, Belfo <[email protected]> wrote:
>
>
>
>
>
>
>
> > Hello,
>
> > i'm trying timelito to use in a project to show log activity. Every
> > day lot of log a present, so i put the timeline to be autowidth. (i
> > also put the mouse wheel scroll to default)
> > This work no problem.
>
> > But i have a strange effect. when i move on the band with the mouse,
> > and release the button (to stop moving) the page automatically go to
> > the horizontal center of the band and this also if in the showed
> > portion events not go down to the end. This is quite annoying.
> > Is there a solution?
>
> > Thanks
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
