Scroll box

duotone · February 13, 2008, 1:32pm

How do I create a scrolling box like the one here:

Thanks!

Tony

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

waltd · February 13, 2008, 3:52pm

They are using Prototype and Scriptaculous for this, it’s the
Control.Slider and Effect.ScrollTo specifically. I’ll see if I can
make a simplified example later. It should be possible to add this to
a Freeway page with the Protaculous Action and a certain amount of
hand-coding.

Walter

On Feb 13, 2008, at 8:32 AM, duotone wrote:

How do I create a scrolling box like the one here:

http://www.apple.com/mac/

Thanks!

Tony

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

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

duotone · February 13, 2008, 3:58pm

I was just looking at the new beta and noticed something.

http://www.softpress.com/support/faq.php

Click the “creating an html email”

That link creates a fade rather than a pull down effect, was that on purpose?

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

Colin_Alcock · February 13, 2008, 4:11pm

Intentional or not, I like that fade - it’s easier on the eye. Must
find out how to do it.

Colin

On 13 Feb 2008, at 15:58, duotone wrote:

http://www.softpress.com/support/faq.php

Click the “creating an html email”

That link creates a fade rather than a pull down effect, was that on
purpose?

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

waltd · February 13, 2008, 5:23pm

Here’s a drastically cut down version of that page. Note that this
example does not use the Effect.ScrollTo (which is just because
that’s the wrong effect, and I was talking off the top of my head
previously) nor does it actually use the correct function, which is
Effect.MoveTo.

http://scripty.walterdavisstudio.com/slider.html

If I added Effect.MoveTo into the mix, then it would do the ease-in
and ease-out behavior that makes the Apple example so silky in
motion. (To see what I’m talking about, go to the Apple page and
click on the horizontal scroll bar at some random point. You will see
the top slider animate over to the point where you clicked,
accelerating and decelerating as it starts and ends its travel.) All
I am doing, for clarity and simplicity, is manipulating the left
margin of the inner box.

This example is hand-coded, but it would be completely easy to do it
in Freeway 5. Doing it in Freeway 4 would require an extra Action or
some hand-coding, perhaps with Source Code Snooper.

The issue is overflow. In order to make the top scrolling area, you
have to create a small HTML layer box with its overflow set to
Hidden, and then somehow put a much larger HTML layer box inside it
as an absolutely positioned child.

Freeway 4 lets you put the larger div inside the smaller one, but
won’t let you resize the smaller div any smaller than its largest child.

So I’m hesitant to put any work into making an Action for Freeway 4
for this effect, with Freeway 5 already in public beta.

Walter

On Feb 13, 2008, at 10:52 AM, Walter Lee Davis wrote:

They are using Prototype and Scriptaculous for this, it’s the
Control.Slider and Effect.ScrollTo specifically. I’ll see if I can
make a simplified example later. It should be possible to add this to
a Freeway page with the Protaculous Action and a certain amount of
hand-coding.

Walter

On Feb 13, 2008, at 8:32 AM, duotone wrote:

How do I create a scrolling box like the one here:

http://www.apple.com/mac/

Thanks!

Tony

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

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

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

duotone · February 13, 2008, 5:27pm

Sweet…

So you’re saying this will be in FW5?

Thx

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

eus2 · February 13, 2008, 5:33pm

“So I’m hesitant to put any work into making an Action for Freeway 4 for this effect, with Freeway 5 already in public beta.”

Dear Waldt…

not everybody can join you all into buying ‘5’…
and these are a fans of your work and genius actions to…
sob…so please don’t hesitate…and let us poor souls also enjoy this effect

Eus

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

duotone · February 13, 2008, 5:36pm

I’ll even pass along a bit for you to buy a decent beer!

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

waltd · February 13, 2008, 5:36pm

Not specifically, but it will be possible to create this sort of
effect very directly in Freeway 5. You can also create it in Freeway
4, but it involves more hacking and swearing.

Walter

On Feb 13, 2008, at 12:27 PM, duotone wrote:

