[Pro] scroll bar

Hi,

I am trying to make a scroll box similar to this one: http://www.colienarentmeester.com/

I’ve looked at past threads and still can’t seem to get it right!

Please help!!

thank you!


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

Okay,

so I drew an html box.

went to item: extended> name: overflow-x value: auto.

Then I drew graphic boxes within the html box and inserted photos. All is great, only I can only fit a certain amount. How do I extend it so it has that long filmstrip scrolll? HELP!!!


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

You need to have two layers of boxes before you get to your individual
frames of the filmstrip. First, make the outer box, set it to
overflow: hidden. Next insert an inline box within that outer box, and
use the Inspector to make it as wide as you need for all of your
frames. Finally, either insert your frames inline within that second
box, or apply them as positioned children of that box.

(To do that, click once on the box so its handles show, then click on
the HTML or Graphic Item tool, and draw your first child box, making
sure that you begin and end your drag over the parent box. You’ll know
you’ve done it right if your cursor looks like this [ + ] while you
draw and the borders of the outer box light up in blue.)

Without that second layer inside the first, your frames’ natural
tendency will be to wrap to a new line, rather than to spread out
beyond the width of their parent.

Walter

On Feb 14, 2011, at 10:17 PM, BT wrote:

Okay,

so I drew an html box.

went to item: extended> name: overflow-x value: auto.

Then I drew graphic boxes within the html box and inserted photos.
All is great, only I can only fit a certain amount. How do I extend
it so it has that long filmstrip scrolll? HELP!!!


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

Thank you so much for clarifying!! Works like a charm! I now want to stylized my scroll bar within the html box so it’s not the plain blue one. I looked up this action: http://www.softpress.com/action_files/Scroll_Layers/

But I’m confused as to which layer I should apply this action to :frowning:

Sorry…I am still really new to all of this!

thank you!!


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

Can you tell me if the scroll layer action will change the color of the scroll bar within the html box?

thank you!


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

No it won’t.

You will need to create a custom scrollbar for this.

Have a search for ‘custom scrollbar’ within FWT

David


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

Here is a tutorial that Chuckamuck wrote for this http://www.chucksdesigns.com/tutorials/index.html

D


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

I just found it as well! Thank you so much!!

I’m looking at walter’s example and the thumb is blue…can one change the color of the thumb on the track?

Thank you for your patience!


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

Yes you can.

D


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

I followed walt’s instructions here:
http://www.freewaytalk.net/thread/view/30155#m_30467

but I want it to scroll horizontally so I made some changes here:

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

And now it doesn’t work. What am I missing?

Also, I want to place images, not text as the scrolling content. What other steps should I be taking?

thank you kindly.


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

YAAY!! I got it working!!

Thanks Walter and DAVE!!! EEEE!!!


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

Okay, spoke too soon! Having problems with adding images instead of text. Any thoughts?


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

Hi BT,

I once followed http://www.freewaytalk.net/thread/view/27309#m_77540 to achieve the custom scrollbar. Unfortunately all my links in thread are broken (cause it was development that time) but the final result is this (about 250 images puuuhhhh…):

It should point you to the goal you’d like to reach.

Cheers

Thomas


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

hey thomas!

Thanks for the link! cool website!! How did you get the rounded corners on your track?

thanks!!!


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

This is photoshop. Inserted as a bg via inspector into the “track” div. The handle is as well made in PS inserted the same way.

Cheers

Thomas


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

Sorry, I’m a little confused here…

What code do I insert into the “track” div?

thank you!


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

so let’s try to remove the confusion.

have a look at this:

What you see is the “page-construction” of that illustrator site.

This should clear up some. You need to make sure, that the FW Page Elements a named exactly than the names within the script:

http://www.pastie.org/pastes/1570681/text (Walter, I’m still to dumb to display pastie direct in a thread)

Hope it’ll make things clearer.

Cheers

Thomas


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

hahaha thanks. that’s awesome! I love diagrams!


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

http://www.pastie.org/pastes/1570681/text (Walter, I’m still to dumb to display pastie direct in a thread)

To get a Pastie or Gist to appear inline, simply use the URL to the main page, all by itself in a line, preceded and followed by two returns, so in your case, http://www.pastie.org/1570681

http://www.pastie.org/1570681

Walter


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

ahhhhh.

I did and was feared cause I couldn’t see it in preview. Next time I know.

Thanks

Thomas


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