Timeline: Sizing the popup bubble

espressoguy

unread,

Jun 11, 2011, 5:09:31 PM6/11/11

to SIMILE Widgets

Timeline Problem:
I've noticed that if an event is clicked and there is lots of
descriptive text associated with that event, the popup bubble will not
stay open for more than about a second. This occurs when the user's
computer screen is so small that there's not enough room for the tall
popup.

Question:
I've seen discussion in this group about sizing the popup
bubble. What's the best/easiest way to do this?

Vincent Vazzo

unread,

Jun 22, 2011, 4:19:06 PM6/22/11

to SIMILE Widgets

You can specify the bubble size in the Timeline Initialization file:

E.g:

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 450;
theme.event.bubble.height = 350;

Jeff Roehl

unread,

Jun 22, 2011, 4:40:41 PM6/22/11

to simile-...@googlegroups.com

Is there any way to make 2 seperate timelines, in 2 different <div> tags scroll
simultaneously?

I know how to make separate bands scroll in unison, this is a given.

Are there any examples out there?

Thanks
Jeff Roehl

Jeff Roehl

unread,

Jun 22, 2011, 4:49:13 PM6/22/11

to simile-...@googlegroups.com

One thing I need to do is send:

tl.getBand(0).band.getCenterVisibleDate();

Back to the back-end in a <form> post. This way I can keep the timeline at the
same location it was when the data was posted. So the user doesn't have to
constantly be scrolling back to the place they where before.

I tried the following, but it doesn't work:

Am I messing up the syntax here?

Thanks
Jeff Roehl

Michael Nosal

unread,

Jun 22, 2011, 5:20:42 PM6/22/11

to simile-...@googlegroups.com

You want to attach a handler to each timeline to scroll the other.

Here's a simple case of two timelines, tl_a and tl_b:

tl_a.getBand(0).addOnScrollListener(function(band) {
var centerDate = band.getCenterVisibleDate();
tl_b.getBand(0).setCenterVisibleDate(centerDate);
});

tl_b.getBand(0).addOnScrollListener(function(band) {
var centerDate = band.getCenterVisibleDate();
tl_a.getBand(0).setCenterVisibleDate(centerDate);
});

When the user scrolls the first band in timeline A, the first band in timeline B will be set to the same date, and vice-versa.

If the timelines contain more sync'ed bands, then those will scroll as well.

--Mike

> --
> 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-widget...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
>

Michael Nosal

unread,

Jun 22, 2011, 5:53:48 PM6/22/11

to simile-...@googlegroups.com

getBand(0) returns a Band object. You call getCenterVisibleDate on that which returns a Javascript Date object.
You will need to convert that to a string before it can be sent back to the server.

It should be like this:

tl.getBand(0).getCenterVisibleDate().dateFormatAsString()

where dateFormatAsString is a function that takes a Javascript Date object and returns a string like:
"2011-06-23T12:34:00" or whatever format you need to send to your server.

There are many date-formatting libraries available for Javascript. See the DateJS library at: http://www.datejs.com
It has a formatter called .toISOString() which does exactly this.

Since you are submitting via POST rather than GET in your form, you shouldn't be adding parameters to the form's action attribute. Rather, you should be using the form's element values themselves as the data for the post. Include a <input type="hidden" name="center" id="center" value=""/> in your <form>.
Add a scroll listener to automatically update the hidden input anytime the user scrolls:

tl.getBand(0).addOnScrollListener(function(band) {
var centerDate = band.getCenterVisibleDate();
document.getElementById("center").value = centerDate.dateFormatAsString();
});

--Mike

On Jun 22, 2011, at 4:49 PM, Jeff Roehl wrote:

> One thing I need to do is send:
>
> tl.getBand(0).band.getCenterVisibleDate();
>
> Back to the back-end in a <form> post. This way I can keep the timeline at the
> same location it was when the data was posted. So the user doesn't have to
> constantly be scrolling back to the place they where before.
>
> I tried the following, but it doesn't work:
>
>
> <form method="post"

> action="tl3.fwx?todo=editparagraph¶=FHE2V0O81&tl=Y95CC1A21&center="

Jeff Roehl

unread,

Jun 23, 2011, 6:15:10 PM6/23/11

to simile-...@googlegroups.com, Ryan Lee

>Add a scroll listener to automatically update the hidden input anytime the user
>scrolls:
>
>tl.getBand(0).addOnScrollListener(function(band) {
> var centerDate = band.getCenterVisibleDate();
> document.getElementById("center").value = centerDate.dateFormatAsString();
>});

*****************************************************************************
Where do I put the ScrollListener?

I have put it at the bottom of the onload function, per the following. Is this
correct?
*****************************************************************************

tl.getBand(0).addOnScrollListener(function(band) { var centerDate =
band.getCenterVisibleDate(); document.getElementById("center").value =
centerDate.dateFormatAsString(); });

Thanks
Jeff Roehl

Michael Nosal

unread,

Jun 24, 2011, 10:07:55 AM6/24/11

to simile-...@googlegroups.com, Ryan Lee

Yes, you want to add the OnScrollListener to the band after the timeline has been created.
You also have a trailing comma after the definition of the zone in the second HotZoneBandInfo:
...

magnify:5,
unit:Timeline.DateTime.YEAR}, ],

Trailing commas inside array definitions like this },] cause Internet Explorer to choke and fail. Avoid them because they are very difficult to find by visual inspection, and cause IE to fail spectacularly without any sort of helpful error message.