Sweet…

So you’re saying this will be in FW5?

Thx

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

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

eus2 · February 13, 2008, 5:43pm

You have not noticed that i am no lady i suppose…
i love to be able to hack and swear…

i would buy this action! ( to be more serious )

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

duotone · February 13, 2008, 5:48pm

I would buy it also!

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

waltd · February 13, 2008, 6:18pm

Here’s the Freeway 5 directions (file this in the teach a (wo)man to
fish department):

Download and install the Protaculous Action[1].
Make a new XHTML page, apply the Protaculous Action to the page.
Make sure Layers mode is on (CSS button is lit blue).
Draw an HTML box to serve as the “frame” for your sliding area.
Make sure its overflow is set to Hidden.
With the first box still selected, carefully draw another box
inside it, as a child. Try to get it near the top-left corner, but
it’s not critical that you get this absolutely right, you can fix it
later. Make this box fit entirely inside the outer frame.
Use the inspector to make the top/left of this box 0,0 (with
respect to its parent box) and then use the Inspector width field to
make its width considerably larger than the parent box. With this
inner box still selected, start drawing child elements within it to
represent your various scrolling options. It’s helpful to click the
Site pane over to Page view while you do this, as it makes it obvious
when you have drawn something as a stand-alone object rather than as
a child.
Make your slider control. This is just an HTML box (the track)
with another HTML box inside it as an inline (the thumb, in Mac UI
parlance). I got all fancy with mine, using padding and negative
margin to give it a little visual offset, but you can do whatever you
like. Draw the track, then click inside it to get a text cursor,
select Insert > HTML Item from the main menu, and then drag and style
to complete the effect.

Now, the rest of the job is in the Actions palette. Actually, first,
click on the following elements and write down their names (case-
sensitive) from the Inspector so you can enter them into the code later:

The inner (sliding, really wide) div.
The track that your slider control runs on.
The thumb of your slider control.

Now, click once on the pasteboard, so nothing is selected. In the
Actions palette, change the Library picker to Scriptaculous, and then
(if you want to save a little size) open the Use Individual Files
area and select Effects, Controls, and Slider.

Click on the Function Body button.

In the dialog that appears, paste the following, then modify the
placeholder text to match what you wrote down earlier.

var s = new Control.Slider('thumb','track', {});
var f = function(value){
	var inner = $('innerDiv');
	var w = inner.getWidth();
	w = (w - inner.up('div').getWidth());
	var leftPos = Math.round(value * w) * -1;
	inner.style.left = leftPos + 'px';
}
s.options.onChange = function(value){
	f(value);
};
s.options.onSlide = function(value){
	f(value);
};

That’s all you need. Preview, it should just work.

Walter

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

On Feb 13, 2008, at 12:27 PM, duotone wrote:

Sweet…

So you’re saying this will be in FW5?

Thx

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

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

Craig_Paterson · November 18, 2008, 12:14pm

That’s a great tutorial Walter, many thanks.

Just been trying it out and it’s fairly straightforward, but I’m having difficulties with the code for a vertical slider I have created on the same page (code below).

I was assuming that I could change the “getWidth” statements to “getHeight” and change the “leftPos” variable to something like “topPos” then change “vinner.style.left = leftPos + ‘px’;” to “vinner.style.top = topPos + ‘px’;” but that didn’t work.

Could you please take a look over the code and let me know where I am going wrong (I really wish I was more fluent with these languages).

Thank you in advance Walter.

Craig

var s = new Control.Slider('hthumb','htrack', {});
var f = function(value){
    var inner = $('hcontent');
    var w = inner.getWidth();
    w = (w - inner.up('div').getWidth());
    var leftPos = Math.round(value * w) * -1;
    inner.style.left = leftPos + 'px';
}
s.options.onChange = function(value){
    f(value);
};
s.options.onSlide = function(value){
    f(value);
};

