Help with using slider for simple scroll bar

[Robert]

Hello,

I want to create a simple slider that would otherwise take the place of a vertical scrollbar and would show up only when a text string is too large to fit into a specifically sized div.

I can do this easily enough with CSS as such:

<div class="text" style="width:200px;height:100px;overflow:auto;" >
<h4>Details:</h4>
<p>An error message is a message displayed when, etc. etc.<p>
</div>

When the text string is longer than what will fit inside a 200x100 box a slider appears and allows the user to see the remainder of the text by scrolling down.

Basically all I want to do is replace the default scroll bar with something that looks better.

I looked at the live example (http://demos.telerik.com/aspnet-ajax/slider/examples/customscrollbar/defaultcs.aspx) but I'm having trouble understanding the sample code provided at the bottom of the page. My experience is heavy in design, XHTML markup, and CSS but light in programming, do I need a developer to help me with this or is there something specific I should read up on that can help me understand how to implement this?

Thanks,
Bob

[Tsvetie]

Hi Robert,
Basically, you can easily use the implementation in the online demo for a specific area on your page, but it would be difficult to replace all your scrollbars with a RadSlider.

The idea behind the implementation is the following:

1. You have a DIV element that holds your content - text in the example. This DIV element should have position - absolute in the example, and top and left set to 0 for the initial view. The idea behind the scrolling in this example is that you change the value of the top/left CSS property.
2. You have a DIV element that plays the role of a viewport by wrapping the DIV with the content. This DIV should have width and height and overflow:hidden as its content should not stretch it.
3. You have a RadSlider. When the value of the RadSlider changes, you calculate the new top/left for the content DIV and set it to the DIV:

   contentDiv.style.left = initialValue2 + 'px';

   contentDiv.style.top = initialValue + 'px';

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Robert]

Hi Tsvetie,

Thank you for the reply.

We're only looking to replace one scroll bar that appears in a message box therefore eliminating the need to have a huge message box covering the whole screen when the message is long.

This should work, thank you!

Bob