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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options