yet another scrollbar question

[Urbish]

Aloha, everyone.

I'm a bit of a newbie, and I'm not even quite sure if this question should be directed towards HTML or CSS, but here goes:

The website I'm building has images surrounding a box of text. I'd like to make it so that the text box is scrollable, to view more content. I'd also like to customize scroll buttons on the right side of the text box, rather than have the same old boring scrollbar that windows would stick in there. An example of a site that uses this technique would be <a href="http://www.enjoyincubus.com">the Incubus website</a>.

Hopefully someone out there can help me out. Thanks in advance!

[QuietDean]

Hiya, welcome to the forums.

Have you tried viewing source on the example site you have given to see how they have done it? That would seem the most obvious thing to try.

[antithesis]

Hey there.. I took a look at the site, and you won't be able to view source on that one because it uses flash.. its a bit different. however, there is a way to do what you want to do.. well, make that a few ways.

First off, if you want to have a background image, like the incubus site and a text box in the middle of it, specify the background for the page (or in a table). Once you have done that, you can place a <DIV STYLE="background-color:transparent;overflow:auto"></DIV> in the place you wish by using tables. You can specify the height and width by using the usual attributes. The OVERFLOW attribute will place scrollbars on the DIV if you need them.

To change the scrollbars, here are the STYLE attributes you can include in in the HEAD section. Play around with the HEX codes for different colors. You can also use color names if you are more comfortable with that.

<style><!--
DIV
{
scrollbar-base-color: FFFFFF;
scrollbar-Face-Color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-Shadow-Color: FF00FF;
scrollbar-DarkShadow-Color: FF00FF;
scrollbar-Highlight-Color: 000000;
scrollbar-Track-Color: FFFFFF;
}
-->
</style>

For an example of something I have done similar to this, you can visit:

http://www.massacreindisguise.net/info.asp?type=info

if you have any questions, please ask.

[Urbish]

Thanks guys, you both helped quite a bit...and hopefully you can help me even more. I've made the text box in the middle with no trouble, but now rather than have just a colored scroll bar, i'd actually like to put in an image and assign it the scrolling property.

The only sites that I've seen that have this use Flash, and I'm not all that skilled with that sucker of a program just yet. Is there any way to do this in html?

For an example of what I need, <a href="http://www.dmband.com">The Dave Matthews Band Website</a> can give you a good idea.

Thanks again, guys!

[antithesis]

Glad it's working for you.. okay, I think I have an example of what you want on my site.. hopefully it works properly.. to find it, go to the following page, and click on the ">>" next to "news". it should pop up in the middle of the page. you can change the scroll buttons to look like whatever you wish. don't worry, you don't have to hide it like i did. sorry, the link for the page is:

http://www.massacreindisguise.net/index2.asp

so, since i've messed up all the code all over the place.. i've taken it apart, and included only the necessary bits. of course, you'll have to download the javascript, but you can do that here http://www.massacreindisguise.net/js/scrollbutton.js

the necessary code to stick in your page is:

in the head somewhere:

<script type="text/javascript" src="path to javascript file here"></script>

and then for the area you want to scroll, add a DIV:

<DIV id="scrollContainer" STYLE="overflow:hidden;">

you can add anything you'd like, or remove anything you'd like, but keep the overflow hidden, as this will remove the regular scrollbars.

and then, place this code where you want the buttons to be. you can split it up if you'd like. you can change the amounts of the IntervalPause and ScrollAmount for customization.

<a class="button scrollButton" id="upScrollButton"><IMG SRC="insert up arrow filename"></A>
<a class="button scrollButton" id="downScrollButton"><IMG SRC="insert down arrow filename"></A>
<script type="text/javascript">
//<![CDATA[

ScrollButton.scrollIntervalPause = 50;
ScrollButton.scrollAmount = 5;

var upScrollButton = document.getElementById( "upScrollButton" );
var downScrollButton = document.getElementById( "downScrollButton" );
var scrollContainer = document.getElementById( "scrollContainer" );

new ScrollButton( upScrollButton, scrollContainer, 8 );
new ScrollButton( downScrollButton, scrollContainer, 2 );

//]]>
</script>

hope this is what you were looking for.. if not, let me know, and i'll see if i can find something else..