Scroll box

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

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

Thanks!

Tony

quote

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

quote

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?

quote

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?

quote

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

quote

Sweet…

So you’re saying this will be in FW5?

Thx

quote

“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

quote

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

quote

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

quote

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 )

quote

I would buy it also!

quote

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

1. Download and install the Protaculous Action[1].
2. Make a new XHTML page, apply the Protaculous Action to the page.
3. Make sure Layers mode is on (CSS button is lit blue).
4. Draw an HTML box to serve as the “frame” for your sliding area. Make sure its overflow is set to Hidden.
5. 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.
6. 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.
7. 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

1. 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

quote

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);
};

quote

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.

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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?

quote

Got it Walter.

Once again, thanks for all your help.

Craig

quote

Here’s the final Freeway 5 Pro file with all of the code in place if anyone wants it.

http://snipr.com/5tkrr-cmjse3

Craig

quote

Just an update for anyone who has gotten here in February 2009 — the Action is now at ActionsForge, naturally:

http://www.actionsforge.com/actions/view/18-protaculous

And there are a few changes to the Action UI that render some of the instructions above nonsensical:

1. There is no longer any way to choose individual Scriptaculous libraries. This was done to enforce compatibility with Softpress’s FX Actions. There is a new picker to choose between “packed” and regular versions of the libraries. (The packed versions are about 1/3 the size of the regular ones, but they produce completely unusable errors for debugging. Use regular until everything works, then switch to packed for deployment.)
2. Also, there are now TWO Function Body buttons to choose from. The first one fires before the page ever displays in the browser, and the second one fires after the page is fully visible (all images have loaded, everything is visibly ready).

Walter

quote

I’ve created a horizontal sliding scrollbar like Walters. (Thanks for the help) but the hand pointer does not appear on hover which may be confusing for browsing. I’ve tried inserting cursor: pointer into item / extended /div and also tried inserting this into scriptaculous code but so far nothing has changed. Does anybody have any idea how to change this?

Thanks

Mog

quote

this is Walter’s slider that I was referring to.

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

quote

If you are using item / extended / div, make sure you add your cursor rule to the div style segment, not the div segment. You’re doing this on the “thumb” div, right?

Walter

quote

Hi

Yes its the “thumb”. I added cursor: pointer to the div style segment but it doesn’t work. Do I need to add anything else?

Mog

quote

Could you post a link? I can’t tell from here, it sounds like you’ve done the right thing.

Walter

On Apr 15, 2009, at 6:07 PM, mog wrote:

Hi

Yes its the “thumb”. I added cursor: pointer to the div style segment but it doesn’t work. Do I need to add anything else?

quote

Hi Walter

Here is a link to the test site gallery page.

http://www.thewraiths.co.uk/ukeytest/gallery.html

Thanks!

Mog

quote

Aha. You seem to have added cursor:pointer in both the Name and Value fields of the Extended / New dialog. This results in a style that looks like this:

cursor:pointer:cursor:pointer;

…which isn’t valid, so the browser pretends it didn’t hear you.

Click once on the thumb element, then press Apple-Option-X. Double- click on the line in the style side of the Extended dialog and edit it so that the Name field has cursor in it, and the Value field has pointer in it.

Publish, and you should be good.

Walter

On Apr 16, 2009, at 4:52 AM, mog wrote:

Hi Walter

Here is a link to the test site gallery page.

http://www.thewraiths.co.uk/ukeytest/gallery.html

Thanks!

Mog

quote

Brilliant! Thanks! It works!

Mog : )

quote

Since this thread was started in 2008 and last updated in early 2009, it’s not surprising that nearly all the once-useful URLs posted here are now broken.

Walter, can you post “sensical” instructions and repost slider.html example to your site again for us?

Many thanks,

James Wages

quote

I’m rebuilding my server right now, so it won’t be visible for another hour or so (unless I pass out on the keyboard or similar). The original links are still good, just “resting”, as they say in the pet shop sketch.

Walter

On Apr 6, 2010, at 1:40 AM, JDW wrote:

Since this thread was started in 2008 and last updated in early 2009, it’s not surprising that nearly all the once-useful URLs posted here are now broken.

Walter, can you post “sensical” instructions and repost slider.html example to your site again for us?

Many thanks,

James Wages

quote

Thank you, Walter. I have confirmed that the following page on your site is up and running now:

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

