Simile Widget Timeline Disable Scroll ( Mousewheel + Drag )

[Pierre-Henri Lavigne]

Good day all,

I'm looking for a way to disable completely the scroll function for an horizontal timeline.

After reading the API, I succeeded to generate a "date pagination" using .getMinVisibleDate() && .setMinVisibleDate().

I would like to disable this scroll because I am gonna adding some custom html manually sometimes for some items.

Is there any way to do it in a simple way ? Or any kind of trick like changing min / max date after setting the minVisibleDate ?

Thank you for your help,

Peter

[Michael Nosal]

You can set timeline_start and timeline_stop in the theme for your bandInfo. These are the dates which will stop the timeline from scrolling past. This is useful if the user shrinks the window and you still want them to be able to get to everything in a range of dates. You can update these values dynamically if you need to let the user scroll.

If you wish to disable and prevent *all* horizontal scrolling in the timeline widget, simply do:

Timeline._Band.prototype._moveEther = function(shift) {}

and all scrolling is disabled.

--Mike

--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To view this discussion on the web visit https://groups.google.com/d/msg/simile-widgets/-/ShEMxI0zR68J.
To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.

[Steve Pai]

Is that a variable for theme? e.g.,

var theme = Timeline.ClassicTheme.create();

theme.timeline_start = "Jan 1 2000 00:00:00 GMT";

[Michael Nosal]

Yes, they are attributes of the theme object.

--Mike

[Steve Pai]

Have you heard of any reports of not being able to scroll left (back in time) after setting theme.timeline_start?

I am hitting this issue in both Safari and Firefox.

[Jeff Roehl]

Does anybody know how to draw a line (hopefully red) vertically through the timeline? 

The line would not move with the timeline but would remain centered on the center date (the visible center). 

This would be used, when synchronizing 2 or more timelines, for comparison purposes, of their shared centered dates, as the 2 or more timelines scroll though time. 

Thanks
Jeff Roehl
jro...@yahoo.com
(818) 912-7530

[Jeremy Boggs]

On May 23, 2012, at 6:43 PM, Jeff Roehl wrote:

> Does anybody know how to draw a line (hopefully red) vertically through the timeline?
>
> The line would not move with the timeline but would remain centered on the center date (the visible center).

You can do this with CSS, using the :after pseudo selector. This worked for me on a test timeline:

.timeline-container:after {
content: "";
position:absolute;
top:0;
left: 50%;
width: 2px; /* However thick you want the line to be. */
margin-left: -1px; /* Half the width, to put the line in the exact center. */
height: 250px; /* However tall your timeline container is. */
background-color: red;
z-index:1000; /* Ensures the line shows above other timeline content. */
}

You could probably also just add an extra div to the timeline's container and style it like this, if you need to support IE 7 and earlier (which doesn't support the :after pseudo selector).

Best,
Jeremy

[Jeff Roehl]

Wow, I wasent even expecting a comment on this.

I cant wait to try this in the morning.

Design Architect for Digital Research? This sounds interesting.

I cant wait to show you what I am doing with the timeline.

Do you have a private email address?

 

Thanks
Jeff Roehl
jro...@yahoo.com
(818) 912-7530

---

From: Jeremy Boggs <jer...@clioweb.org>
To: simile-...@googlegroups.com
Sent: Wednesday, May 23, 2012 5:47 PM
Subject: Re: [Simile-Widgets] Center visible date line in a timeline

--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To post to this group, send email to simile-...@googlegroups.com.

To unsubscribe from this group, send email to simile-widgets+unsub...@googlegroups.com.

[Jeff Roehl]

In the centering algorithm, is there any way to use the Centerdate() function instead of   left: 50%; ?

[Derek J. Balling]

On May 23, 2012, at 2:11 PM, Michael Nosal wrote:

> You can set timeline_start and timeline_stop in the theme for your bandInfo. These are the dates which will stop the timeline from scrolling past. This is useful if the user shrinks the window and you still want them to be able to get to everything in a range of dates. You can update these values dynamically if you need to let the user scroll.

Is there an example of this somewhere? I can't seem to make it work right.

D

[Derek J. Balling]

Wow, that would be a really nice feature, come to think of it.

D

[Derek J. Balling]

If I set theme.timeline_start and theme.timeline_stop, I can't scroll at all.  [Chrome] :-/

D

[Jeff Roehl]

The following code may actually work. I haven't tried it yet.

The problem I think I may run into is that it is based on half the distance, in pixels, of the parent <div> (divwidth/2).

