The tut for the custom scrollbar seems convoluted, over my head, and basically unfinished. but Chuckamuck says that he would update once 5 ships. Does anyone have any information on this or how to do this with out IE dropping the ball?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Convoluted…you mean kind of like how Freeway works? Yep. For certain effects like this that take adding scripting to a Freeway layout it is not that straight forward. However, the instructions are straight forward enough to follow as long as you know where to add HTML Markup to a Freeway page and how to upload files to your web host with an separate ftp application.
I am updating the tutorial to reflect FW5 use and will post it later today.
As an alternative that you can play with try setting the content visibility option for your html box to “Auto” in the Inspector pallet and setting the html box’s height to a fixed size. This will generate a generic browser scrollbar when content overflows. Not as elegant as a custom scroll bar, but workable.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
thanks for updating Chuckamuck…I look foward to reading it!
I really don’t care for the scrollbar Freeway creates.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Has there been any word on an update for the scroll-bar tut…I’m very anxious to apply this to my web site!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This is not an update to the original, but I have another suggestion
for you. Scriptaculous has a wonderful scroller effect that can be
enabled in very few lines of code. Download the Protaculous Action
here: http://freewaypro.com/actions/downloads and install it in
Freeway. That will get you access to the rest of this magic.
Now have a look here: http://scripty.walterdavisstudio.com/scroll
If you click on the Freeway icon, you can download the Freeway5
example app, which will go a long way toward making this easier to
understand. It’s already taken me longer to explain this than it did
to create.
The few lines of code, for those who are interested, are as follows:
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);
};
There are three things that you have to pay attention to in the above
code snippet: ‘thumb’, ‘track’, and ‘innerDiv’ are all placeholders
for the actual names that you give to the parts in your Freeway layout.
Draw a layered HTML box (Blue CSS Button ON) that is the size of the
area you want to have scroll. Set that box to have Overflow: Hidden
in the Inspector. Next to that box, draw a thin box which will be the
track, and within that track, draw a nested or child box which will
be the thumb – the thing you move to make the effect work. Finally,
draw another box the same width as your scrolling window area, and
fill it with the content you want to have scroll.
Once you have done this, click and drag the tall box, then press the
spacebar as you bring the point of your cursor over the top of your
small scroll window. You will see a blue highlight rectangle form
around the edges of the scroll window, and at that moment you can
release the mouse. You will probably see an alert dialog that the
element you are dropping is too tall for the box. Okay it, then undo
the change to your layout by restoring the original dimensions using
the Inspector. Also use the Inspector to change the top-left of the
inner DIV to 0,0 and remove its height property by pressing the
button to the left of the Height value.
You will note that the inner box content flops out of the outer box
in the design view. There doesn’t seem to be anything you can do
about that, but if you preview at this point, you will see that it
doesn’t appear in the browser.
Apply Protaculous to the page, select scriptaculous-packed from the
Library picker, and click the top Function Body button in the Actions
palette. Paste the code from above (actually, just download the demo
– there are way too many things that can go wrong when e-mailing code).
As long as your elements are named the same way as the code expects
them to be, the example will just work.
If you want to have more than one such element on the page, then
simply copy and paste the entire code block within the Function Body
dialog, so that there are two instances of it, and change the
placeholders to reflect the names of your second through nth
instances of the effect.
Each scrolling area will need a uniquely named track, thumb, and
innerDiv. Everything else is taken care of for you.
Walter
On Apr 3, 2008, at 9:54 AM, shybuckstudio wrote:
Has there been any word on an update for the scroll-bar tut…I’m
very anxious to apply this to my web site!
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
Thanks for your help Walt I’m very anxious to start this…will get back to you when I’ve digested this little piece of wonder.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hey Bravo! it works…the sample page is an easy way for someone to understand how things work. Just pullings things apart shows the inner working so quickly, Thanks so much Walt.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You are welcome! At some point, this is going to get wrapped in an
Action, but there’s way too much else going on right now to make that
possible.
Walter
On Apr 3, 2008, at 12:03 PM, shybuckstudio wrote:
Thanks so much Walt.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok, sorry for the delay but just too busy to get the screen shots done before now. The revised tutorial is posted and ready for consumption.
Nice to hear Walt your are planning an action for this feature even if it is using Protaculous. About time someone did. 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi. I am trying to use Walter’s technique for a page with two of these scroll functions on it.
I have added the elements and simply added a 2 onto the name of each one (innerDiv2, track2, thumb2, outerFrame2). How do I modify the second instance of the Protaculous code so that slider works?
Here’s the first instance:
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);
};
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It would look like this:
var s = new Control.Slider('thumb2','track2', {axis:'vertical'});
var f = function(value){
var inner = $('innerDiv2'); //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);
};
Walter
On Jan 27, 2009, at 4:09 PM, Jim Combs wrote:
Here’s the first instance:
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);
};
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thx Walter. I’ve pasted this after the first instance in the top Function Body location, but it breaks when I run the page. Am I placing the code in the correct place? Thanks for your help (this script has been a lifesaver!)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry, dumb of me. You will need to change the var s and var f parts
to some other letters. So make it
var s1 = ...
far f1 = ...
s1.options.onChange = function(value){
f1(value);
};
s1.options.onSlide = function(value){
f1(value);
};
If you’re planning to put lots of these on the page, there’s probably
a much smarter way to write this where you could define the functions
once and then apply them to a whole gaggle of elements at once. I’ll
try to put some thought to that later on tonight if I get a chance.
Walter
On Jan 27, 2009, at 4:32 PM, Jim Combs wrote:
Thx Walter. I’ve pasted this after the first instance in the top
Function Body location, but it breaks when I run the page. Am I
placing the code in the correct place? Thanks for your help (this
script has been a lifesaver!)
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
What’s ‘tut’ ?
I seem to have strolled into a twilight zone language with this thread 
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’m taking it to mean Tutorial, not some sort of Bangles throwback.
(hums “Walk like an Egyptian”…)
Walter
On Jan 27, 2009, at 4:45 PM, seoras wrote:
What’s ‘tut’ ?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
LOL.
Thanks Walter, that works like a charm! I very much appreciate the immediate feedback!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sometime around 27/1/09 (at 16:45 -0500) seoras said:
What’s ‘tut’ ?
“Tutorial”, as Walter said. I have to confess that I’m not a
particular fan of such abbr. (eviations).
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
waltd, this is a thing of beauty. Just elegant. After looking through the FP manual and all over the web, I stumbled upon this. Can’t thank you enough! Works beautifully, looks fabulous.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks, but really you should thank Sam Stephenson for making
Prototype.js and Thomas Fuchs for script.aculo.us. (And also all of
their open-source contributors, too.) I’m just standing on the
shoulders of giants who are standing on the Empire State Building
(metaphorically speaking).
Walter
On Mar 19, 2009, at 5:12 PM, madcomposter wrote:
Can’t thank you enough! Works beautifully, looks fabulous.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walt,
This is really good, and gets away from ugly system scroll bars in parts of a site.
Just one thing, If you can’t guarantee how much text is held in the sliding box ( when using with a CMS) the behaviour is odd if there is to little text in the box i.e. it does not overflow the textbox.
I there any possible work around for this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options