PDA

View Full Version : HTML Scroll Box

scoutt
10-04-2005, 09:27 AM
I have seen a lot of question on how to make a table scroll or how to make a scroll box. This is very easy. But for a beginner I can see how you can over see this.

in a blank document save this text to it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll Box</title>

</head>
<body>
<div style="overflow:auto; height:300px; width:300px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td> stuff here</td>
</tr>
</table>
</div>
</body>
</html>

that will scroll if the table gets bigger than 300 pixels in height. change the height and width in the div container to suit your needs. This is a generic scoll box so you are more than welcome to spruce it up and make it look pretty :)

Have fun.
tootytoot
12-04-2005, 07:14 AM
hi!
can this method be done up in a cell alone rather than the whole table?
:)
scoutt
12-07-2005, 02:27 PM
you bet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll Box</title>
</head>
<body>

<table cellpadding="0" cellspacing="0" style="width:300px;">
<tr>
<td><div style="overflow:auto; height:300px; width:300px">stuff here</div></td>
</tr>
</table>

</body>
</html>
althalus
12-13-2005, 11:56 AM
dunno if it'd be a big issue (could be depending on your design), but now your div is wider than the table, scoutt. :)
Enigmatic_Shado
12-14-2005, 06:42 PM
okay i thought i posted a reply in here once before but its not showing up... strange!!

Okay so here's my question, how on EARTH do you put this code into http://www.geocities.com/enigmatic_henna/index.htm the html on that site?

I've tried this once before and i totally screwed it up and lost all my information!

I want where the text is, to stop expanding and to scroll. I also want it so when u click on a link, it doesn't reload the entire page. It just loads the bottom area where the text is. How do i do this?

Help ! And thanks!
scoutt
12-19-2005, 04:37 PM
dunno if it'd be a big issue (could be depending on your design), but now your div is wider than the table, scoutt. :)
Thanks, I fixed it :)
okay i thought i posted a reply in here once before but its not showing up... strange!!
post are moderated in here, so they won't show up until a moderator approves them.
Okay so here's my question, how on EARTH do you put this code into http://www.geocities.com/enigmatic_henna/index.htm the html on that site?

I've tried this once before and i totally screwed it up and lost all my information!

I want where the text is, to stop expanding and to scroll.

Help ! And thanks!
just put the text in the div that has the overflow on it and it will take care of it.

I also want it so when u click on a link, it doesn't reload the entire page. It just loads the bottom area where the text is. How do i do this?
if you want to have it so you can click a link and it will load into this box then you "have" to use an iframe or frame, no other way.
tonilouisa
01-07-2006, 11:27 AM
I just wanted to post a big thank you to the person who posted the text for a Scroll Bar.

I have now successfully implemented this into the new design for my website.

Does anyone know if it is possible to change the look of this scroll bar so that it is different to the regular scroll bar - maybe a different colour or shape?

Also does anyone know how I might code some HTML so that the background colour of my website is not a block of colour but a subtle blend of colours.

Thank you


Toni:confused:
scoutt
01-08-2006, 01:48 PM
I just wanted to post a big thank you to the person who posted the text for a Scroll Bar.

I have now successfully implemented this into the new design for my website.
you are welcome. also the rest of your questions will have to be asked in the html forum, not here.
boyo1991
11-23-2006, 04:03 PM
scout, you do it a weird way.... i just say make a table and in the td tag make a textbox its easy....:rolleyes:
scoutt
04-15-2007, 05:19 PM
scout, you do it a weird way.... i just say make a table and in the td tag make a textbox its easy....:rolleyes:
It is not a weird way. The way you do it with the textarea is bad cause it is part of a form. It is not used for this. a textarea has it's place but for this purpose we have in this tutorial it is not recommended. you cannot put a table in a textarea can you? You can't include a html (show another page) file in a textarea can you? You can't style it better in a textarea can you? So far I see you are the one doing it weird. you also don't have to use a table. it can be done without the use of any table and you can still style it like I mentioned.
moonstar11401
04-22-2007, 09:32 PM
Can I add a background color, so it's just that color in the scroll box? If so, what is the tag, and where do I put it? :confused:
CdnRebel
04-27-2007, 05:37 PM
Just wanted to say thanks to Scout for posting the information on creating the scrolling. It would have greatly complicated matters, if I had to use frames.

CdnRebel
scoutt
04-29-2007, 07:52 PM
Can I add a background color, so it's just that color in the scroll box? If so, what is the tag, and where do I put it? :confused:

sure, something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll Box</title>

</head>
<body>
<div style="overflow:auto; height:300px; width:300px; background-color:#00ff00">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td> stuff here</td>
</tr>
</table>
</div>
</body>
</html>

See the background color attribute in the div tag. You can have any color you want there.
CdnRebel
05-02-2007, 05:17 PM
Hi Scoutt,

I tried using your code on another page where the info to be scrolled is in a table in two rows with one containing a picture and another containing the text and my left menu bar is sent to the far left and the bottom footer which should only be 800 pixels wide is spread across the entire screen and sent right to the bottom. With the other page I was able to place the scroll bars within the dimensions of my target area. I tried your code inside the table and the footers expanded in height as well. I am using ASP for the first time. Would that make a difference?

Thanks,
CdnRebel (feeling like I'm in shark infested waters and going down for the count):crying:
CdnRebel
05-02-2007, 07:06 PM
Hi Scoutt,

Just wanted to say please ignore my last message. I wasn't sure how to go back and delete it. I just changed some table sizes and I got what I wanted. I'm suffering from a cold and not thinking clearly. I have yet to see the scroll bar work when, the amount to be seen surpasses the display image. It seems like I am having to display most of my content and the scroll doesn't seem to go beyond that. Thanks again for your examples.

CdnRebel
Aznflipp911
06-15-2007, 08:08 PM
Hey this stuff is really really useful to me. i just have a question, how do u position this scroll box to where i would want it to go? like absolute value or something? thanks
bentemp
03-26-2008, 01:52 PM
hey, this is really helpful but i still need to ask a question. I have used your scroll code and the scroll bar isnt showing! D: How can i make it show again? Thanks to anybody who helps :)

Ben
scoutt
09-18-2008, 08:34 AM
If you cannot make the scrollbar show then your height is to big for the content. Just make the height smaller.
miajade20
10-01-2008, 02:01 AM
thanks for this tutorial.
9997
12-23-2008, 08:38 PM
hey, why not just use www.dynamicdrive.com and then edit their scroll box! i use some of their scripts, they are good for lazy ppl like! this is just my opinion! :D
dragoth
01-23-2009, 11:22 AM
ok what about where people click on the scroll box thing is there a way here they click on it it copies for the instead of them haveing to left click selet all and left click again and copy or the keyboard short cuts its were they left click the box and it copies by its self