Scriptaculous Slider: How Hard Is it To Do?

Hi, everyone.

I’m using FW Pro 5 and noticed the cool slider effect on the Script.aculo.us website. I’d like to incorporate that effect into my website so that visitors can “rate” the articles they read on my website. In other words, a user would read the article, then they would rate it using the slider feature and hit “submit” to have their rating added to all the other ratings of that article from previous readers.

I’ve got one of our programmers working on a Java script to do this right now, but I’m wondering if there’s an easier way to do it using Script.aculo.us.

Suggestions? Thoughts?

Thanks, Jamie

quote

It’s very simple to create the slider itself, all you need to do is draw a box for the “track”, nest another box inside it for the “thumb”, make sure that these elements have memorable names, and then apply the Protaculous action to the page.

http://freewaypro.com/actions/downloads/

Set the Library picker to “scriptaculous”. (Later, after you’ve debugged things, you can switch this to scriptaculous-packed for a really huge improvement in page load time.)

In the first Function Body code window, add the following script:

new Control.Slider('thumb','track', {});

replace ‘thumb’ and ‘track’ above with the actual IDs of the elements you drew in Freeway. Preview in a browser, and you should be able to slide the thumb along the track.

Not very useful in and of itself, so you will then need to add a callback function to send the updated value when the slider has been changed. Inside the curly-brackets in the above script, add this:

onChange: function(value){alert(value);}

And you should see a popup happen when the slider is released. There is also an onSlide event which updates in real-time, but that probably wouldn’t be useful in your context.

Your script could be extended to have the updated value sent straight to the server with an Ajax request, or pretty much anything else you can imagine doing. The alert() here is simply to show you what values are generated.

You can also set the thumb to any default value you like, and your script could be dynamically populated with the current value, so the slider shows what the current rating is before any sliding happens.

Walter

On Mar 31, 2008, at 11:26 AM, Jamie Turner wrote:

Hi, everyone.

I’m using FW Pro 5 and noticed the cool slider effect on the Script.aculo.us website. I’d like to incorporate that effect into my website so that visitors can “rate” the articles they read on my website. In other words, a user would read the article, then they would rate it using the slider feature and hit “submit” to have their rating added to all the other ratings of that article from previous readers.

I’ve got one of our programmers working on a Java script to do this right now, but I’m wondering if there’s an easier way to do it using Script.aculo.us.

Suggestions? Thoughts?

Thanks, Jamie

quote

Hi, Walt —

Thanks for your description on how to get the slide to work.

It took me a few days to get to this, so I apologize.

I’m having a little trouble getting it to work. When you say I should “nest” another box inside the first box, is there any special thing you mean by “nest”? I just drew another graphic box inside the first one and dropped the code into the Function Body window, but it doesn’t seem to be working.

Any thoughts?

Thanks, Jamie

quote

HI, Walt. I got the slider to work. Sorry about the false alarm.

I’m not sure if this made a difference, but I drew an HTML box instead of a graphic box. Plus, I dropped your code directly into it using your names instead of re-naming it.

Who knows why either of those worked, but they did.

I’ll keep plugging away.

Thanks, Jamie

quote

If you click on the header of the Site Panel in Freeway, it will change over to the Page Panel. When you do this, you should see a hierarchical representation of your page, kind of like Outline view in PowerPoint or the sidebar in Keynote.

When one box is nested inside another, it will indent to the right under the parent item. If you click and drag in the list, you can make this nesting happen.

Another way to accomplish this is when you are drawing the elements for the first time. If you click on the parent box so that it is selected, then choose the HTML box tool to draw a child box, you will see a blue glow outline on the first box, indicating that it is the parent item. As long as the child box is initially drawn entirely inside the bounds of the parent, it will remain a nested child of the parent. After you have released the mouse, you will be able to drag the bounds of that child outside of the parent, or you can use the Inspector’s dimension fields to set the height to be taller than the parent object.

Walter

On Apr 4, 2008, at 11:52 AM, Jamie Turner wrote:

Hi, Walt —

Thanks for your description on how to get the slide to work.

It took me a few days to get to this, so I apologize.

I’m having a little trouble getting it to work. When you say I should “nest” another box inside the first box, is there any special thing you mean by “nest”? I just drew another graphic box inside the first one and dropped the code into the Function Body window, but it doesn’t seem to be working.

Any thoughts?

Thanks, Jamie

quote

I tried to create this and am coming up with nothing. I assume the track box is and HTML box.

Here is what I have:

http://reeltimedvd.com/slider/

I really want the sliding action of the Scriptaculous example on the Softpress website. I’m not sure if this will do that.

Thanks.

quote

Can you post a link to the page you mean? You might be wanting my Carousel Action effect. Slider means something very specific in Script.aculo.us — it’s either the effect you get with a Finder window when the elements don’t all fit in the window area or a way to set a numerical value by sliding a “thumb” along a track — you move the slider, and the contents scroll or the number changes.

Walter

On Sep 5, 2008, at 3:22 PM, george wrote:

I really want the sliding action of the Scriptaculous example on the Softpress website. I’m not sure if this will do that.

quote

Sorry, just double-checked, and Slider in Script.aculo.us means only an on-screen control that you slide to change a numerical value.

The thread that you saw the slider in shows one use of this control — to change a value that the user will submit through a form.

Here’s another thread that explains another thing you can do with it:

http://freewaytalk.net/thread/view/27309

But if you want to make a part of your page scroll automatically, then there’s the Carousel which is documented here:

http://scripty.walterdavisstudio.com/carousel

Walter

On Sep 5, 2008, at 3:43 PM, Walter Lee Davis wrote:

Can you post a link to the page you mean? You might be wanting my Carousel Action effect. Slider means something very specific in Script.aculo.us — it’s either the effect you get with a Finder window when the elements don’t all fit in the window area or a way to set a numerical value by sliding a “thumb” along a track — you move the slider, and the contents scroll or the number changes.

Walter

On Sep 5, 2008, at 3:22 PM, george wrote:

I really want the sliding action of the Scriptaculous example on the Softpress website. I’m not sure if this will do that.

quote