customize timeSlider dijit layout

[DerekMiller]

Hello All,

I'm trying to customize the timeSlider dijit.

In the timeSlider.js file loaded by the dijit, the dijit creates a 4 column table in the parent div. From left to right, these columns represent the play/pause button, the slider, the previous button, and the next button.

I need to get a handle on the previous and next buttons. Unfortunately, the <td> html programmatically created from TimeSlider.js contains inline style attributes and is not assigned an ID nor class, so I have been unsuccessful via CSS.

Thoughts, anyone?

Thanks.

[StephenLead]

Hi Derek,

It's been a few years since I looked at this, but here's a map I worked on which includes a customised time slider: http://atlas.nsw.gov.au/public/nsw/home/map/elections.html

I can't remember exactly how we handled the styling, but you may be able to reverse-engineer it?

Steve

[DerekMiller]

Thanks, Stephen.

Nice app. I actually came across that while browsing the forums earlier.

The style attribute that I'm trying to get ahold of is unchanged in your app, however. It's the spacing between the previous & next button, controlled by the inline html below (I pulled that out of your page html using Chrome DevTools):

[ATTACH=CONFIG]20979[/ATTACH]

The style of your timeSlider looks nice. Your images are wider, and hence the space between the two is not an issue.

Bit of a problem on mine, however (vertical alignment is messed up in Firefox as well, hadn't noticed): http://www.portlandbps.com/gis/solar/index.html

I'm going to dig into your app a bit more and see if anything shakes out. I'm afraid I won't be able to overcome inline style attributes in the HTML, however.

Thanks for the response. Appreciated.

Cheers.

- d

[StephenLead]

I'm afraid I won't be able to overcome inline style attributes in the HTML

Oh well, what you've got looks great anyway 😉

[DerekMiller]

Thanks.

Cheers.

- d