However, I am still interested in knowing more specifics on how to put this all together in light of your more recent post in this thread, “Just an update for anyone who has gotten here in February 2009…” Could you revise your 7 steps for us? (The code-savvy among us may not need such hand-holding, but I certainly do.)

And is it really necessary to use an “XHTML page” as you suggest? “HTML 4.01 Transitional” won’t work?

Thank you,

James Wages

quote

That was a seriously long night for me — I think I ended up on Tokyo time by the end of it…

Here’s what I can tell you about the technique:

First, I’m not sure if XHTML is absolutely necessary, but many if not most of the examples I have ever seen using Scriptaculous use it, and so I just start there. Try it on a sample page first, see if it works with HTML 4 or transitional in a basic example layout like the one linked above, and if it does, then try it in a more complete site. If it doesn’t, then you’ll have to see if simply bumping the HTML level to one of the Strict DOCTYPES helps. (In other words, you may find that the error lies elsewhere. Fewer variables makes it easier to rule out the non-culprits.)

One thing I can tell you absolutely is that non-valid HTML of any level will not work with Prototype or any other JavaScript library. They all draw the line there — even though browsers work around invalid code perfectly well, JavaScript is a much simpler beast than a browser.

Second, the entire trick relies on a specific construction method. If you follow the steps precisely, you will get a working result. You must use DIVs (layers) rather than cells in a table layout, so this is Pro-only and you must have the CSS layout button on or you must check the Layer checkbox in the Inspector for each of the elements in the construction. You want to end up with the following hierarchical outline of elements to allow the effect to work:

Outer Box (absolute or relative position, overflow hidden)
    Inner Content Box (absolute position, top:0 left:0)
        Whatever other content you like, either
            absolute or relative to the inner content
            box, but visually constrained to the outer
            box's dimensions.
Slider Track (absolute or relative position)
    Thumb (absolute position, top:0 left:0)

The only other thing you need to know are the names of the major elements: the inner content box, the slider track, and the thumb. Because you used DIVs rather than cells, this part will be automatic — Freeway always gives DIVs IDs. You can get the ID by clicking on the DIV and looking in the Title field in the left-most tab of the Inspector.

I’ll paste the code in again here, with the names of elements written as clearly as I can on my second cup of coffee.

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

I’ve managed to make it a little simpler in the process. Recall, though, that if you want more than one of these things on a single page, you must create a new instance of the “f” function for each one, with a different name, and call it instead. You could name these f1, f2, f3 and the caller functions s1, s2, s3…

Walter

quote

Hi there big dog!

I cant’ seem to get the scroll to work as it should. Can you help me?

I would like to click within any area of the slider field to jump there directly. I can’t find the info on how to do that. my page is here: http://www.biscaya.com/begmc.html

Also never found out how to get that Effect.MoveTo. included

And even better, can I scroll with button of the mouse directly while hovering over the layer (without clicking)?

I bow in awe to your wisdom.

Sverker

quote

I can’t see what’s going wrong in there, but you have a LOT of other effects going on in the same page, so it’s hard to see. Could you try isolating the scroll box element on another scratch page, and publish and see if you can get that part alone to work. No other fading slideshow what-have-you, just this one box with its one slider. Then start adding things and note where it breaks.

Walter

On Jun 1, 2010, at 11:44 AM, Zignar wrote:

Hi there big dog!

I cant’ seem to get the scroll to work as it should. Can you help me?

quote

Hi again

Tried it: http://www.biscaya.com/begtest.html That is a clean page, only some CSS menu, noting else (that I can see). Still no good.

