0

Friend of mine needs help with some JavaScript, and since I know a little bit (little), I decided to help him. I'm drawing a blank on this one, though.

Using script.aculo.us to create a multi-slider. I've sort of got the sliding handles to work. They move left and right! Anyway, when each handle is put into position, I need to have a preview field display the text that corresponds to the location of the two handles.

There's a demo video he provided me:

http://www.youtube.com/watch?feature=player_embedded&v=D0V4P8q5G-E

And then he gave me a zip archive with the HTML and CSS. I got the JavaScript files from the script.aculo.us website.

Anyway, here's what I have so far:

http://dnescripts.com/slider/

Could anyone assist or point me in the right direction to have it behave as seen in the demo video? It would be greatly appreciated.

Skryn
  • 155
  • 3
  • 12

1 Answers1

0

That looks pretty cool. So far, so good!

You need to wrap each character in the sample text in a <SPAN>, then calculate the x-position of each SPAN (run it at LOAD and put the values in an array). Then you need to compare the pointer position to the x-positions of the characters. You'll need to round them to "snap" to the next position. From there you should know the starting and ending spans, and the associated text in-between.

Using a mono-spaced font would make off of this much easier. You could then just use pre-defined ranges and stops for the slider.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176