var v = new Control.Slider('vthumb','vtrack', {});
var f2 = function(value){
    var vinner = $('vcontent');
    var h = vinner.getHeight();
    h = (h - vinner.up('div').getHeight());
    var topPos = Math.round(value * h) * -1;
    vinner.style.top = topPos + 'px';
}
v.options.onChange = function(value){
    f2(value);
};
v.options.onSlide = function(value){
    f2(value);
};

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

waltd · November 18, 2008, 12:29pm

That looks all correct, no issues that I can see. Have you looked at
this in Firefox with the Firebug extension on? I imagine that you are
having a JavaScript error somewhere, but I can’t see it here. If you
post this on a public server I’d be happy to take a quick look.

One question, though. Is there a second box on your page called
‘vcontent’? Is it possible you are trying to have vertical and
horizontal scrollers on the same box?

Walter

On Nov 18, 2008, at 7:14 AM, Craig Paterson wrote:

I was assuming that I could change the “getWidth” statements to
“getHeight” and change the “leftPos” variable to something like
“topPos” then change “vinner.style.left = leftPos + ‘px’;” to
“vinner.style.top = topPos + ‘px’;” but that didn’t work.

Could you please take a look over the code and let me know where I
am going wrong (I really wish I was more fluent with these languages).

Thank you in advance Walter.

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

Craig_Paterson · November 18, 2008, 12:45pm

Thanks Walter,

Tried previewing in Firefox with FireBug switched on, but couldn’t see anything obvious.

I have posted the file at:-
http://homepage.mac.com/cp.fusion/filechute/Scroller_FW5.zip

I have named all my html elements individually for vertical and horizontal scrollers, so hopefully that is not causing the problem.

Craig

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

waltd · November 18, 2008, 1:23pm

I’ve got the file, but in future, just posting the page would be the
thing to do. I will publish this locally and look at the resulting
HTML/JS.

Walter

On Nov 18, 2008, at 7:45 AM, Craig Paterson wrote:

Thanks Walter,

Tried previewing in Firefox with FireBug switched on, but couldn’t
see anything obvious.

I have posted the file at:-
http://homepage.mac.com/cp.fusion/filechute/Scroller_FW5.zip

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

waltd · November 18, 2008, 1:28pm

Aha. A look at the documentation shows that you need to declare the
axis for your slider when you create it. Default is horizontal, which
is why I didn’t need to do it on that axis. Change this one line:

 var v = new Control.Slider('vthumb','vtrack', {axis:'vertical'});

And you’re home and dry.

Walter

On Nov 18, 2008, at 7:45 AM, Craig Paterson wrote:

Thanks Walter,

Tried previewing in Firefox with FireBug switched on, but couldn’t
see anything obvious.

I have posted the file at:-
http://homepage.mac.com/cp.fusion/filechute/Scroller_FW5.zip

I have named all my html elements individually for vertical and
horizontal scrollers, so hopefully that is not causing the problem.

Craig

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

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

waltd · November 18, 2008, 1:29pm

Here’s the documentation for the control: <http://github.com/madrobby/
scriptaculous/wikis/slider>

Walter

On Nov 18, 2008, at 8:23 AM, Walter Lee Davis wrote:

I’ve got the file, but in future, just posting the page would be
the thing to do. I will publish this locally and look at the
resulting HTML/JS.

Walter

On Nov 18, 2008, at 7:45 AM, Craig Paterson wrote:

Thanks Walter,

Tried previewing in Firefox with FireBug switched on, but couldn’t
see anything obvious.

I have posted the file at:-
http://homepage.mac.com/cp.fusion/filechute/Scroller_FW5.zip

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

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

Craig_Paterson · November 18, 2008, 2:01pm

Walter, thank you, you are indeed a star

That is perfect, and the documentation is now bookmarked.

Do you mean just post the .freeway file, or the published HTML page?

Craig

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

waltd · November 18, 2008, 3:03pm

The latter. I can see errors in Firebug from any page that I can
access on the Web.

Walter

On Nov 18, 2008, at 9:01 AM, Craig Paterson wrote:

Do you mean just post the .freeway file, or the published HTML page?

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