Click to See Complete Forum and Search --> : How do you create Scroll bars for text?
RobertF
09-18-2007, 06:31 AM
I have a website which i want to avoid using static text. I wish to add scroll bars so that the user can scroll up and down thus saving some web room on the main page.
How do you do this using flash or dreamweaver?
Another thing i would like is when a user rolls over a scroll bar it would be cool if the scroller automatically moved up /down etc.
Any ideas?
It's very important for me to know this.
Rob
You use a type of coding called CSS:
(Put this in the <head> section:
<style type="text/css">
#scroller {
width: 400px;
height: 400px;
overflow: scroll;}
</style>
Put this where you want the scrolling box to be:
<div id="scroller">
your text
</div>
As to the automatic scrolling, that would have to be done with either Flash or javascript. However, I urge you not to implement that because it could cause some usability concerns -- like being really annoying! :p
KDLA
RobertF
09-18-2007, 10:13 AM
Thanks for the code. I'm trying to work on the Flash one as i type lol!
Is your code just a normal scroller where text flows from top to bottom etc?
Or is it designed so that users can scroll down a text field manually (up & down) themselves? ----- This is what i need or would like.
Thanks
Rob
The user scrolls his/herself. It's no different (but much preferable) to an iframe.
RobertF
09-18-2007, 10:19 AM
What's an iframe? lol!
RobertF
09-18-2007, 10:52 AM
<IMG>http://img408.imageshack.us/img408/7500/90187424zw4.jpg</IMG>
In the first screenshot do i place the action code on the individual side scroller buttons? Or do i place the action code on the little digits next to the layers?
I've tried both but i can't get my flash scroller to work and i'm close to pulling my teeth out!!!
<IMG>http://img529.imageshack.us/img529/9461/66645371lr4.jpg</IMG>
Here is a close-up of the code - is this right?
I have no idea what i'm doing wrong - help!
Rob
RobertF
09-18-2007, 11:06 AM
You use a type of coding called CSS:
(Put this in the <head> section:
<style type="text/css">
#scroller {
width: 400px;
height: 400px;
overflow: scroll;}
</style>
Put this where you want the scrolling box to be:
<div id="scroller">
your text
</div>
As to the automatic scrolling, that would have to be done with either Flash or javascript. However, I urge you not to implement that because it could cause some usability concerns -- like being really annoying! :p
KDLA
I tried this out. Looks good but how do you take out the horizontal scrollbar? In mine the horizontal scroll bar appears and it's not even needed! Only the vertical one i need. Plus the text is positioned right up against the vertical scrollbar on the right-hand side - how do i position the text so that there's space between the scroller and the text?
#scroller {
width: 400px;
height: 400px;
overflow-x: none;
overflow-y: scroll;
padding: 10px;}
RobertF
09-18-2007, 11:34 AM
#scroller {
width: 400px;
height: 400px;
overflow-x: none;
overflow-y: scroll;
padding: 10px;}
Cool. Thanks KDLA.
By the way why should someone create scrolling text using Flash for their site? - How does this lead to problems?
Flash is just an "image." If the majority of your text is in an image, then search engines have no text to index.
Also, if you have visitors who use screen readers or don't have the Flash plug-in, they won't be able to access your content.
KDLA
RobertF
09-18-2007, 11:43 AM
Thanks for the help and info:)
grimmylina
09-21-2007, 04:51 PM
Can I ask you? How do you get the scrollbar to show up in browsers like Safari?
The scrollbar style is CSS3 -- strange enough IE recognizes it, but I don't think Safari does.
If you simply use "overflow: auto;" you'll get the scrollbars (x & y) in Safari.
KDLA
grimmylina
09-21-2007, 05:43 PM
Thank you!! Thank you!! Thank you!! You are the best...that has been driving me crazy all day.
: )
RobertF
07-17-2008, 04:38 PM
Hi there
I'm creating a website for a friend and i'm currently working on the bio page.
If you look at the screen image his picture is on the right and all his info on the left. I'm using notepad and dreamweaver to create purely an html site.
I want to keep the site small and clean looking so i've used scrollbars to keep all the info on one page. You can see the scroll bar in the middle of the screen.
I'm using this code:
<style type="text/css">
#scroller {
width: 300px;
height: 450px;
overflow-x: none;
overflow-y: scroll;
padding: 10px;}
</style>
My question is how do i modify the scrollbar in the middle of the screen. It doesn't look attractive. I would like a whole different scrollbar or atleast to make it thinner and give it more style, change the colour - make it darker in the middle and only have the up and down arrows in colour
How would i go about doing this?
Thanks]
Robert