Quark Forums

Hi, all,

somebody asked a while ago for a customizable scrollbar with scrollable pictures.

I must have been bored ;-) ... however, a customer asked again for such a functionality and as Interactive Designer doesn't have this built in by default (yet), I played around a bit:

Here is the result of my little test:
click to see sample

If anybody is interested I also uploaded the QXP for use in your own projects.

I created it in such a manner, that it is totally adjustable, it self adjusts to wherever you put the scrollbar, you can make it smaller or larger, you can define how far it should scroll, the same with the scrollable area, make it larger or smaller, define how large the visible area should be etc.

It is two scripts only, which you can ignore, they work in the background. Just remember that the initialize script needs to run when the page is entered.

Like it? Terrible? Cool?
Matthias

P.S.: The only thing I ask in return is that you send me the URL of your project where you used this, no other conditions, no royalty fees.

Matthias,
Thanks for this example. I have found that the examples you (and the other contributors) have done have made it much easier for me to get a better understanding of QID and what it can do.
I'm always looking for a better way to display photos and can't wait to integrate this example in to a page.
Keep up the great work!
K. Ahrendt

Hi, all,

some people approached me and asked me why the solution looks rather complex.

Actually I had two alternatives:
1) Create one script, with hard coded numbers, easy to understand, but not easy for you to customize and use in your own projects. You would have had to either use my design or struggle to recreate the script for your need.
2) Create two scripts, with quite some variables, not so easy to understand. Big advantage: You don't need to understand it, as you can just use it in your own projects, adjust boxes and only need to move two "lines" around which help to adjust the solution automatically.

I decided for alternative 2), hope that explains it.

Furthermore:
Some people asked why I the scrollable element an animation, in my point of view it makes it easier to maintain, you can just put whatever you want in it and adjust its size.

If you want pictures to do something (on click jump to a page or open a URL), just replace the animation object with a group object. Make sure you name it the same way (sc_element). And, in the "sc_drag" script, also reset the one "Set Object Position" action to set the position of the "sc_element" object.

Best
Matthias

As soon i've got some time i will use it matthias
thanks a lot
jacques

Hi, all,

Scott, one of the participants on the forum, preferred the scroll bar horizontal and successfully modified my project.
Additionally he also made some very nice design adjustments.

As Scott is fine to share his results, I am going to also put them online:

Result: click here to see the Flash / SWF

Source: click here to download the QXP

Thank you very much, Scott!

Enjoy
Matthias

I tried to make a scrollable page based on your scrolling method, but i found a problem! It looks like there is a maximum size of the scrollable layout. In this case the scrollable content's height is 2660 px. When i scroll the content downwards, the bottom of the content not showing.

(sorry about my poor english!)

Hi Everybody

I am new to interactive design and trying to use this scrollbar, but when replacing the pictures and previewing th SWF I get the message to "Define Variable" as you can tell I am not familiar with all the functions in QID, would someone care to break down in steps a liitle bit more on how to use and customize this scrollbar?

Thanks

Hi, Sergio,

did you delete a script, an object or one of the lines?

Best
Matthias

Hi Matthias, thanks for your quick response and I dont think I have deleted anything, I have replaced the pictures, regrouped the item and renamed it according to the notes, but I maybe missing something I will give it another try and see what happens.

Sergio

Hi, Sergio,

which one did you download, the horizontal or vertical?

Be careful with ungrouping, as the group was an object I believe.

Thanks
Matthias

Hi Matthias, I downloaded the horizontal one and I ungrouped the object so I can replace the pictures, then regrouped and renamed accordingly, if I am missing any steps please advice, thanks again.

Sergio

Hi, sergio,

so you named the group to "sc_element_hor"? And you are sure you named the group, not an individual picture?

Do you get an error message when you export, WHICH variable is not defined?

Thanks
Matthias

Hello Matthias: Thanks for all the good work you're doing here. Regarding the horizontal scroll bar, the links on the pictures don't seem to work on Snow Leopard. When I click (on your samples), the browser does show the clicked link in the address bar, but the Status Bar says, "Cancelled opening the page." It works fine on Firefox. Do you know of this problem? Is there a fix?

Hi, ad4em,

do I understand you right, are you saying:

- Scrollbar works fine under Leopard with Safari,
- Scrollbar works fine under Leopard with Firefox,
- Scrollbar works fine under Snow Leopard with Firefox,
- but Scrollbar does not work under Snow Leopard with Safari

?

Thanks
Matthias

Actually, all I know is:

- Scrollbar works fine under Snow Leopard with Firefox. True.
- but Scrollbar does not work under Snow Leopard with Safari. True.

I do not know whether the following are true as I haven't tried it:

- Scrollbar works fine under Leopard with Safari? Don't know
- Scrollbar works fine under Leopard with Firefox? Don't know