Is my Java correct? var s = new Control.Slider(‘thumb’,’track’, {axis:’vertical’}); var f = function(value){ var inner = $(‘innerDiv’); //change innerDiv to whatever your inner box is called var h = (inner.getHeight() - inner.up(‘div’).getHeight()); inner.style.top = (Math.round(value * h) * -1) + ‘px’; } s.options.onChange = function(value){ f(value); }; s.options.onSlide = function(value){ f(value); };

THANKS! Sverker

quote

The box is scrolling correctly as near as I can tell. Only tested in Safari 4, but if you are seeing an error in another browser, please let me know.

Walter

quote

I actually wanted to be able to simply click anywhere on the scroll bar, and not click and drag. That is the more common way of scroll bar behavior that I have seen (like in the apple site mentioned above).

Any ideas would be helpful!

Sverker

quote

But that is the way the effect works normally. Do you have any elements inserted within the track besides the thumb? There should only be the track and the thumb as bare elements. Any extra styling must be added through CSS, not by adding drawn elements to the page. Note that it works the way you describe here:

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

The thumb can be an image, if you want it to be fancy, and the track can be styled with a background image if you want it to have some 3D depth. My example is two boring flat color DIVs, but that’s just the beginning.

Walter

quote

Indeed that did it I had added a “color effect background” with 60% opacity to the track. Once I took that of it works like charm.

That page (and several other) on the site still loads extremely slow. I think there are similar conflicts there. It is just hard ton know where to start looking, when I have so many actions, rollovers and semi transparencies. Any suggestions?

I am learning lots and I am very grateful for your help. THANK YOU!

Sverker

quote

Yes some of these pages as just really ‘Heavy’ - http://www.biscaya.com/ducati.html is 3.7Mb - that equates to a 13.5 sec load time.

WOW! http://www.biscaya.com/begmc.html is nearly 10Mb -31 sec load!

All you can do is use less images and or smaller image file sizes. Or spread this over more pages.

David

quote

Having downloaded a couple of your images you can certainly reduce their file sizes dramatically without much reduction in quality.

D

quote

For sake of comparison, I just checked a few moments ago, and the following URL loads in 4 seconds on my iMac i7 over a 100Mb/s fiber internet connection. Is it really 10MB?

quote

Blasted! I loath not being able to edit posts! Here’s the URL I just spoke of:

http://www.biscaya.com/begmc.html

quote

If you have Safari’s developer tools enabled you can see file sizes etc.

D

quote

I see the “Develop” menu in my Safari menubar. I then went to Develop > Show Web Inspector. I then clicked the Resources button, and I clicked the “Enable resource tracking” button (for “this session” only). The tracker took 14.59s to load the page, in comparison with the 4 seconds it normally takes. I then clicked on the “Size” comment in the sidebar and it says “241KB Total.” So I do not know where you folks are getting this 10MB size, unless the author of this web page changed the file sizes very recently.

Sorry for getting off topic. I am just trying to make sense of it all.

quote

Thanks for all the suggestions (the author here). I am trying to understand where all the weight comes from. Images, though there are quite a few, are only 25-35 Kb/a piece. On the page in question, http://www.biscaya.com/begmc.html they still only account for 40% of the file size. I use a lot of fading slide shows and show hidden layers. Can they really be that heavy? As I have observed how the page loads on various machines and platforms, it seems to be a bit erratic. (I did find one conflict in the scroll bar, and it has improved). I wonder if there could be certain actions that don’t work well together? I have another heavy page on the same site: http://www.biscaya.com/ducati.html

I really appreciate your help, thanks! Sverker

quote

Sorry, just trying to unsubscribe from this thread.

Craig

quote

I see the “Develop” menu in my Safari menubar. I then went to Develop > Show Web Inspector. I then clicked the Resources button

Rather then using the Develop menu right click on the page and choose Inspect Element.

In the window that opens select the Resources tab.

Down the left you will see Time - the time it takes to load the page. Size - the size of all the components of that page.

You can select each item individually to give you a preview, dimensions and file size.

David

quote

DeltaDave, I just tried your method, but that accomplishes the exact same thing I reported in my previous post above. There is no 10MB of data on this web page!:

http://www.biscaya.com/ducati.html

!!!

quote

JDW

I might be the source of your confusion! I have been working on the site yesterday, and rebuilt the pages completely. Looks and behaves the same way – but they are considerably lighter now.

(I discovered that the semi transparent backgrounds were even heavier than the photos I was using!)

http://www.biscaya.com/ducati.html

Sverker

quote

It wasn’t the Ducati page that was 10 Mb it was http://www.biscaya.com/begmc.html

Now it is http://www.biscaya.com/beg-show.html and is nearly 10Mb

D

quote

Dave, it’s 9.564MB indeed! Wow!

quote

Ok, I’ve bin through this several times and I can get the slider to work correctly, however the “inner’ wide scroll DIV does not scroll as I move the thumb (slider controller)?

Where am I going wrong please?

http://www.edwardlawlor.co.uk/test/slider.html

quote

Your inner div needs to have the ID ‘innerDiv’ not ‘inner’.

Walter

On Jul 14, 2010, at 11:02 AM, Mr worm wrote:

Ok, I’ve bin through this several times and I can get the slider to work correctly, however the “inner’ wide scroll DIV does not scroll as I move the thumb (slider controller)?

Where am I going wrong please?

quote

Works perfect, many thanks Walt!

quote