Scrollbar help!

  • Just1nCase
  • Newbie
  • Newbie
  • Just1nCase
  • Posts: 13
  • Loc: Sou Cal

Post 3+ Months Ago

Hello,

I need some help adding a scrollbar in a particular area (Inside a slice). How do I add one? The scrollbar is going to be use for the news area. I'm also using Dreamweaver MX to design my website. I'm beginner in HTML, javascript, and other languages so try to describe in the most simplest terms. Thanks

~ust
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Physixx
  • Born
  • Born
  • Physixx
  • Posts: 2
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I'm new as well to HTML, and i too would like to know how to do something along these lines.

I have a text box (table cell) containing text, and i would like to scroll down this box to show more text, or images or whatever. I have no clue about the ways around this. (sort of like a textarea, but with non editable text) :lol:

Thanks
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

http://www.domedia.org/oveklykken/css-div-scroll.php
http://www.siteexperts.com/dhtmllib/dem ... /page2.asp

Here are some articles I found interesting. I believe the first one is very simple.
  • Just1nCase
  • Newbie
  • Newbie
  • Just1nCase
  • Posts: 13
  • Loc: Sou Cal

Post 3+ Months Ago

I found the second website to more useful. Thanks & the new scrollbar is working great! :D
  • starqueen
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122

Post 3+ Months Ago

it only works in IE4 tho, i wouldnt use it. think of all the ppl using mozilla/safari/netscape to view the site, pfff... use an iframe or suttin else to include a scroll bar
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

It works in all my browsers. IE6 - FireFox - Opera 7.

Maybe I'm doing something wrong.

Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#idea{width:200px;height:300px;overflow:auto;}
</style>
</head>

<body>
<div id="idea">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit√° de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
</body>
</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style>
  8. #idea{width:200px;height:300px;overflow:auto;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="idea">
  13. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  14. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit√° de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  15. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
  16. </body>
  17. </html>



** Just checked out in NS7.1 and Vanilla Mozilla 1.3a. It didn't scroll in NS4.08, but it did display the entire contents of the block.
  • starqueen
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122

Post 3+ Months Ago

oh, well "just1incase" said the 2nd website was more helpful, so im inferring that they used their code and in their site says "Internet Explorer 4.0 only."
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

cool. :cool:
  • Just1nCase
  • Newbie
  • Newbie
  • Just1nCase
  • Posts: 13
  • Loc: Sou Cal

Post 3+ Months Ago

Yeah, I used this code from the second site:

Quote:
<DIV STYLE="width: 350; height: 100;
overflow: scroll; border:1pt black solid">
contents
</DIV>


For some reason, it not only works for IE, but for Firefox. It messes up in Firefox when I change the overflow into overflow-y for it to have only the vertical scroller. Also, is possible to change the color and style of the scroller?

-ust
  • Physixx
  • Born
  • Born
  • Physixx
  • Posts: 2
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

The first recommended site works fine for me.


Thanks again.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Just1nCase wrote:
Yeah, I used this code from the second site:

Quote:
<DIV STYLE="width: 350; height: 100;
overflow: scroll; border:1pt black solid">
contents
</DIV>


For some reason, it not only works for IE, but for Firefox. It messes up in Firefox when I change the overflow into overflow-y for it to have only the vertical scroller. Also, is possible to change the color and style of the scroller?

-ust



I haven't tried it, but I would imagine that if you've applied scrollbar style in the page, they would cascade down to the DIV. I'll have to test that later.

Did you figure out the overflow thing? If you set it to 'scroll' you get both vertical and horizontal bars....If you set it 'auto', it should only scroll vertically, unless you have some content that won't wrap, and forces the content width to be greater than the DIV width.
  • Just1nCase
  • Newbie
  • Newbie
  • Just1nCase
  • Posts: 13
  • Loc: Sou Cal

Post 3+ Months Ago

I changed the overflow: scroll into : auto and it worked in Firefox and IE! And thanks again! I really appreciate the help.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

starqueen:

iframes look kinda funny in anything but IE, so by saying: "Think of all the people who use Mozilla/Safari/Netscape..." you kinda just negate your argument. Sorry...I just didn't want you to have misconceptions.
  • starqueen
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122

Post 3+ Months Ago

iframe _works_, generally, in every browser though. if i were doing the design id make it so there would be no need for iframes or a scrollbar in a certain box--but if i to choose between a funny-looking iframe or a scrollbar that only works in IE, itd be the iframe.

clarified? hehe ^_^
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I think if you take a closer look at what they say on the page referred to in the second link that it doesn't mean that the effect will only work in IE 4.0 but that the contents of the div will be displayed in the ordinary flow of the page in IE 4. I interpret that to mean that it won't work correctly in IE 4 although I have no way to test it. However, I did test their code in IE 6, Moz 1.6 and Opera 7 and it did produce the scrolling viewport effect. I would agree that they could have been more clear though.

Quote:
Internet Explorer 4.0 only. If the scrolling contents were included, they would be displayed in the flow of the page.
  • starqueen
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122

Post 3+ Months Ago

well Just1nCase says it works fine fine fine! hehe, no need to test it :lol:
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Physixx wrote:
I'm new as well to HTML, and i too would like to know how to do something along these lines.

I have a text box (table cell) containing text, and i would like to scroll down this box to show more text, or images or whatever. I have no clue about the ways around this. (sort of like a textarea, but with non editable text) :lol:

Thanks

This may or may not be exactly what you are looking for, but refer to it anyway. It is possible in IE 4+ and all recent releases of Netscape, Mozilla and Opera browsers to use the CSS overflow property in a div tag and then enclose a table within that tag....

Refer to this article: Can a table have a scrollbar?
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

digitalMedia wrote:
http://www.domedia.org/oveklykken/css-div-scroll.php
http://www.siteexperts.com/dhtmllib/dem ... /page2.asp

Here are some articles I found interesting. I believe the first one is very simple.

Nice links! Very useful! :D

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.