And I dont think this is the actual center date of the timeline. And it has other issues like when a window is re-sized.

It becomes even more problematic when you have 3 different timelines stacked on top of each other in a browser window.

We have written a timeline operating system that allows you to place an unlimited number of synchronously scrolling timelines in a single browser window. Although placing more than 4 timelines in one window, that scroll, center date, with each other, seriously degrades the browsers performance (Chrome is the best performer here).

With the following code, their (width/2) may not correspond to the exact same date/time.

I dont really care whether the lines exactly line up, visually, vertically. What I do want is that if I have 3 timelines stacked on top of each other. And I scroll timeline #1's vertical line to say Dec 2, 1941, the other timelines (#2 and #3) will have their vertical line scroll to the exact date of the Pearl Harbor attack, so I can see, with all accuracy, what was going on in other timelines, on that exact date.

Extra points for the line to be placed at the exact same time of the day.

I am all down to spending whatever resources I have to help come up with a solution to this new feature. I am available 24/7 to help work/test/debug this.

.timeline-container:after {
  content: "";
  position:absolute;
  top:0;
  left: 50%;
  width: 2px; /* However thick you want the line to be. */
  margin-left: -1px; /* Half the width, to put the line in the exact center. */
  height: 250px; /* However tall your timeline container is. */
  background-color: red;
  z-index:1000; /* Ensures the line shows above other timeline content. */
}

****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************

And we know the following CSS has its problems, as detailed above.

I have tested this and can attest to its problems. Try it for yourself, rinse and repeat.

.sync {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: red;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    display: block;
    height: 100%;
    margin-left: 49%;
    opacity: 0.2;
    position: absolute;
    width: 3px;
    z-index: 5000;}

 

Thanks
Jeff Roehl
jro...@yahoo.com
(818) 912-7530

---

From: Derek J. Balling <dr...@megacity.org>
To: simile-...@googlegroups.com
Sent: Wednesday, May 23, 2012 3:44 PM

Subject: Re: [Simile-Widgets] Center visible date line in a timeline

[Steve Pai]

Yeah same issue here with safari and Firefox. Setting timeline_start alone allows you scroll forward in time, but not back. Setting timeline_start and timeline_stop halts scrolling altogether. 

Steve @ iPhone

[Michael Nosal]

If you set .timeline_start, you should also set .timeline_stop as well, or set stop to a date far in the future.
I've noticed buggy behavior if I specify start and stop is null. I've tested on Chrome/Mac with Timeline 2.3.1 and it is working as expected.

It should look like this:
var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 320;
theme.event.bubble.height = 220;
theme.timeline_start = new Date("Jan 1 1840");
theme.timeline_stop = new Date("Jan 1 1950");

--Mike

[Steve Pai]

Thanks for the response Mike! That worked. 

At first I was using this form for start/stop:

theme.timeline_start = "Jan 1 2000 00:00:00 GMT";

Then switched to this per instructions in the wiki

theme.timeline_start = new Date(Date.UTC(2000,01,01));

Both of which caused the issues I described previously. Should have just kept it simple :)

steve

[Michael Nosal]

Right, the value needs to be a Javascript Date object, not a string.
--Mike

[getphuture]

Mike, and everyone, thank you for the help. After playing with the api too, in my case I did the following:

<script src="/ajax/simile-ajax-api.js" type="text/javascript"></script>

<script src="/api/timeline-api.js" type="text/javascript"></script>

<script type="text/javascript">

// Looks like disable Original Bubble

http://www.simile-widgets.org/wiki/Timeline_CustomEventClickHandler

Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {};

// Looks like disable Mouse Wheel & Mouse Drag

Timeline._Band.prototype._onMouseScroll = function( innerFrame, evt, target ) {}; 

Timeline._Band.prototype._onMouseMove = function( innerFrame, evt, target ) {};</script>

</script>

And everything works well ! I can jump from months with my custom links, set position as I want, and disable scroll / drag capabilities

Thanks again !

[Josh Korn]

Guys:

For some unknown reason, I can only get timeline_start and timeline_stop to work properly if the dates are of the form

 theme.timeline_start = new Date("Jan 1 2000 00:00:00 GMT-0500").

Using plain strings, or even Date.UTC (like Steve, above) caused all scrolling to stop completely.

I don't really have the time to dig into the code to find out why, but it seems like the date format for timeline_start and timeline_stop has to match the formats use for the zones and hotspots. In other words, it looks like the scrolling code doesn't use a standard internal format for dates when handling timeline_start and timeline_stop -- but that's just speculation so far.

Josh